Narito Blog

highlight.jsを使う

- JavaScriptライブラリ

概要

HTML内にソースコードを書く機会は多いです。<pre><code>といったタグを利用しますが、そのままでは見た目的にカッコよくはありません。

また、プログラムであればその言語用にハイライトを行いたいと思うことでしょう。

highlight.jsを使えば、カッコよくハイライトされます。マークダウンとの相性も良いので、ブログの記事をマークダウンで書いている場合には特におすすめです。

私のブログで現在使っているのも、このhighlight.jsです。

使い方

HTMLのソースコードに3行追加するだけです(バージョンはどんどん上がっていくので、最新のバージョンを使う場合は調べてみましょう)。

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

ハイライトしたいソースコード部分を、以下のように囲みます。<pre><code>ソースコード</code></pre>という形ですね。

<pre>
  <code>import sys</code>
</pre>

私のブログは導入済みなので、見た目がどうなるかは↑のソースコード例などをご覧ください。

言語の指定

どの言語かを自動で判断してくれますが、こちら側から「この言語用にハイライトしろ」と指示することもできます。以下のコードはPythonコードとしてハイライトされます。classに指定するだけですね。

<pre>
  <code class="python">import sys</code>
</pre>

マークダウンで使う場合

マークダウンでコードブロックを表現する場合は、html直書きではなく専用の構文を使うのが一般的です。バッククォート3つで、そこがコードブロックと判断されます。

HTMLに出力する場合は<code><pre>...</pre></code>に囲まれます。つまり、マークダウンで以下のように書くと...

```
import sys
```

以下のように変換されるということです。

<pre>
  <code>import sys</code>
</pre>

更に、マークダウンをHTMLに変換するサービス・ライブラリの多くでは、マークダウンのコードブロックで言語を指定することもできます。以下のように書くと...

```python
import sys
```

以下のように変換されます。highlight.jsでそのまま使える状態ですね。

<pre>
  <code class="python">import sys</code>
</pre>

JavaScriptでコードを追加した場合

JavaScriptから<pre><code>といったHTMLが追加される場合があります。この場合、追加された部分は自分でハイライトし直す必要があります。

例えば次のようにすると、全てのpre codeをハイライトしなおします。

for (const block of document.querySelectorAll('pre code')) {
    hljs.highlightBlock(block);
}

このJavaScriptからコードが追加されるケースの具体的な例は、新規作成・編集ページなんかがあって、そこにWYSIWYG等のエディタがあり、プレビュー欄内のコードをハイライトしたいといったケースです。

上のコードにもう少し手を加えて、テキストエリア内を変更したらコードをハイライトしなおす、とかもできますね。

for (const textarea of document.getElementsByTagName('textarea')) {
    textarea.addEventListener('change', e => {
        for (const block of document.querySelectorAll('pre code')) {
            hljs.highlightBlock(block);
        }
    });
}

テーマの指定

使い方ではdraculaというテーマにしましたが、他にもたくさんのテーマがあります。 公式サイトでデモを試せるので、そこで実際に様々なテーマを試すとよいでしょう。