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

スポンサーリンク
スポンサーリンク

こんにちは!悠です!

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

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

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

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

【Cocoon】ブログカードにマウスオーバーした時に影を付ける方法【コピペでOK】
WordPressのテーマ『Cocoon』で、内部リンクや外部リンクを表示するブログカードにマウスオーバー時、影を付ける方法をご紹介しています!

 

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

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

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

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

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

をご紹介いたします!

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

 

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

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

 

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

 

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

 

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

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

 

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

 

対処法1:AutoptimizeのJavaScript最適化をオフにする

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

 

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

 

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

 

設定は以上となります。

 

対処法2:Cocoonの高速化設定にコードを追加する

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

 

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

 

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

prism.js

 

設定は以上となります。

 

まとめ

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

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

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

 

プログラムの勉強に活用した参考書

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

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

コメント

タイトルとURLをコピーしました