『Highlighting Code Block』行番号やハイライトが表示されないときの対処法【Cocoon】

WordPressのプラグイン『Highlighting Code Block』をインストールしたけどこんな症状で困っていませんか？

WordPressのテーマに「Cocoon」を使っていて『Highlighting Code Block』をインストールしたときに、上記のような問題が発生する場合があります。

この記事では「Cocoon」の環境下で『Highlighting Code Block』の行番号やハイライトが表示されないときの対処法をご紹介します。

『Highlighting Code Block』の行番号やハイライトが表示されない原因

『Highlighting Code Block』の行番号やハイライトが表示されないのはCocoonの「高速化」が原因になっている可能性があります。

Cocoonの高速化処理のひとつに「JavaScript縮小化」というものがあります。

JavaScript（jQuery）の余分な改行や余白を削除することによりソースコードのサイズを減らします。
Cocoonの解説より

JavaScriptのサイズを小さくすることで処理を高速化させるわけです。

『Highlighting Code Block』では「prism.js」というJavaScriptが利用されており、この「prism.js」がCocoonの「JavaScript縮小化」でうまく動作することができず、行番号やハイライトが表示されないという問題が発生しています。

対処法は簡単です。

Cocoonには「JavaScript縮小化」の対象から除外するJavaScriptを指定することができます。

この除外するJavaScriptに「prism.js」を指定すればいいわけです。

それでは指定方法をご説明します。

「JavaScript縮小化」除外の指定方法

１．WordPressの管理画面から「Cocoon 設定」をクリックし、さらにその下にある「高速化」をクリックします。

２．「縮小化」という項目の中に「JavaScript縮小化」があります。ここにあるテキストフィールドに「prism.js」と入力し、最下部にある「変更を保存」をクリックします。

これで行番号も表示され、指定した行のハイライト表示もできるようになると思います。

「Cocoon」の環境下で『Highlighting Code Block』の行番号やハイライトが表示されないときの対処法をご紹介しました。

原因

対処法