Highlight.js の使い方

 [Home] 投稿日 2015/05/23

highlight.js は HTML にソースコードを表示するとき、キーワードなどを強調表示するための JavaScript ライブラリです。

highlight.js のサイト


設置

(1) インターネットに接続できる場合

インターネットに接続できる場合は、次のようにすれば highlight.js をダウンロードしてウェブサーバにインストールする手間が省けます。下の URL で 8.6 は highlight.js のバージョンなので必要に応じて変更します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

あるいは

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.6/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

(2) イントラネットなどの場合 (インターネットに接続できない場合)

下のコードでは仮想フォルダ /js/highlight に highlight.js を設置したものとします。

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

ハイライト表示するソースコードは次の例のように、<pre><code> ... </code></pre> で囲みます。

<pre>
 <code>
  function $initHighlight(block, cls) {
    try {
      if (cls.search(/\bno\-highlight\b/) != -1)
        return process(block, true, 0x0F) + 
           ' class=""';
    } catch (e) {
    /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
      if (checkCondition(classes[i]) === undefined)
        return /\d+[\s/]/g;
    }
  }
 </code>
</pre>

この表示結果は下のようになります。

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) + 
         ' class=""';
  } catch (e) {
  /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      return /\d+[\s/]/g;
  }
}

パレットの変更

パレットの変更は、link タグの href 属性を変更します。下の例でいうと default.css を変更します。

<link rel="stylesheet" href="/path/to/styles/default.css">

バージョン 8.6 で言うとパレットは 63 種類もあります。下にいくつかの例を示します。この CSS を上の link タグの href 属性の default.css と置き換えるとパレットを変更できます。

atelier-cave.light.css

atelier-sulphurpool.dark.css

color-brewer.css

magula.css

mono-blue.css

paraiso.light.css

solarized_dark.css

solarized_light.css

tomorrow.css

vs.css

xcode.css


言語の設定

言語の設定は自動です。もし、期待通りのハイライト表示ができない場合は次のように code タグの class 属性で言語を指定することもできます。

<pre><code class="html">...</code></pre>