Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど

標準のコードブロックをprism.jsを使ってちょっと格好よくハイライト表示させる方法

公開日：2024(令和6)年1月7日／最終更新日：

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressで何かのコードを紹介するときに使う、「コード」ブロック。

背景色などは付けられるものの、ちょっとアレ（ダサい）じゃないですか？

本ページは、WordPressのコード表示をちょっとおしゃれに、より分かりやすく表示できる方法の紹介ページです。

．．．といってもイメージ湧かないかも知れないので、以下にサンプルを用意しました。

まずはTT3(Twenty Twenty-Three)テーマで何も設定せずにコードブロックを表示した場合。

function pwcn(){
  wp_enqueue_script(...);
}
add_action('wp_enqueue_scripts','pwcn');
<div class="">
<p>コード表示のサンプル</p>
<ul>
  <li>リスト表示のサンプル</li>
  <li>リスト表示のサンプル</li>
</ul>
</div>
.sample{
  background:#fff;
  color:#333;
  font-size:1rem;
}

これが今回のカスタマイズで以下のような表示に変わります。

function pwcn(){
  wp_enqueue_script(...);
}
add_action('wp_enqueue_scripts','sample');
<div class="">
<p>コード表示のサンプル</p>
<ul>
  <li>リスト表示のサンプル</li>
  <li>リスト表示のサンプル</li>
</ul>
</div>
.sample{
  background:#fff;
  color:#333;
  font-size:1rem;
}

タグなどに応じて文字色が付くようになり、行番号が左に表示されるようになり、マウスオーバー（ホーバー）時にコードのコピーボタンが表示されるようになり、グッとおしゃれになりますね（上のサンプルではもう少し何かしたくて、コードの種類ごとに左側のバーの色を変えています）。

この表現方法を「コードのハイライト表示」と言うのですが、「syntax highlight」などのキーワードでプラグインを探せば簡単に見つかるものの、余分な機能が多くて動作が重かったり、更新が止まって将来的に動かなくなってしまったりする懸念が残るので、プラグインを使わずにこの機能を実装できたら．．で実際に現在、このサイトでも実装している方法を公開しておきます。

上のサンプルでコード表示がおしゃれになっていれば、ご覧いただいている現在でもこのサイトで機能しているということですから、きちんと設置すれば貴サイトでもちゃんと機能するでしょう。

それでは始めましょう。

このページは、WordPress6.4.2、Twenty Twenty-Threeのフォークテーマで行った方法を紹介しています。バージョンやテーマによってはうまく動作しない可能性があります。

コードを使用する前に、ここをクリックして注意事項をご確認ください

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
  • 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）

機能実装の流れ

コードブロックの装飾機能を実装して使用するまでの流れ

以下が大まかな流れです。各項目をクリックすると、詳細説明までスクロールします。

  1. prism.jsとprism.cssを入手する
  2. 有効化しているテーマへファイルをアップロードする
  3. 有効化しているテーマでjsとCSSを読み込ませる
  4. コードブロックに必要な追加CSSクラスを付与してハイライト表示させる

コードブロックの見栄えをよくするための準備

prism.jsとprism.cssを入手する

prismの公式ページにあるprism.jsとprism.cssのダウンロードページからJSとCSSをダウンロードします。

このページにはたくさんのオプションがあり、選択したものによってURLが変化します。上のリンクからダウンロードページを開いた場合には、以下を選択したものになります（これを前提に以後説明を進めます）

  • JS、CSSとも開発用（未圧縮）のファイルをダウンロードする
  • Coyスタイルを選択
  • 標準のハイライト表示＋json用、PHP用の色使いを追加
  • ホーバー時にコピーボタンが表示され、クリックするとコード全体がコピーされる機能を追加
  • コードの行番号を付加する機能を追加

スタイルは後からサイトに合うようにすればいいので、テーマ系のCSSは不要かと思いますし、オプションを選択すればするほど読み込むファイルの容量が増えるので、必要最小限にするといいでしょう

上記のオプションでよければリンク先ページを開いたまま、または上記ページを開いた上で必要なオプションを選択しなおした後に、ページ末尾にある下図のようなボタンからダウンロードします。

prism.jsとprism.cssのダウンロード

読み込み速度という面では、JSもCSSもMinify(圧縮)で適用させた方がいいとは思いますが、ここではコードの中身がきちんと見えた方がいいと考えて両方とも開発版（未圧縮版）をダウンロードした前提で話を進めます。

