【WordPress(Cocoon)】コードのハイライトが正しく色づけされない場合の設定方法

20230319-highlight-err-sumne
スポンサーリンク

どうも、あおです。

 

 

Cocoonでサンプルソース等を記事に追加して投稿する際、

ハイライトを設定した方が見やすいと思い、設定してみたところ、

以下のように変に色づけされます。

20230319-highlight-err-sumne

 

 

 

 

 

 

 

 

 

 

コメントとコメントじゃないところがぐちゃぐちゃ。

うん、わかりにくい。

 

 

 

 

本来は以下のように色づけしてほしいところ

20230319-highlight-err-1

 

 

 

 

 

 

 

 

 

 

 

色々試してみた結果、タグに少し追加するといけました。

 

 

始めのハイライト設定のところからの手順になります。

 

 

1. 左のメニューバーから「Coccon設定」→「コード」タブを押下

20230319-highlight-err-2

 

 

 

 

2. 以下のように設定

20230319-highlight-err-3

 

ハイライトスタイルは、リンクのdemoを参考に、好みの設定にしてください。

(私は背景色黒は見にくくて嫌いなので、背景色白のテーマにしています。)

 

行番号を表示したい場合は、チェックを入れます。

 

設定後、「変更をまとめて保存」をクリックして設定を反映します。

 

 

 

 

3. 投稿画面に戻り、「整形済みテキスト」を押下

 

コードを記載したい場所で、段落のドロップダウンから

「整形済みテキスト」を押下します。

20230319-highlight-err-4

 

 

 

 

 

 

 

 

 

 

 

 

 

4. 適当な文言をセットして「テキスト」タブ押下

 

追加されたフィールドに適当な文字をセットして、「テキスト」タブを押下します。

20230319-highlight-err-5

 

 

 

 

5. 追加した文言を消し、preタグの間に追加したいコードを貼付ける

 

先ほど追加した文言を消して、preタグの間に追加したいコードを貼付けます。

20230319-highlight-err-7

 

 

 

 

6. preタグの開始の方を「pre class=”vb”」に書き換える

 

preタグの開始の「pre」を「pre class=”vb”」に書き換えます。

※vbのところはコードの言語によって変える必要があります。

今回は言語がVB.NETなのでvbにしています。

20230319-highlight-err-8

 

 

 

 

7. 想定する色づけに設定される

 

プレビューで確認すると、想定する色づけになっていることが確認できます。

20230319-highlight-err-9

 

こんなことしなくても、設定で自動的に反映されればいいのになあと思うところ。

(めんどくさがりの思考)

でも、これでちゃんと見やすくなってくれました。