当サイトではソースコードの表示にhighlight.jsを利用しています。

ただ、highlight.jsは行番号を表示してくれないので、行番号が欲しい場合は以下のhighlightjs-line-numbers.jsを利用します。

ここをベースに

以前の記事でhighlight.jsを非同期で読み込みして実装しました。

ここで実装したコードにhighlightjs-line-numbers.jsを追加します。

CDNからhighlightjs-line-numbers.jsを読み込み

<script async src="/path/to/highlight.pack.js"></script>

の直下に

<script async src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>

を追加します。

スクリプトを実行

<script>window.addEventListener("load", function() { hljs.initHighlighting(); });</script>

この部分にhighlightjs-line-numbersを実行するコードを追加して

<script>window.addEventListener("load", function() { hljs.initHighlighting(); hljs.initLineNumbersOnLoad(); });</script>

こうします。

initLineNumbersという関数は定義されていないのですが、ソースコードを見るとinitLineNumbersOnLoadは実行された際にページが読み込み済みかをチェックして読み込み済みの場合は即座に実行してくれるみたいなので、これで大丈夫です。

結果

<link rel="preload" href="/path/to/styles/default.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script async src="/path/to/highlight.pack.js"></script>
<script async src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script>
<script>window.addEventListener("load", function() { hljs.initHighlighting(); hljs.initLineNumbersOnLoad(); });</script>

こんな感じのコードに落ち着きました。

もちろん/path/to/styles/default.cssと/path/to/highlight.pack.jsは各自環境に合わせた値に変えてくださいね。