Ideal Reality

パソコンのある生活を良くするためのサイト

2019年3月30日 19時12分

highlight.jsに行番号をつける

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

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

wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js

スポンサーリンク

ここをベースに

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

highlight.jsを非同期で読み込む – Ideal Reality

ここで実装したコードに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は各自環境に合わせた値に変えてくださいね。

スポンサーリンク

コメント

投稿されたコメントはありません

名前

コメント

関連する投稿

HTML内に突如出現した空白を消す

highlight.jsを非同期で読み込む