highlight.jsの使い方や設定可能なコード、スタイルなどのまとめ

これまでコードのシンタックスハイライトには「google code-prettify」を使っていましたが、新しくサイトを作る機会があり、「highlight.js」がどんな感じなのか試してみたので、その際に調べたことのメモになります。

対応しているコードが豊富で設定可能なスタイルも沢山あります。ただ、機能的にはシンプルで、行番号を付与したりすることはできません。

CDNを利用する場合。

// すべてのコードに対応したファイル
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

// 特定のコード（例：php）のみのファイル
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/php.min.js"></script>

CDNを利用する場合、すべての種類または特定の一種類のみに対応したJSファイルの参照が可能です。上記のphp以外にも対応しているコードは他にもたくさんあるので、highlight.js - cdnjs.comから確認してください。

一種類では足りないけれどすべては必要ないといった数種類の言語のみに絞りたい場合は、Getting highlight.jsから必要なコードにチェックを入れてJSファイルをダウンロードし、自サイトにダウンロードしたファイルを設置することができます。

コードをハイライト表示するにはJS参照後、下記のメソッドを呼び出します。

<script>hljs.initHighlightingOnLoad();</script>

CDNを利用する場合。

// default
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

// vs
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css"></script>

自サイトに設置する場合は上記のCDNにアクセスしてコピペするか、Getting highlight.jsでダウンロードした圧縮ファイルにすべてのスタイルが含まれているので、その中から選びます。

highlight.jsを使ってコードをハイライト表示する際の書き方は以下のようになります。

<pre>
<code>
body {
    color: #000;
    background-color: #fff;
}        
</code>
</pre>

上記コードの場合、適用されるスタイルは自動で判定されます。使ってみた感触としては大抵は自動判定で問題ありませんでした。

指定したい場合は以下のように<code>タグの「class」にコードの種類を設定します。

<pre>
<code class="css">
body {
    color: #000;
    background-color: #fff;
}        
</code>
</pre>

対応しているコードはGetting highlight.jsから確認できますが、HTML、XMLを選択した場合、<code>タグのclassには「html」や「xml」以外にもエイリアスとして「rss」や「xhtml」といったものも指定することができます。（適用されるスタイルは一緒）

highlight.js demoから確認できます。

一点だけ注意点として、コードの種類を指定する際、<pre>にclassが設定されているとそちらのclass名も参照してスタイルが適用されてしまっていました。

コードの種類を設定しているのに想定したスタイルが反映されない場合、<pre>タグにclass名が設定されていないか確認した方がいいです。私の場合、「google code-prettify」を使っていた際のコード「class="prettyprint lang-js"」が残骸として残っていたため、正常に動作しないことがありました。

また、指定したコードの種類が存在しない場合は自動判定になります。