HighlightingCodeBlockで行数やハイライトが表示されないときの対処方法

コード表示のプラグインで「Highlighting Code Block」を利用していますが行数やハイライトが表示されない事象が発生していましたが解決できたので原因と対処方法についてまとめてみました。

なお、wordpressのテーマは [Cocoon] を利用していますので、その他のテーマを利用している場合で同じ事象が出ているときには参考としてみていただけると幸いです。

行数やハイライトが表示されない事象

[JavaScript縮小化] が有効化されている状態では、以下のように「Highlighting Code Block」で行数やハイライトが表示されない状態となっています。

原因は、Cocoon設定の「高速化」の設定で [JavaScript縮小化] が有効化されているためでした。

「高速化の設定はしておいたほうがいい」という記事はたくさんあるので、私も「高速化」の設定を入れていました。

「Highlighting Code Block」における行数やハイライトの表示は「prism.js」というJavaScriptファイルを利用しています。
そのため、[JavaScript縮小化] が有効化されていると一部のファイルが正常に読み込まれずに行数が表示されません。

prism.jsを [JavaScript縮小化] の除外設定に追加することで解決することができます。