highlight.jsを使用して行番号付きのコードハイライト表示をする方法
2021.12.022022.04.23
highlight.jsを使用して行番号付きのコードハイライト表示ができます。
１．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>２．HTMLに以下のコードを記述する。
<script>
hljs.highlightAll();
hljs.addPlugin({
'after:highlightElement': ({ el, result, text }) => {
result.value = result.value.replace(/^/gm,'<span class="row-number"></span>');
}
});
</script>３．行番号を振るための以下のような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;
}４．HTML内にハイライトしたいコードを<pre><code>タグ内に記述する
<pre><code>print "xxxx";
print "yyyy";
print "zzzz";</pre>５．HTMLをブラウザで開くと行番号付きでハイライトされたコードが表示される。
これは凄い！詳しくは以下のページを参照してください。