【Cocoon】ソースコードのハイライト表示ができないときの対処法2選

こんにちは！悠です！

最近、Cocoonのテーマを少しずつカスタマイズして、読者の方が見やすいサイト作りに勤しんでおります。

その中で役に立ったソースコードを記事で紹介するとき、Cocoonに最初からついているハイライト表示を使っています。

/*ブログカードにマウスオーバーした時に影を付ける*/
.blogcard-wrap:hover{
	box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}

※上のソースコードの内容に関しては別記事で取り上げています。

ところが、この前ソースコードのハイライト表示が上手くできないという問題に遭遇しました！

ハイライト表示を設定しても以下のようになってしまいます。

/*ブログカードにマウスオーバーした時に影を付ける*/
.blogcard-wrap:hover{
	box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}

調査していくうちに解決方法がわかったので、今回は、

『Cocoon』のソースコードのハイライト表示が上手くできないときの対処法

をご紹介いたします！

Cocoonでのソースコードのハイライト設定方法

そもそもCocoonでソースコードのハイライト表示なんてできるの？

上のように思う方もいらっしゃるかもしれませんので、最初に基本的なハイライト表示の設定方法をご紹介します。

WordPressの管理画面を開き、「Cocoon設定」を選択します。

「Cocoon設定」の中の「コード」を選択し、ソースコード設定内の「ソースコードをハイライト表示」にチェックを入れます。

これだけで設定は完了です！

<pre></pre>のタグで囲ったソースコードがハイライト表示されるようになります。

この設定だけでハイライト表示ができればそれでいいんですが、上手くいかなかった場合は次の対処法を試してみてください。

自分のサイトを軽量化・最適化してくれるプラグイン『Autoptimize』を導入している方は、「JavaScriptコードの最適化」をオフにすることでソースコードがハイライト表示されるようになります。

WordPress管理画面上部に表示されている「Autoptimize」をクリックします。

Autoptimize設定の中にあるJavaScriptオプションから、「JavaScriptコードの最適化」のチェックを外します。

設定は以上となります。

『Cocoon』にデフォルトで備わっている高速化設定を使っている方は、JavaScript縮小化の欄にコードを追加することでソースコードがハイライト表示されるようになります。

WordPressの管理画面を開き、「Cocoon設定」→「高速化」を選択します。

サイトの高速化設定の中にある、「JavaScript縮小化」の欄に以下のコードを入力します。

prism.js

設定は以上となります。

WordPressのテーマ『Cocoon』で、ソースコードのハイライト表示ができないときの対処法を2つご紹介いたしました。

他にもソースコードのハイライト専用のプラグインを入れる方法もありますが、プラグインの入れ過ぎはサイトを重くする可能性があるので、できるだけデフォルトで備わっている機能を活用した方がいいと思います。

では、ここまで読んでいただきありがとうございました！

私がHTML、CSS、JavaScriptの基本的な仕組みを勉強するのに活用した参考書です。

どちらも初心者でもわかりやすい簡単な表現で書かれていて、コーディングの例題も豊富なので、これからプログラムの勉強を始めてみたい方におすすめです(*´▽｀*)