highlight.jsの使い方メモ
管理しているサイトのプログラミング関連の記事でコードのハイライト表示に対応することにしました。
使用するライブラリは「highlight.js」。
以下、highlight.jsの使い方のメモになります。
目次
- highlight.js
- CDNでの利用
- 使い方
- 非同期での実装（async / defer）
- 補足
- 参考リンク
highlight.js
JavaScriptでコードのハイライト表示に対応する場合、こちらのhighlight.jsを使用するのが一般的だと思います。
highlightjs/highlight.js: Javascript syntax highlighter (GitHub)
今回、使用したバージョンは「10.0.3」です。
CDNでの利用
highlight.jsをアプリケーションに組み込む方法はいくつかありますが、今回はCDNを利用します。
必要最低限の外部ファイルの参照と実行スクリプトは以下の通り。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
CDNの場合、対応している言語が絞られているため、不足分は追加で参照しないといけません。
私の場合、VB系のコードが足りなかったので追加しました。
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/languages/vbnet.min.js"></script>
デフォルトで対応している言語（language）は、公式サイトのダウンロードページでCommonに指定されているものになります。
バージョンによってCommonの言語が変わっている？ようなので、使ってみて足りないなら追加するといった手順でいいと思います。
ハイライト表示で指定できるスタイルはデモページで確認することができます。
個人的にはVs2015のスタイルが気に入っているので、スタイルを変える場合、上記の「default.min.css」の参照を以下のもので置き換えます。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/vs2015.min.css">
使い方
highlight.jsを利用する場合、デフォルトではすべての<pre><code>タグがハイライトの対象になります。
言語は自動判定されますが、手動で指定したい場合はいくつか書き方があって以下のようにします。
<pre><code class="html">...</code></pre>
<pre><code class="language-html">...</code></pre>
<pre><code class="lang-html">...</code></pre>
公式サイトで掲載されている方法は<code>タグにclassを指定するやり方ですが、<pre>タグに指定しても同じようにハイライト表示されます。
<pre class="lang-html"><code>...</code></pre>
他にもプレーンテキストの指定や、
<pre><code class="plaintext">...</code></pre>
ハイライトを一切しない（背景色なども設定されない）といった指定も可能です。
<pre><code class="nohighlight">...</code></pre>
デフォルトで言語の自動判定をしたくない場合、hljs.initHighlightingOnLoad() の実行前に、「languages」を空にしてやるとオフにできるようです。
<script>
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
</script>
非同期での実装（async / defer）
非同期で実装する場合、以下のような書き方となります。
<script async src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script>
window.addEventListener("load", function () {
hljs.initHighlighting();
});
</script>
通常は上記の通りでいいですが、CDN利用で言語を追加する場合、別々のファイルを順番に実行していく必要があります。
こういった場合、deferを使うとJSファイルのダウンロードは非同期で行われますが、JSの実行は<script>が記述された順に行われます。
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
<script defer src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/languages/vbnet.min.js"></script>
<script>
window.addEventListener("load", function () {
hljs.initHighlighting();
});
</script>
defer利用時の処理順は以下の通り。
- JSファイルのダウンロード（非同期）
- HTMLパース完了
- JSファイルを<script>の記述順で実行
- loadイベント
これまで問答無用で非同期はasyncでいいと思っていましたが、複数ファイルを順番に実行したい場合はdeferが使えます。
補足
バージョン「10.0.0」を使うと、<script>タグ内のコードが表示されないといったことがあったので、最新バージョンを利用することを推奨します。