highlight.jsで行番号を表示させる方法

コードを見やすくするために、highlight.jsをインストールすることにした。

初めはsyntaxhighlighterを試したものの、いくつか使いたいコードのパッケージが無いことと、表示に時間がかかるので、他の方法を検索している中でhighlight.jsを発見。

早速Ver9.6.0を導入。使用する言語によって、パッケージのカスタマイズをしてダウンロードすることができるみたいなので、ScilabやR等も追加してダウンロード。

HPのフォルダにhighlightというフォルダを作り、解答した中身を移します。

設定方法は、ヘッダー部分に以下の３行を追加するだけでOK。

<link rel="stylesheet" href="highlight/styles/default.css">
 <script src="highlight/highlight.pack.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>

 

設定も簡単だし、表示も軽いです。

ただ、行番号はやはり表示して欲しかったので、なにか方法がないか検索。

こちらのリンクの方法が使えそうなので、早速ダウンロードして試してみる。

先ほど作ったhilghlightフォルダの中に「highlightjs-line-numbers.js」を移し、以下の3,5行目を追加。

<link rel="stylesheet" href="highlight/styles/default2.css">
<script src="highlight/highlight.pack.js"></script>
<script src="highlight/highlightjs-line-numbers.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>hljs.initLineNumbersOnLoad();</script>

これだけでOK。

地味にはまったのが、以下のように、<pre><code>コードの１行目を続けてかかないと、１行表示がズレてしまうこと。

<pre><code>の行が１行目になっているようで、改行してコードの１行目を書くと、行数とコードが１行ズレてしまう。

<pre><code class="vb">sub test()
Dim A as integer
End sub
</code></pre>

ちなみに、このブログでは、こちらのリンクを参照にして、SyntaxHighlighter Evolvedを使っています。