WordPress に highlight.js を読み込んでコード表示にシンタックスハイライトを適用する

ブログにコードを載せるとき、シンタックスハイライトで読みやすくしたいと思って、highlight.js を導入したときの作業内容になります。

highlight.js を選んだ理由

prism.js も有名で使い勝手もよさそうでしたが、highlight.js はアップデートが定期的に行われているようなので、ひとまずこちらを選びました。（※ ちなみにprism.js は2022年8月からアップデートが止まっていましたが、2025年3月にアップデートがありました）

WordPressに読み込む手順

リソースファイルを確認する

highlight.js 公式 のヘッダメニューにある「Usage」（使用方法）をクリックします。

「Usage」にある「As HTML Tags」の項目に移動すると、HTMLタグが記載されているので読み込むファイルを確認します。種類が4つタブになって紹介されてますが Cloudflare の cdnjs を選びました。

go.min.js は言語を追加するファイルで自分は使用しないため、必要なファイルは css と js の次の2ファイルのみ。

• default.min.css
• highlight.min.js

WordPressに読み込むのは、下記のHTMLタグ部分になります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

functions.php に add_action で読み込む

前述のリソースファイルをWordPress に読み込むために、 functions.php にadd_actionを使った以下のコードを挿入します。

function add_highlightjs() {

// スタイルを読み込む
wp_enqueue_style('highlightjs-style', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css');
  
// スクリプトを読み込む
wp_enqueue_script('highlightjs-script', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js', array(), null, true);

// highlight.js を初期化する
wp_add_inline_script('highlightjs-script', 'hljs.highlightAll();');

}
add_action('wp_enqueue_scripts', 'add_highlightjs');

読み込むページを限定する

コード表示はブログトップやアーカイブページなどで使用することはないので、投稿・固定ページに限定します。そのために以下の分岐をadd_actionに追加しました。

if( !is_single() && !is_page() ) {
  return;
}

以上を合わせて、add_actionの内容は下記のようになりました。

function add_highlightjs() {

// 投稿・固定ページではない場合は処理を終了
if( !is_single() && !is_page() ) {
  return;
}

// スタイルを読み込む
wp_enqueue_style('highlightjs-style', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css');
  
// スクリプトを読み込む
wp_enqueue_script('highlightjs-script', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js', array(), null, true);

// highlight.js を初期化する
wp_add_inline_script('highlightjs-script', 'hljs.highlightAll();');

}
add_action('wp_enqueue_scripts', 'add_highlightjs');

テーマを選ぶ

これで highlight.js が WordPress に読み込むようになりました。今度は配色が default.min.css のままだとシンプル過ぎるため、テーマを変更します。

配色を確認する

公式の Demo ページでハイライトの配色を試すことができるので、普段つかっているエディタソフトに合わせるとよいかもしれませんね。やり方は左カラムに設定（矢印）をすると、右側のエリアに選択したテーマのハイライトが付いたコードが出力されます。

1. Language：表示する言語を選ぶ。（auto）を選択していればだいたい自動検出されると思います。
2. Theme：ハイライトのテーマを選ぶ。
3. Code：テキストエリア にサンプル表示するコードを貼り付ける。

Share ボタンを押すと、上記で設定した内容が Demo ページのURLに反映されます。

選んだテーマを設定する

テーマの名前をCSSのファイル名にそれっぽく差し替えれば反映されると思います。ざっくりしてますがこんな感じで。

default.min.css → atom-one-dark.min.css

もしうまくいかなかった場合は、cdnjs にある highlight.js のライブラリ を開きます。

テーマの名前でページ検索をして、テーマのURLを見つけ出しましょう。

右端の鎖のアイコンをクリックすると、テーマURLをコピーできるので、default.min.css のURLと差し替えれば反映されると思います。