highlight.js で行番号を表示

ブログ内の SyntaxHighlighter → highlight.js 移行作業がようやく終わったので投稿。

highlight.js には行番号を表示する機能が付いてない。
とりあえず検索してみたところ、ちょうどいいプラグインがあったのでそれの紹介。（当ブログでも使用中）
wcoder/highlightjs-line-numbers.js

使用方法は、highlight.js を適用した要素（普通は <code>）に対して hljs.lineNumbersBlock(要素) を実行。
もしくは、hljs.initLineNumbersOnLoad() を仕掛けておく。
[使用例]

[].forEach.call(document.querySelectorAll('pre > code'), function(elem){
    // highlight.js は <code> 内の先頭と末尾の改行を無視してくれないので、ここで削除
    // ※ HTML を書く際、先頭と末尾に改行を入れない方法もある
    elem.textContent = elem.textContent.replace(/^[\r\n]+|[\r\n]+$/g, '');

    // highlight.js の適用
    hljs.highlightBlock(elem);

    // highlightjs-line-numbers.js の適用
    hljs.lineNumbersBlock(elem);
});

また、行番号ブロックのスタイル（.hljs-line-numbers）を自分で用意する必要がある。
[使用例（当ブログのスタイル・2015/10/31）]

pre > code.hljs.hljs-line-numbers {
    background-color: #f5f5f5;
    border-right: 0 none;
    color: #707070;
    text-align: right;
    min-width: 14px;
    /* 以降は選択できないようにするためのスタイル */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

highlight.js に移行した理由

• C# の新しいキーワードに対応 (素の SyntaxHighlighter は var 辺りから未対応)
• 旧 Visual Studio 風ハイライトが選択可能
• ハイライトする言語を選択してパッキングと Minify が公式サイトで可能
• 外部ファイルの数が少ない (プラグインを除けば js と css の 2 ファイル)