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

#Highlight.js の使い方


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

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

です。
参考：[コードのハイライト表示用 JS ライブラリ 3種](https://qiita.com/tadnakam/items/1323d03743fc0101aa50#_reference-5bf24f87c297fca87bd2)

[highlight.js のサイト](https://highlightjs.org/)

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

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

```HTML
<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 を設置したものとします。

```HTML
<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>
```

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

```javascript
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;
  }
}
```

## サーバサイドで使う場合
この記事を書いた当時はサーバサイドで使えなかったのですが、しばらく前からサーバ側でも使えるようになっています。
Node.js で使う場合は、npm i highlight.js でインストールが必要です。
簡単な使用例を下に示します。highlightedCode がソースコードを変換した HTML になります。

```javascript
#!/usr/bin/env node
const hljs = require('highlight.js')

const highlightedCode = hljs.highlightAuto(
  `const hljs = require("highlight.js/lib/core")
hljs.highlight(str)`
).value

console.info(highlightedCode)
```

##パレットの変更

パレットの変更は、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](https://qiita-image-store.s3.amazonaws.com/0/62802/cd0972a7-720f-7d18-8468-aff2518a2c11.png)


**atelier-sulphurpool.dark.css**
![atelier-sulphurpool.dark.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/1d5af5de-d932-02b7-92c1-bdbde5f70750.png)


**color-brewer.css**
![color-brewer.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/ba43c3b5-01b6-19dc-1472-5ceb9b040e53.png)


**magula.css**
![magula.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/60f4faaa-cec3-355b-bbbc-2dc457abdd59.png)


**mono-blue.css**
![mono-blue.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/c945e136-2fc3-2348-711e-ef42f86b6657.png)


**paraiso.light.css**
![paraiso.light.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/556c8ba1-3192-e982-abae-9ea353cbb21d.png)


**solarized_dark.css**
![solarized_dark.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/232d50ac-18b7-02fd-4e8b-4f9ac40083de.png)


**solarized_light.css**
![solarized_light.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/11856483-1203-a3ab-42cb-b6a11f4e9cff.png)


**tomorrow.css**
![tomorrow.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/3e4816ed-8474-8d7b-2e55-dd767ba9d471.png)


**vs.css**
![vs.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/83fb4399-72c2-4abd-1093-d88e70c4c9c0.png)


**xcode.css**
![xcode.css.png](https://qiita-image-store.s3.amazonaws.com/0/62802/9be63728-904f-c50b-8e4a-1861f4aee556.png)



##言語の設定

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

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

 
終わり