こんにちは、mickです。
プログラマ系SEとしてIT企業で11年勤務。
このブログサイトは、WordPressを使っていてベースのテーマはCocoonです（2020/07/14現在）。
ブログ上でソースコードを掲載するときはPRE要素とCODE要素を使うのが一般的です。これを利用してWordPressテーマやプラグインが機能してソースコード部分に色がつきます。ハイライトといいます。
このハイライトの機能を使おうとしたら思うように動作しなくて色々と調べました。
ここでは解決までのことを紹介します。
高速化のプラグインAutoptimizeがソースコードのハイライトのためのJavaScriptを最適化していたのが原因でした。
ソースコードのハイライトが機能しない
まずは何に困っているかを明確にしておきます。
こうなって欲しい
画像にあるように、ソースコードの部分はハイライト表示、色が付いて欲しいんです。
困っていること
ソースコードのハイライトの機能がうまくいっていないと、画像のようにソースコードに色が付きません。
すぐに思いつくことを試してみる
とりあえず手を動かすために、思いつくことを試していきます。
Cocoonでコードのハイライトの使い方を確認
まずはCocoonのマニュアルを確認します。
ここでCocoonが「highlight.js」を使っていることがわかります。
WordPress＞Cocoon設定＞コード＞ハイライト表示
ここにある「ソースコードをハイライト表示」がONになっていることを確認。
それでもソースコードのハイライトは機能していません。
Googleで検索
次にGoogleで同じことが起こってないか探してみます。
WordPressを使っていること、Cocoonを使っていることがキーになります
検索ワードの例「cocoon ソースコード ハイライト 効かない」
「function.php」を編集する記事が目にとまり、試します。
それでもコードのハイライトは機能していません。
少し時間を空けると閃きが降りてくる
ここで少し時間を空けます。
ハマっていると感じた場合は、少し手を止めた方が経験上よいことを知っています。
どこかホッとした瞬間に閃きが降りてきます
トイレとか、コーヒーの香りを感じるとか、お風呂とかリラックスした瞬間に解決のヒントが降りてくることってあると思います。
今回もそうでした。
高速化プラグインが原因かもしれない
ということで調べてみます。
【閃き】高速化プラグインAutoptimizeを疑う
WordPressの高速化プラグインにはAutoptimizeを導入しています。
そこでJavaScriptに関する設定をしたのを思い出しました。
ソースコードのハイライトのためのJavaScriptを除外
高速化プラグインAutoptimizeが、コードのハイライトのためのJavaScriptを最適化から無視するような設定を行います。
Autoptimize設定＞JS、CSS＆HTML＞JavaScriptオプション＞Autoptimizeからスクリプトを除外:
ここにコードのハイライトのためのJavaScriptを除外するようにします。
Cocoonでは、「highlight.js」を使っているため次のように追加します。
wp-content/themes/cocoon-master/plugins/highlight-js/highlight.all.min.js, wp-content/themes/cocoon-master/plugins/highlight-js/highlight.min.js
「変更を保存してキャッシュを削除」し、さらに「Autoptimizeのキャッシュを削除」を行って完了。
これでうまくいきました。
まとめ。ハマったら休憩をはさむ
今回は、高速化プラグインAutoptimizeがコードのハイライトのJavaScriptを妨害していることが原因でした。
うまくいかないことは、いきなり解決できれば楽なんです。
けれど、紹介したようにそうもいかない場合が多いですあります。
ハマったら休憩をはさんでみる
あれこれ悩んで時間を使うより、休憩に時間を使う方が早いと思いますよ。
以上、みなさまの助けなれば幸いです。
初稿 2020/07/14
