なつねこメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ﾉ

2019/09/17

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

カテゴリー：

JavaScript

はてなブログのシンタックスハイライトに 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 に置いています。