highlight.jsで行番号を表示

highlight.jsは、導入が容易で実行速度が速い、シンプルなテキストハイライターです。 そのシンプルさを重視するためか、行番号を表示する機能がありません。そこで、jQueryを使って行番号を付けてみました。

スクリプト

hljs.highlightBlock()の実行後に、行番号を付加するhighlightGutter()を呼んでいます。

$(function() {
     function highlightGutter(e) {
        var regExp = /\r\n|\r|\n/g;
        var newline = $(e).text().match(regExp);

        var gutter = '<span class="gutter">'
        for (var i = 1; i <= newline.length; i++) {
            gutter += i + '\n';
        }
        gutter += '</span>';

        $(e).prepend(gutter);
    }

    $('.highlight').each(function() {
        hljs.highlightBlock(this);
        highlightGutter(this);
    });
});

CSS

pre.highlight .gutter {
    float: left;
    text-align: right;
    margin-right: 1em;
    min-width: 1em;
    color: #999;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

実行例

HTML

囲みタグは、<pre class="highlight"> … </pre>です。

<pre class="highlight">
行
番
号
が
つ
き
ま
し
た
</pre>

実行結果

行
番
号
が
つ
き
ま
し
た
関連記事
#Coding
2016-04-04 クリップボード内のテキストを新規ファイルに保存するスクリプト(UTF-8版)
2016-02-28 背景を透過してもギザギザしないローディングスピナー(spin.js版)
2016-02-25 背景を透過してもギザギザしないローディングスピナー(SVG版)
2015-10-19 選択アイテムのファイル名でEverything検索するスクリプト
HTML/CSS
2016-02-28 背景を透過してもギザギザしないローディングスピナー(spin.js版)
2016-02-25 背景を透過してもギザギザしないローディングスピナー(SVG版)
JavaScript
2016-04-04 クリップボード内のテキストを新規ファイルに保存するスクリプト(UTF-8版)
2016-02-28 背景を透過してもギザギザしないローディングスピナー(spin.js版)
2015-10-19 選択アイテムのファイル名でEverything検索するスクリプト
    APPs
    #APPs
    Game
    Qonoha
    Sublime Text
    Tablacus Explorer
    OBLIVION
    #Oblivion
    Architectures and Locations
    Blockhead
    Body, Head and Hair
    Combat and Crime
    Console
    CS
    Dremora IceElf
    Enhanced Economy
    Equipment
    Fundament
    Immersion and Realism
    LAME
    Mage's Sky House
    Magic and Enchantments
    MajorJims UI
    Maskar's Oblivion Overhaul
    Mercantiles
    MODs List
    My Characters
    NPC
    Photo Album
    Pose and Animation
    Quests
    Recommended
    Skills and Leveling
    TES4Edit
    Troubles
    Undies Underneath
    User Interfaces
    Wrye Bash
    CODING
    #Coding
    HTML/CSS
    JavaScript