Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

Highlight.js の使い方

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

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

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

highlight.js のサイト

設置

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

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

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

終わり

tadnakam
電通大出身。 趣味でプログラミングをやってます。
https://makandat.wordpress.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away