WordPressのコアブロックにあるコードブロックのデフォルト表示はこのように、とてもシンプルです。

シンプルすぎて、文章との境目がなくコード用のコメントなのか判別がつきにくいです。

これも、WordPress専用プラグインではなく、「highlight.js」というjQueryプラグインでハイライトすることにしました。

理由としては以下が挙げられます。

• コアブロックのコードブロックで記述すれば、そのままハイライトされる
• プラグイン用のブロックが増えずに済む
• 無料テーマで有名な「Cocoon」（https://wp-cocoon.com/highlight-js/）でも採用されているので調べやすい

プラグインファイルをダウンロード

https://highlightjs.org から使用言語にチェックしダウンロードします。

私はCommon枠からcss、javascript、json、markdown、php、scssを選びました。
不要な言語を削った分、ファイルサイズを軽減することができます。

ダウンロードしたフォルダを解凍し、「highlight.min.js」と、stylesフォルダ内から好みのCSSを選択します。
私は「atom-one-dark.min.css」にしました。

ファイルを読み込む

開発環境に合わせて、「highlight.min.js」と「atom-one-dark.min.css」を配置します。

私は、投稿ページのみ読み込むようにしました。

wp-content/themes/mytemplate/functions.php

/**
 * CSS,JSを読み込ませる
 */
function mytemplate_enqueue_scripts() {
　　省略…
    // 投稿ページのみ
    if (is_single()) {
　　　　省略…
        // Highlight.jsの読み込み
        wp_enqueue_style('style_highlight', get_template_directory_uri() . '/assets/css/lib/atom-one-dark.min.css', array(), null, 'all');
        wp_enqueue_script('js_highlight', get_template_directory_uri() . '/assets/js/lib/highlight.min.js', array(), null, true);
    }

    // トップページのみ
    if (is_home()) {
　　　　省略…
    }
}
add_action('wp_enqueue_scripts', 'mytemplate_enqueue_scripts');


/**
 * DOMが完全に生成された後にhljs.highlightAll();を実行
 */
function highlight_js_init() {
    // 投稿ページのみ
    if (is_single()) {
        // Call highlightAll on page load
        echo '<script>document.addEventListener("DOMContentLoaded", function() { hljs.highlightAll(); });</script>';
    }
}
add_action('wp_footer', 'highlight_js_init');

highlight.jsは、ver10.6以降を使う場合は「initHighlightingOnLoad()」ではなく「highlightAll()」になりました。

これで、コアのコードブロックにソースを入力したら、フロント側（公開ページ）ではハイライトが反映されるようになりました。