cocoonでHCBのスタイルが表示されない問題の解決方法
概要
WordPressで技術系のネタのブログを書いていると、ソースコードをハイライトしたくなります。
私は、シンタックスハイライトとして、Highlighting Code BlockというWordPressのプラグインを利用しているのですが、同時に利用しているcocoonというテーマとの相性のせいか、ハイライトされないという問題に遭遇しました。
ここでは、Highlighting Code Block(HCB)のハイライトがうまくいかない問題を解決した方法を紹介します。
遭遇した問題
Highlighting Code Block(HCB)というプラグインは、WordPressのGutenbergにも対応したシンタックスハイライトのプラグインです。プラグインを有効にして、HCBのブロックを追加することで記述したコードをシンタックスハイライトできます。
しかし、私の環境ではHCBのブロックをGutenbergで使うことは出来るのですが、記事のプレビューでハイライトがされないという問題に遭遇してしまいました。
この問題は、利用しているWordPressのテーマであるcocoonから、別のテーマに切り替えると正常に動作するため、cocoonの設定が悪さしている可能性が高いと思い、色々と調査をしました。
解決方法
問題を調査していると、cocoonの高速化の設定で「JavaScriptを縮小化する」のチェックを外すことで、正常にHCBのスタイルが適用されるようになりました。HCBでは、prism.jsというものを使ってハイライトを行っているため、JavaScriptの設定が悪さをしているというのは納得がいきます。
解決方法として、チェックを外すと言うことでもいいのですが、そもそもJavaScriptを縮小化するのは、サーバーから送信するデータを少なくするために行う処理です。送信するデータが少なければ、ページの表示が速くなるなど、メリットがあり設定をきるというのはあまりやりたくありません。
そこで、HCBが利用しているprism.jsを縮小化の設定から外すことにしました。
prism.jsを縮小化から外すには、cocoonの高速化の設定から「JavaScript縮小化」のところにprism.jsと記入して保存をします。
これで、問題は解決しました。
さいごに
WordPressはプラグインなどを利用することで便利になるのですが、今回のように相性の問題が出てくることもかなりあります。
同じような問題を抱える人の参考になれば嬉しいです。