WordPress に highlight.js を設置して、ソースコードをシンタックスハイライトさせる方法

highlight.js は、記事の中のソースコードをシンタックスハイライトして表示できるライブラリです。
highlight.js の良い所はソースコードの言語を自動判別して良い感じにカラーリングしてくれる点です。

以下、WordPress に highlight.js を設置する手順です。

子テーマの function.php に追記

子テーマの function.php に以下の記述を追加。
highlight.js の CSS と JavaScript を読み込みます。

function add_link_files() {
    // 管理画面以外の時に読み込む
    if ( !is_admin() ) {
        // highlight.js の CSS, JS を読み込む
        wp_enqueue_style( 'style_highlight', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/monokai-sublime.min.css', array(), null, 'all');
        wp_enqueue_script('highlight.js', '//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js', [], '11.3.1', true );
    }
}
add_action('wp_enqueue_scripts', 'add_link_files');

JavaScript ファイルに追記

ページ読み込み時に実行される JavasScript ファイルに以下を記述する。

// highlight.js をロード
hljs.initHighlightingOnLoad();

CSS に追記

CSS に以下の記述を追加する。
こちらは見た目の調整なのでお好みで。。。

/* highlight.js のスタイルを上書き */
pre code {
    border-radius: 6px;
    padding: 2em !important;
}

JavaScript の読み込み順を変える

サーバーやテーマで JavaScript の読み込み順を最適化するような機能があると、highlight.js がうまく動かない場合があったのでオフにしました。

具体的には、下記の設定をしました。

1. XSERVER の管理画面で「XPageSpeed 設定」で「JavaScript 遅延読み込み」をオフにしました。
2. Snow Monkey の「カスタマイズ」→「ページ速度最適化」→「jQuery の読み込みを最適化する」をオフにしました。

以上です。お役に立てば幸いッ！