2026年8月21日

WordPressのテーマにPrism.jsを組み込んでシンタックスハイライトを実装する方法

テーマ・デザイン

Prism.js は、ページ内のコードに色分け（シンタックスハイライト）を付ける軽量な JavaScript ライブラリです。WordPress では、必要な言語だけを選んでダウンロードしたファイルを子テーマに置き、コードブロックのある記事でだけ読み込む形にすると、余計な読み込みを増やさずに導入できます。この記事では、ファイルの用意、テーマへの読み込み、標準の「コード」ブロックとの合わせ方、テーマのCSSとの衝突の直し方までを順に説明します。

プラグインを使わず、テーマ側で管理したい人を想定しています。プラグインで済ませたい場合の選択肢も最後に触れます。

Prism.js の仕組みを先に押さえる

Prism.js は、ページの読み込み後に language-xxx というクラスを持つコード要素を探し、中のテキストを解析して色付け用の span で包み直します。色そのものはCSSのテーマファイルで決まります。つまり、導入に必要なのは次の3つです。

必要な言語を含んだ prism.js
配色を決める prism.css
コード要素に付ける言語のクラス（language-php、language-css など）

言語のクラスはコード要素そのものか、その親要素のどちらに付けても認識されます。この性質が、WordPressの「コード」ブロックと組み合わせるときに役立ちます。

ファイルを用意する

公式サイトのダウンロードページでは、配色テーマ・言語・プラグイン（拡張機能）を選んで、1つの prism.js と prism.css にまとめて取得できます。言語を全部選ぶとファイルが大きくなるため、自分のブログで実際に載せる言語に絞ります。WordPress の記事なら、Markup（HTML）、CSS、JavaScript、PHP、Bash、JSON あたりが中心になるでしょう。

ダウンロードしたファイルは、子テーマの中に置きます。

wp-content/themes/my-child-theme/
├── functions.php
├── style.css
└── assets/
    └── prism/
        ├── prism.js
        └── prism.css

親テーマに直接置くと、テーマの更新で消えます。子テーマがまだなければ先に作成し、作業前にテーマファイルのバックアップを取っておきます。

CDN から読み込む方法もありますが、外部サーバーへの依存が増え、利用者の閲覧情報が第三者に送られる点も考える必要があります。ファイルを自分のサーバーに置くほうが、表示の安定性とプライバシーの両面で扱いやすくなります。Prism.js は 1.x 系が長く使われているライブラリで（2026年10月現在）、セキュリティ修正を含む更新が出ることがあるため、導入後もときどき新しい版を確かめてください。

テーマに読み込む

子テーマの functions.php に、次のコードを追加します。コードブロックを含む記事・固定ページでだけ読み込むようにしているのがポイントです。

<?php
add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_singular() || ! has_block( 'core/code', get_queried_object_id() ) ) {
        return;
    }

    $dir = get_stylesheet_directory() . '/assets/prism/';
    $uri = get_stylesheet_directory_uri() . '/assets/prism/';

    wp_enqueue_style(
        'prism',
        $uri . 'prism.css',
        array(),
        filemtime( $dir . 'prism.css' )
    );

    wp_enqueue_script(
        'prism',
        $uri . 'prism.js',
        array(),
        filemtime( $dir . 'prism.js' ),
        array(
            'in_footer' => true,
            'strategy'  => 'defer',
        )
    );
} );

has_block() は、記事の本文に指定したブロックが含まれているかを調べる関数です。これでコードのない記事では Prism.js を読み込まずに済みます。バージョン番号に filemtime() を使うと、ファイルを差し替えたときにブラウザのキャッシュが自動で更新されます。

wp_enqueue_script() の5番目の引数に配列で strategy を渡す書き方は、WordPress 6.3 で加わりました。defer にすると、HTMLの解析を止めずにスクリプトを読み込めます。Prism.js は読み込み後に自動でページ内のコードを処理するため、defer でも動きます。

ウィジェットやテーマのテンプレートに直接書いたコードにも色を付けたい場合は、has_block() の条件を外すか、条件を広げてください。

コードブロックに言語を指定する

WordPress 標準の「コード」ブロックは、<pre class="wp-block-code"><code>…</code></pre> という形で出力され、言語のクラスは付きません。そのため、そのままでは Prism.js が対象として認識しません。

いちばん手軽なのは、ブロックの設定サイドバーの「高度な設定」にある「追加CSSクラス」に language-php のように入力する方法です。このクラスは pre 要素に付きますが、先に触れたとおり Prism.js は親要素の言語クラスも見るため、中の code が色分けされます。行番号を出す拡張機能を入れている場合は、同じ欄に line-numbers も並べて書きます。

