実装
highlight.jsを追加する。今回はES6以上で書きます。
さらに初歩的なところを知りたい方はこちらのブログを読んでください。
// npmモジュール追加
yarn add highlight.js
今回はコードハイライトを使用する機会が記事のページでしか使わないため、Util的なものは実装せずに直接該当のReact Componentに突っ込む。
useEffectがわからない方はこちらを確認してください。
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';
hljs.registerLanguage('javascript', javascript);
const ArticleComponent = () => {
useEffect(() => {
hljs.initHighlighting();
});
return <Article />;
}
ここではhljs.initHighlighting()を使うようにしてください。
hljs.initHighlightingOnLoad()の実態はDOMContentLoaded時にinitHighlighting()を呼び出すようにaddEventListenerするだけのものです。
しかし、おそらくReactの仕組み上、要素がアクセス可能になるタイミング、いわゆるマウント済みになるタイミング（componentDidMount）とDOMContentLoadedのタイミングが同じではないため、リスナーがあってもハイライト処理がReactのマウント時より前に走ってしまうようです。
なので、呼び出す際は上記のようにReactのマウント時にinitHighlightingを実行するようにします。
するとこんな感じでハイライトしてくれます。何となくよくあるハイライトだと思ったのでatom-one-dark.cssを選んでます。こちらの例のスタイルがそれになります。
また、今回の実装だと初回時のみにハイライトをしてくれますが、初回以降上記のコードだとハイライトしてくれなくなります。これはhighlight.jsのインスタンスが初期化以降は処理を走らせないようにフラグを用いてテキストのパース処理をスキップしているためです。
今回は初回以降もパースしてもらわないといけない要件なのでフラグを折りに行きます。
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import 'highlight.js/styles/atom-one-dark.css';
hljs.registerLanguage('javascript', javascript);
const ArticleComponent = () => {
useEffect(() => {
hljs.initHighlighting();
// React環境だと初回以降ハイライト処理が入らないため外部からフラグをfalseに
hljs.initHighlighting.called = false;
});
return <Article />;
}
こんな感じに実装すると初回以降もハイライトしてくれるようになります。
アウトローな実装になりましたが、今回はこんなところで問題なく動いているので開発を終了しました。