ほぼほぼ完成です。

ハイライト表示 prism.js

Cocoonでは「Cocoon設定>コード」で、ハイライト表示:ソースコードをハイライト で簡易ハイライトしてくれます。
ただ、個人的に「prism.js」を使いたいので設定しました。

ダウンロード

functions.php

下図のように子テーマの[functions.php]の黄色枠の冒頭部分のすぐ下にマーカー部分を追加します。

add_action( 'wp_enqueue_scripts', 'prism_js' );
function prism_js() {
    wp_enqueue_style( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.css', array(), null, 'all');
    wp_enqueue_script( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.js', array(), false, false );
}

 

記述例

<pre><code class="language-php" data-language="php">
ここにコードを書く
</code></pre>

 

エスケープツールで変換

HTML(PHP)タグのままでは使えないのでタグを変換します。ツールはオンラインで使用するのでブックマークしておきます。

ツールの変換前枠にコードを入力して変換をクリックすると、変換後枠に変換されたタグが生成されるのでコピーします。

 
エディターにペーストしてみました。
水色マーカー部分を図のように差し替えるだけでOKです。
わたしは、ユーザー辞書に『こーーど』で登録しています。HTMLやCSSの場合は、『php』の部分を『html』『css』に書き換えるだけです。

 
行数やハイライト表示もできますが、長い文書だと表示が崩れてしまうのでわたしは使っていません。