Highlighting Code Blockの文字色が変わらないときの解決法

※WordPressでCocoonを使っている人向けの解決策です。

問題内容

このサイトではプログラムのコードを記載するとき、Highlighting Code Blockというプラグインを使用しています。

def index(View):

    context = {
        'hello': 'hello world',
    }
    return context

Highlighting Code Blockを使用すると、上のサンプルコードのように言語に合わせて分かりやすいように文字に色を付けたりしてくれるので、とても重宝しています。

しかし、先日このサイトの設定をいじっていたところ、文字色が変わらないという問題が発生しました。

その時の解決方法を紹介します。

Highlighting Code Blockの文字色が変わらないのは高速化が原因

結論から言いますと、このサイトの高速化対策が原因でした。

高速化とは、このサイトにアクセスしてもらった時、なるべく早くページを開けるようにするものです。

WordPressの管理画面で「Cocoon 設定」→「高速化」→「JavaScriptsの縮小化する」
という項目をチェックしたのが原因でした。

Highlighting Code Blockはprism.jsというJavaScriptsを使用しているため、JavaScriptsの縮小化によって文字色の変更が適用されなくなってしまったということだと思います。

Highlighting Code Blockを使用する人は、「JavaScriptsの縮小化する」の項目のチェックを外しましょう。

まとめ

Highlighting Code Blockの文字色が反映されない問題の解決方法でしたがいかがだったでしょうか。

Cocoonを使用している人も多いと思いますので、誰かの助けになれたらうれしいです。