コードのハイライト表示用 JS ライブラリ highlight.js の使い方

  • 29
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Highlight.js の使い方

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="/js/highlight/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>

この表示結果は下のようになります。(色はパレットの指定により可変)

sample.js
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="/js/highlight/styles/default.css">

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

atelier-cave.light.css
atelier-cave.light.css

atelier-sulphurpool.dark.css
atelier-sulphurpool.dark.css

color-brewer.css
color-brewer.css

magula.css
magula.css

mono-blue.css
mono-blue.css

paraiso.light.css
paraiso.light.css

solarized_dark.css
solarized_dark.css

solarized_light.css
solarized_light.css

tomorrow.css
tomorrow.css

vs.css
vs.css

xcode.css
xcode.css

言語の設定

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

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

ミラー