圧縮版をダウンロードする場合は画面上部にある下図の場所で「Minified version」を選択してからダウンロードします。

ダウンロードボタンをクリックすると、zip形式の圧縮ファイルとしてパソコンへダウンロードされますので、ダウンロードが終わったら解凍しておきます。

有効化しているテーマへファイルをアップロードする

ダウンロードして解凍したフォルダの中にある「prism.js」と「prism.css」を、「prism」というフォルダにまとめ、パソコン上での構造は以下のようになるようにします。

  • 「prism」フォルダ
    • 「prism.css」ファイル
    • 「prism.js」ファイル

この状態のまま、「prism」フォルダを有効化しているテーマのフォルダ内へアップロードします。

アップロード後はテーマフォルダ内が以下のような形になるようにします。

  • 有効化しているテーマフォルダ
    • style.css
    • functions.php
    • 「prism」フォルダ
      • 「prism.css」ファイル
      • 「prism.js」ファイル
    • その他テーマ内にあるファイルやフォルダ．．．

有効化しているテーマでjsとCSSを読み込ませる

アップロードしたファイルをWordPress内で読み込まれる（適用される）ようにします。

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

/* js、CSSの読み込み */
function pwcn_shighlight_script_style_init(){
//個別のみ読み込む
if(is_single()){
	wp_enqueue_style(
		'shighlight-style', 
		get_theme_file_uri( '/prism/prism.css' ),
		array(),
		null ,
		'all'
	);

	wp_enqueue_script(
		'shighlight-script', 
		get_theme_file_uri( '/prism/prism.js' ), 
		array('jquery'),
		null,
		array( 
			'strategy'  => 'defer',
			'in_footer' => true, // Note: This is the default value.
		)
	);
}
}
add_action('wp_enqueue_scripts','pwcn_shighlight_script_style_init');

上記コードは、固定ページと投稿以外ではコードブロックを使うことがまずないことから、「is_single」という関数を使用して、ファイルを読み込むようにしています

コードを挿入して問題なく保存できたら、投稿か固定ページを実際に表示させてみます。

ページのどこかで右クリックし、「ページのソースを表示」をクリックして、出てきた画面の一番下あたりに以下の記述があれば、きちんと適用されていますから、使用準備は完了です。

<script defer src="サイトのURL/wp-content/themes/有効化しているテーマのフォルダ/prism/prism.js" id="shighlight-script-js" defer data-wp-strategy="defer"></script>

表示がない場合には、テーマ内に「prism」フォルダが転送されているか、その中に「prism.js」「prism.css」ファイルがあるか、functions.phpにコードが正しく追加されているかなど確認してください

コードブロックでのハイライト表示の使い方

準備ができたら、実際にコードブロックへ「ハイライト表示」と「行番号の表示」をさせてみましょう。

といっても、通常のコードブロックにある「高度な設定」の「追加CSS」欄へ必要なクラスを追加するだけですから、使うのはとても簡単です。

このページで紹介しているハイライト表示の方法は、他のサイトでも多数紹介されており、一部のページではクラシックエディターでの説明がされていたり、ブロックエディターのコードブロックでも「<」など文字の変換が必要なように書かれていることがありますが、そもそもブロックエディターのコードブロックでは変換しなくても表示・コピーできるようになっているので、コードをごにょごにょする必要はありません。

コードをハイライト表示させる

コードに色を付けて見やすくする（ハイライト表示させる）には、コードブロックを選択した後で、「高度な設定」の「追加CSSクラス」欄へ以下のクラスを追加します。

lang-markup

上記は赤文字部分をmarkupとしていますが、コード表示させる言語によって適切な色合いにすることができます。

詳しくはこちらの公式ページを参照ください。

ちなみに、本ページを参考にJSとCSSをダウンロードした場合には以下のように指定します。

追加CSSクラスどんなコード向けの色使いか
lang-markupmarkup, html, xml, svg, mathml, ssml, atom, rssなどを表示する
※コードを囲むタグ（<style>など）が書かれている場合には自動で判別するようです
lang-cssCSSを表示するのに適した色使い
lang-phpPHPを表示するのに適した色使い
lang-javascriptJavaScriptやJSを表示するのに適した色使い
lang-jsonjsonを表示するのに適した色使い

行番号を表示させる

