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

  • 32
    Like
  • 0
    Comment

Highlight.js の使い方

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

  • 対応言語が多い(この種のライブラリでは一番多い!?)
  • パレットが豊富
  • 設置が簡単

です。
参考:コードのハイライト表示用 JS ライブラリ 3種

highlight.js のサイト

設置

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

インターネットに接続できる場合は、次のようにすれば highlight.js をダウンロードしてウェブサーバにインストールする手間が省けます。下の URL で 8.6 は highlight.js のバージョンなので必要に応じて変更します。2017/11の時点で最新は 9.12.0 になっています。
パレット default.min.css は地味なので github.min.css とかにしたほうが見栄えが良いです。パレットにどんなのがあるかどんな見栄えなのかは、highlight.js のサイトで見ることができます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/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>

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

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 と置き換えるとパレットを変更できます。

CDN を使用している場合は、*.min.css にする必要があります。例えば、default.min.css のようにします。

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

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

color-brewer.css
color-brewer.css.png

magula.css
magula.css.png

mono-blue.css
mono-blue.css.png

paraiso.light.css
paraiso.light.css.png

solarized_dark.css
solarized_dark.css.png

solarized_light.css
solarized_light.css.png

tomorrow.css
tomorrow.css.png

vs.css
vs.css.png

xcode.css
xcode.css.png

言語の設定

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

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

終わり