【Highlighting Code Block】行数が表示されないときの対処方法

コード表示のプラグインで「Highlighting Code Block」を利用していますが行数が表示されない状態が続いていました。

「コードを表示するためのプラグインなのに、行数が表示されないことなんかあるのか？」と思い、調べてみたところデフォルトでは表示されるものだそうです。

なぜ表示されないのか、そして表示させるための対処方法についてまとめてみました。

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

なぜ行数が表示されないのか？

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

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

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

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

上記の解決方法は簡単で、[prism.js] を [JavaScript縮小化] の除外設定にするだけです。

除外設定を入れた状態で確認してみると以下のように行数が表示されました。

プラグイン「Highlighting Code Block」の行数が表示されない事象については以下の通りでした。

●原因

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

●対応策

　　[prism.js] を [JavaScript縮小化] の除外設定にする

私の場合、「Highlighting Code Block」を最初に入れた時点では[JavaScript縮小化] が有効化されている状態だったので、
最初から行数が表示されておらず、「行数は表示されないプラグインなんだな」と特に気にせず利用していました。

しかし、改めて考えてみた時に「コードを表示するためのプラグインなのに、行数が表示されないことなんかあるのか？」と思ったことがきっかけで調べてみたところ、
ちゃんと行数も表示できるようなプラグインであることが分かり、修正することもできました。

プラグインの設定もテーマの設定と合わせて考えていくことが必要だと気付かされた事象でした。