同じページ内でハイライトするコードとハイライトしない成形済みテキストを表示する(cocoon)

やりたいこと

cocoonのページ内でコードのハイライトをオンにすると、コード以外の成形済みテキストもハイライトされてします。成形済みテキストはハイライトしたくない。

このサイトでは、フォルダ構成を成形済みテキストとして表示したかったが色がついて変なことになった。

ROOT
|   dice.glb
|   index.html
|
\---js
    +---libs
    |       3d.js
    |       GLTFLoader.js
    |       three.module.js
    |
    \---utils
            BufferGeometryUtils.js

こんな感じ。

Cocoon設定で変更

ソースコードをハイライトする

まずはソースコードのハイライトする設定をします。

WordPressの管理画面から”Cocoon設定”　→　”コード”タブ　→　”ソースコードをハイライト表示”にチェックを入れて”変更をまとめて保存”をクリックします。

この設定でコードはハイライトされるようになりますが、コード以外の成形済みのテキストや詩もハイライトされるようになってしまいます。

もう少し踏み込むとすべてのpreタグのコンテンツがハイライトされるようです。

ハイライト対象を絞る

上の問題を解決するためにハイライトの対象を絞る設定を行います。

上と同じ”Cocoon設定”　→　”コード”タブ　ページの下部”ハイライト表示するCSSセレクタ”を以下のように変更します。

.entry-content pre.wp-block-code

メモ（初期値）

.entry-content pre

記事の作成

設定は上記で完了しましたので、記事を作成します。

コードを表示する場合はブロックを使用して記入します。

コード以外を表示する場合はブロックを使用して記入します。

結果

ブロックは以下のようにハイライトされます。

for (int i = 0 i < 10 ; i++)

ブロックは以下のようにハイライトされません。

for (int i = 0 i < 10 ; i++)

上のように背景色などもハイライトされるコードと異なります。変更したい場合は、”wp-block-preformatted”クラスにスタイルを設定することで変更することができます。