書き終えたら記事を公開またはプレビューし、ブラウザの開発者ツールでコード部分を確認します。code 要素の中が <span class="token keyword"> のような要素に分かれていれば、Prism.js が処理しています。分かれていない場合は、次を順に確かめます。

ページのHTMLに prism.js が読み込まれているか（has_block() の条件で外れていないか）
言語のクラス名の綴りが、ダウンロード時に選んだ言語と合っているか
ブラウザのコンソールにエラーが出ていないか
最適化プラグインがスクリプトの結合や遅延実行をしていないか

4番目はよくある原因です。JavaScript を結合したり、ユーザー操作まで実行を遅らせたりする設定があると、Prism.js が想定どおりのタイミングで動かないことがあります。その場合は、最適化プラグインの除外設定に prism.js を加えます。

テーマのCSSとの衝突を直す

導入後に「背景色が二重になる」「余白や角丸がおかしい」「文字が小さすぎる」といった見た目の崩れが出ることがあります。テーマが .wp-block-code に独自の背景や枠線を付けていて、それが Prism.js のテーマと重なっているのが主な原因です。

調整用のCSSは、wp_add_inline_style() で Prism.js のスタイルの直後に追加すると、読み込み順で負けずに済みます。先ほどの wp_enqueue_style() の後に、次のように加えます。

wp_add_inline_style(
    'prism',
    'pre.wp-block-code[class*="language-"] {
        border: 0;
        border-radius: 6px;
        overflow-x: auto;
        font-size: 0.875rem;
        line-height: 1.6;
    }
    pre.wp-block-code[class*="language-"] > code {
        padding: 0;
        background: none;
        font-size: inherit;
    }'
);

言語クラスを pre に付けた場合、Prism.js の配色テーマは pre[class*="language-"] に背景や余白を指定します。上の例は、.wp-block-code と言語クラスの両方を条件にしてテーマ側の枠線などを打ち消しつつ、背景色と余白は Prism.js の配色テーマに任せる書き方です。テーマによって衝突する指定は違うため、開発者ツールでどのCSSが効いているかを見ながら調整します。

あわせて確かめたい点は次のとおりです。

長い行が横にはみ出してページ全体が横スクロールしないか（overflow-x: auto でコード部分だけをスクロールさせる）
スマホでの文字の大きさが読めるサイズか
背景色と文字色のコントラストが十分か。暗い配色テーマでは、コメント部分の色が薄すぎて読みにくいことがあります

色付けは表示後に行われますが、色が変わるだけならレイアウトのずれはほとんど起きません。行番号の数字はスクリプトが後から差し込みますが、左側の余白は line-numbers クラスに対するCSSで確保されるため、CSSを head で読み込んでいればずれは小さく済みます。

拡張機能を足すときの注意

ダウンロードページでは、行番号、コピー用ボタン、行の強調表示などの拡張機能も選べます。コピー用ボタンはツールバーの拡張機能を前提にしているため、両方を選ぶ必要があります。

言語ファイルを必要に応じて自動で読み込む拡張機能もありますが、言語ごとのファイルを別のフォルダに置いておく必要があり、ファイルの構成と読み込みの流れが複雑になります。使う言語が決まっているなら、最初から必要な言語をまとめて含めておくほうが単純です。

プラグインで済ませる場合

テーマを触らずに導入したいなら、コードブロックの色分けに対応したプラグインを使う方法もあります。例えば、Prism.js をもとにした国産の「Highlighting Code Block」や、別の解析エンジンを使う「Code Block Pro」などがあります。どちらもエディター上で言語を選べるため、クラス名を手で入力する手間がありません。機能や設定画面は版によって変わるので、導入前に配布ページの説明と更新状況を確認してください。

テーマで組み込んだ Prism.js とプラグインを同時に使うと、二重に処理されて表示が崩れます。どちらか一方に決めて運用します。

まとめ

Prism.js は language-xxx クラスの付いたコードを探して色付けし、配色はCSSで決まる
必要な言語だけを選んだファイルを子テーマに置き、has_block() でコードのある記事だけに読み込む
wp_enqueue_script() の strategy に defer を指定すると、表示を止めずに読み込める（WordPress 6.3 以降）
標準の「コード」ブロックでは、「追加CSSクラス」に language-php などを入れて言語を指定する
崩れたら、テーマの .wp-block-code のスタイルとの重なりと、最適化プラグインの結合・遅延設定を確かめる