highlight.jsを使用して行番号付きのコードハイライト表示をする方法| プロサバメモ

WEBプログラミングやサーバ設定などのメモ場

highlight.jsを使用して行番号付きのコードハイライト表示をする方法

2021.12.022022.04.23

highlight.jsを使用して行番号付きのコードハイライト表示ができます。

1.HTMLにhighlight.jsとhighlightのスタイルを読み込む。

スタイルは好みのものを読み込む。この例では、 dracula.min.css を読み込んでます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/dracula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>

2.HTMLに以下のコードを記述する。

<script>
    hljs.highlightAll();
    hljs.addPlugin({
        'after:highlightElement': ({ el, result, text }) => {
            result.value = result.value.replace(/^/gm,'<span class="row-number"></span>');
        }
    });
</script>

3.行番号を振るための以下のようなCSSを用意する。

pre{
    counter-reset: rowNumber;
}
pre span.row-number{
    counter-increment: rowNumber;
}
pre span.row-number::before {
    content:counter(rowNumber);
    width: 2rem;
    display: inline-block;
    color: #aaa;
}

4.HTML内にハイライトしたいコードを<pre><code>タグ内に記述する

<pre><code>print "xxxx";
print "yyyy";
print "zzzz";</pre>

5.HTMLをブラウザで開くと行番号付きでハイライトされたコードが表示される。

これは凄い!詳しくは以下のページを参照してください。

参考:highlight.jsに行番号を追加する方法

関連記事

TOP