highlight.js を Web Workers で使う

1. 目的

highlight.js を Web Workers を使って適用したい。
- このページに適用する。
How to use highlight.js にやり方が載っている。

2. Web Workers を使った場合

2-1. 表示サンプル

1つ目のコード (HTML)

<body>
  <p>Hello, World!</p>
</body>

2つ目のコード (CSS)

body {
  margin: 10px auto;
  padding: 0;
}

3つ目のコード (JavaScript)

const a = 'Hello, World';
function foo() {
  console.log(a);
}

4つ目のコード (Shell)

$ pip install --user {パッケージ名}
$ sudo cp -p /etc/apt/sources.list ~/tmp/sources.list.backup

5つ目のコード (PowerShell)

PS> systeminfo | Select-String "2019"

2-2. JavaScript コード

How to use highlight.js に載っているコードに変更を加えた。

複数の <pre><code> があった場合に対応させた。
<code> 要素に hljs クラスを追加し、背景色を表示させた。

addEventListener('load', function() {
  const codes = document.querySelectorAll('pre code');
  codes.forEach((code) => {
    // nohighlight クラスが指定された要素は対象外とする
    if (code.classList.contains('nohighlight')) return;
    // これがないと背景色がつかない！！
    code.classList.add('hljs');

    const worker = new Worker('worker.js');
    worker.onmessage = (event) => { code.innerHTML = event.data; }
    worker.postMessage(code.textContent);
  });
})

3. Web Workers を使わない場合

3-1. 表示サンプル

1つ目のコード (HTML)

<body>
  <p>Hello, World!</p>
</body>

2つ目のコード (CSS)

body {
  margin: 10px auto;
  padding: 0;
}

3つ目のコード (JavaScript)

const a = 'Hello, World';
function foo() {
  console.log(a);
}

4つ目のコード (Shell)

$ pip install --user {パッケージ名}
$ sudo cp -p /etc/apt/sources.list ~/tmp/sources.list.backup

5つ目のコード (PowerShell)

PS> systeminfo | Select-String "2019"

4. ハイライトがおかしくなることがあった

$ pip install --user {パッケージ名}

上記のコードをハイライトすると、'--' 以降がコメント扱いになって暗い色にハイライトされてしまう現象が起きた。

結論としては、読み込んでいた highlight.pack.js がおかしかった。
このファイルは、Getting highlight.js ページでカスタムしたファイルだった。
このときの v9.13.1 というバージョンに、バグがあったのではないか？
改めて生成し直したら、バージョンは v9.15.6 となり問題が起きなくなった。(2019-05-16)
やっぱり、それでもおかしい。Web Worker だとおかしい。

2021-03-12: バージョン 10.6 で再度試した。

今更分かったが、前からおかしかったのは通常の方法で利用した方だった。
そして通常の利用方法は相変わらずおかしい。Web Worker を使った方は問題ない。
しかも Web Worker 利用の方が、パフォーマンスが圧倒的によい。

5. メモ

How to use highlight.js に載っているコードはあくまで code 要素内に対するハイライト処理なので、code 要素自体にも hljs を適用するには自分でクラス名 'hljs' を追加する必要がある。そうしないと背景色が付かない。
new Worker('...') を new SharedWorker('...') にして再利用しても正常に動作しないようだ（あまり細かく見ていないが）。
<pre><code> の数だけ、new Worker('worker.js') と importScripts() が実行されるが、worker.js も importScripts() でインポートされたファイルも、ブラウザがキャッシュを再利用してくれるようだ。

6. 結論

~~ハイライトがおかしくなるので、Web Workers では使わないほうが良い。~~
ハイライトの動作、パフォーマンス、どちらかの面からも Web Workers を使ったほうが良い。(2021-03-12)

7. 参考

How to use highlight.js