みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ。記事本文の無断転載は禁止です。

はてなブログで Prism.js を使う

はてなブログシンタックスハイライトに JSX / TSX が対応してなかったり、
C# の async/await 当たりが永遠に真っ白だったりしてつらかったので、 Prism.js を導入しました。

導入方法は簡単で、こんなコードを設定の「 head に要素を追加」の部分に付け足して、

<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre.code').forEach((block) => {
    block.className = "code language-" + block.dataset.lang;

    window.Prism.highlightElement(block)
  });
});
</script>

あとはカスタム CSS の部分に Prism.js のテーマを入れるだけ、簡単。
ただし、 Prism.js のテーマは、 !important を付けておく必要があります。

ということでメモでした。
ちなみにこのブログで使ってる VSCode っぽいテーマは GitHub に置いています。