highlight.js を Web Workers で使う

1. 目的

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 に載っているコードに変更を加えた。

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 {パッケージ名}
正常
おかしい?

5. メモ

6. 結論

7. 参考