行番号を表示させたい場合は、コードブロックを選択した後で、「高度な設定」の「追加CSSクラス」欄へ以下のクラスを追加します。

line-numbers

ハイライト表示と行番号の表示を同時にさせたい場合は、各クラスの間に半角の空白スペースを入れます（以下はmarkupの場合の例です）

lang-markup line-numbers

以上が、prism.jsを使ってWordPress標準のコードブロックをちょっと格好よくする基本的な方法でした。

ただちょっとこれでは芸がないので、次項でもう少し工夫する手法について語っておこうと思います。

コードブロックのハイライト表示をさらにカスタマイズする方法など

WordPressでより簡単に使えるようにする

前項で説明したように、言語によって「追加CSSクラス」へその言語に適したクラスを指定しないと、コードをきれいに色分けして表示されません。

従って、コードブロックを挿入する度にCSSなら「language-css」、PHPなら「language-php」などをいちいち指定する必要があって、実用するにはちょっと面倒だし、たまーに使う場合には覚えてられないですね。

そこでWordPressらしく？パターンとして登録しておくと便利です。

パターン登録の際は「非同期パターン」として登録するようにします

パターンの使い方が分からないという方は、以下のページをご覧ください。

WordPress6.3で変わった「パターン（旧再利用ブロック）」の使い方、使い勝手を良くする方法（メモ）

また、自分で登録するのはちょっと面倒という方は、以下のコードを有効化しているテーマのfunctions.phpへ追加することで、この手順を省くこともできます。

/***** パターンの登録 *****/
/* カテゴリーの追加 */
function pwcn_shighlight_block_pattern_category_init(){
	register_block_pattern_category('sample-shighlight-cat', ['label' => __('コードの強調表示','')]);
}
add_action('init','pwcn_shighlight_block_pattern_category_init');

/*** パターンの追加 ***/
/* PHP */
function pwcn_shighlight_php_block_patterns_init(){
	$pattern = [
		"title" => __('PHPコード',''),
		"categories" => ["sample-shighlight-cat"],
		"content" => '<!-- wp:code {"className":"lang-markup line-numbers"} -->
<pre class="wp-block-code lang-php line-numbers"><code></code></pre>
<!-- /wp:code -->',
  ];

	register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'pwcn_shighlight_php_block_patterns_init');

/* CSS */
function pwcn_shighlight_css_block_patterns_init(){
	$pattern = [
		"title" => __('css スタイルコード',''),
		"categories" => ["sample-shighlight-cat"],
		"content" => '<!-- wp:code {"className":"lang-markup line-numbers"} -->
<pre class="wp-block-code lang-css line-numbers"><code></code></pre>
<!-- /wp:code -->',
  ];

	register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'pwcn_shighlight_css_block_patterns_init');

/* Markup */
function pwcn_shighlight_markup_block_patterns_init(){
	$pattern = [
		"title" => __('Markup-HTMLなど-',''),
		"categories" => ["sample-shighlight-cat"],
		"content" => '<!-- wp:code {"className":"lang-markup line-numbers"} -->
<pre class="wp-block-code lang-markup line-numbers"><code></code></pre>
<!-- /wp:code -->',
  ];

	register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'pwcn_shighlight_markup_block_patterns_init');

/* JS */
function pwcn_shighlight_js_block_patterns_init(){
	$pattern = [
		"title" => __('JS jQueryコード',''),
		"categories" => ["sample-shighlight-cat"],
		"content" => '<!-- wp:code {"className":"lang-markup line-numbers"} -->
<pre class="wp-block-code lang-javascript line-numbers"><code></code></pre>
<!-- /wp:code -->',
  ];

	register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'pwcn_shighlight_js_block_patterns_init');

/* json */
function pwcn_shighlight_json_block_patterns_init(){
	$pattern = [
		"title" => __('jsonコード',''),
		"categories" => ["sample-shighlight-cat"],
		"content" => '<!-- wp:code {"className":"lang-markup line-numbers"} -->
<pre class="wp-block-code lang-json line-numbers"><code></code></pre>
<!-- /wp:code -->',
  ];

	register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'pwcn_shighlight_json_block_patterns_init');

コード追加後に投稿の編集画面を開き（すでに開いている場合にはリロードし）、ブロックの追加→「すべて表示」→「パターン」→「コードの強調表示」を順に開いていくと、下図のように、それぞれの目的に合ったパターンが表示されるようになります。

コードの強調表示をパターンから呼び出す画面

