今回はブログにコードを載せる際にハイライトしてくれるhighlight.jsを導入していきます。

当ブログはWordPressのブロックエディタで編集してます。WordPressのコードブロックは以下のように<pre><code></code></pre>をHTMLとして返します。

<pre class="wp-block-code">

<code>

<!-- ここに記述したソースコードがそのまま出力される (例: <div>Hello</div> のようなタグもそのまま表示される) -->

</code>

</pre>

highlight.jsはDOM内の<pre><code></code></pre>を自動で検出してくれるので、WordPressのブロックエディタと相性いいなーと思った(ほかのライブラリもそうなのかも)。

npm install highlight.jsでnodeで動きます。以下のようにインポートする。highlightAll()を使うと、上記の自動検出機能が発動します。

import hljs from "highlight.js";
//今回はatom-one-darkというパレットを指定
import "highlight.js/styles/atom-one-dark.css";

useEffect(() => {
        hljs.highlightAll();
    }, [content]);

nodeで動くのもSSR的にいいし、ブロックエディタとの相性もいいからよかった。 色味のない当ブログが若干明るくなってよかった。

参考リンク

hightlight.js https://highlightjs.org/

参考にさせていただいた記事

https://qiita.com/tadnakam/items/99088d78512a20e75ff3

highlight.js を使うとたった３行でソースコードを別次元なぐらい見やすくできるよ