過去のコードブロックにも反映させるには

前項で紹介した方法は、最終的にコードブロックへ「追加CSSクラス」を指定したものだけがハイライト表示＆行番号が付くというものでした。

これだと過去のコードブロックを1つ1つ見つけてクラスを追加していく必要があって面倒なので、プラグインを臨時に1つ使って一括変更してしまいましょう。

使用するのは「Search Regex」という、内容を一括更新できるプラグイン、多分このページのようなカスタマイズをしようという方ならご存じなのでは？

以下のページからダウンロードするか、プラグイン検索画面で「Search Regex」と入力してインストール＆有効化しましょう。

Search Regex

有効化したら管理画面の「ツール」に「Search Regex」というのが追加されるのでクリックします。

下図のような画面が出てきます。

Search Regexプラグインの検索画面

「検索」という入力窓（上の赤枠）に以下をコピーして貼り付けます。

<pre class="wp-block-code

この状態で、「検索」ボタンをクリックすると、コードブロックが挿入されている投稿や固定ページがずらっと表示されます。

表示された内容の中で「<pre class=”wp-block-code」となっている部分に色がついているのをざっと確認します。

次に「検索」という入力窓はそのままにした状態で、「置換」という入力窓（下の赤枠）に以下のコードをコピーして貼り付けます（上図のようにします）。

<pre class="wp-block-code lang-markup line-numbers

この状態で、もう一度「検索」ボタンをクリックすると、それまで「<pre class=”wp-block-code」となっていた部分が「<pre class=”wp-block-code lang-markup line-numbers」になっているのが確認できるはずです。

この状態になったら「すべて置換」というボタンをクリックすると、今まで挿入したコードブロックがすべて「markup」に指定されてそれなりな色付けで表示され、行番号が表示されるようになります。

ちなみに置き換えたものは、コード上でCSSクラスが追加されるのではなく、きちんと編集画面の「高度な設定」→「追加CSSクラス」に挿入されるようになっているので、後から個別に編集することもできます。

2回以上同じ処理をすると、どんどん同じ種類のクラスが追加されてしまうので、処理は1回限りにしましょう（テストしてみた限りでは、余分にクラスが追加されても表示には影響はありませんでした）

残念ながらすべてのコードブロックが「markup」になってしまうので、それ以外に指定する場合には、手動での編集が必要ですが、行番号の追加、コピー機能の追加はできるので御の字かなと思います。

デザインをカスタマイズする

フロントエンド（表示画面側）のスタイルは「prism.css」に書かれているので、必要に応じてご自身でカスタマイズしてください。

一方編集画面側ではprismの動作やスタイルは適用されませんから、以下のコードをテーマのfunctions.phpへ追加して、装飾のあるコードブロックであることが分かるようにしておくと、編集時に確認しやすいと思います。

/*** エディター側に色を付ける ***/
function pwcn_shighlight_editor_style_init(){
$custom_css = "
.wp-block-code.lang-php,
.wp-block-code.lang-css,
.wp-block-code.lang-javascript,
.wp-block-code.lang-json,
.wp-block-code.lang-markup
{
	border-left: 10px solid #333!important;
        padding: 8px;
	box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf!important;
}
";

wp_add_inline_style( 'wp-edit-blocks', $custom_css );//テーマエディターへインラインでCSS出力
}
add_action('init','pwcn_shighlight_editor_style_init');

以上、WordPress標準のコードブロックの表示をちょっとおしゃれにする方法でした。

, ,
,
Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
functions.phpからセキュリティヘッダーを追加する方法（例）
ひまあーと（管理人）

ひまあーと（管理人）

WordPressと出会ったのはTwenty Tenテーマがデフォルトになる前と結構な期間お世話になっています。興味に応じて、いろいろなサイト作っては壊しを繰り返しながら、独自テーマの作成やプラグインの作成などを行っています。 本サイトでは主にTwenty Twenty-TwoをはじめとするWordPress標準のブロックテーマのカスタマイズ方法、多彩な機能を詰め込んだ【Hima Art Utility】プラグインの紹介などをしています。 WordPressへの感謝、プラグイン作者への感謝を込めて、ささやかながら日本語翻訳に参加させていただいています（参加プロダクトはこちら）

Personal WP Customization Notes (PWCN)
WordPressで実際に行ったカスタマイズの記録、発生したトラブルに対処した時のメモ、ブロックテーマのカスタマイズなど