クリエイターズtips

2025年03月25日

WordPress Gutenberg でシンタックスハイライトを適用する最適な方法

プログラミング関連のブログ記事や技術ドキュメントを WordPress の Gutenberg（ブロックエディタ）で作成する際、シンタックスハイライト が適用されたコードブロックを使いたい場面が多いでしょう。しかし、Gutenberg では標準で適切なコードハイライト機能が提供されていないため、適切なプラグインやカスタム実装を行う必要があります。

本記事では、Gutenberg でシンタックスハイライトを適用するための最適な方法 を紹介し、それぞれの長所・短所を詳しく解説します。

1. Gutenberg でのコードブロックの基本

Gutenberg には「コード」ブロックが用意されていますが、これは基本的なプレーンテキストの表示のみで、シンタックスハイライトには対応していません。そのため、コードの可読性を高めるためには、追加のカスタマイズが必要になります。

主な対応方法としては、以下の3つの手法があります。

1. プラグインを利用する（最も簡単）
2. ショートコードを活用する（Gutenberg の制限を回避）
3. Prism.js を用いたカスタム実装（高速 & 軽量）

それぞれの方法について詳しく見ていきます。

2. おすすめのプラグインを使う方法

① Highlighting Code Block

「Highlighting Code Block」は、Gutenberg に最適化された 日本語対応のシンタックスハイライトプラグイン です。

導入手順

1. WordPress管理画面 → 「プラグイン」 → 「新規追加」
2. 「Highlighting Code Block」を検索してインストール & 有効化
3. 投稿や固定ページで「+」をクリックし、「Highlighting Code Block」ブロックを追加
4. コードを入力し、右側の設定パネルからプログラミング言語を選択

メリット & デメリット

✅ ブロックエディタで直感的に使える
✅ シンタックスハイライトが適用される
✅ ダークモード対応 & 行番号の表示切り替え可能
❌ 文章の途中にコードを挿入するのが難しい

② Syntax-highlighting Code Block

「Syntax-highlighting Code Block」も、Gutenberg 用に設計されたプラグインで、簡単にコードハイライトを適用できます。

導入手順

1. 「プラグイン」→「新規追加」
2. 「Syntax-highlighting Code Block」をインストール＆有効化
3. ブロックエディタで 「Syntax-highlighting Code Block」 を選択

メリット & デメリット

✅ シンタックスハイライトが適用される
✅ ブロックエディタで簡単に使える
❌ ショートコードによる挿入がやや不安定

3. ショートコードを使う方法
（文章の途中にコードを入れたい場合）

Gutenberg では ブロック単位 でコードを挿入するのが基本ですが、「文章の途中」にコードを入れたい場合、ショートコードを活用する方法があります。

カスタムショートコードを作成

function custom_syntax_highlight_shortcode($atts, $content = null) {
    return '<pre><code>' . esc_html($content) . '</code></pre>';
}
add_shortcode('code', 'custom_syntax_highlight_shortcode');

記事内での記述方法

これは通常の文章です。[code]echo "Hello, World!";[/code] これはコードです。

✅ メリット → 文章の途中にコードを挿入可能
❌ デメリット → 設定やメンテナンスが必要

4. Prism.js を用いたカスタム実装（軽量 & 高速）

Prism.js を利用すると、プラグイン不要で高速なシンタックスハイライトが可能です。

導入方法

function enqueue_prism_js() {
    wp_enqueue_style('prism-css', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css');
    wp_enqueue_script('prism-js', 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_prism_js');

記事内での記述方法

<pre><code class="language-php">echo "Hello, World!";</code></pre>

✅ メリット → 軽量で高速なハイライトが可能
❌ デメリット → functions.php の編集が必要

5. まとめ：最適な方法の選び方

💡 おすすめの選び方

✔ 「簡単に使いたい！」→ プラグインを導入
✔ 「文章の途中にコードを入れたい！」→ ショートコードを活用
✔ 「サイトを軽量化したい！」→ Prism.js でカスタム実装

Gutenberg でシンタックスハイライトを適用する方法は複数ありますが、サイトの用途や運営方針に合わせて最適な方法を選ぶことが重要 です。

もし適用方法で困ったら、この記事を参考にしてみてください！🚀

関連投稿:

WordPressで記事をSNSに自動投稿するプラグインまとめ SEO対策の極意：WordPressブログで成功するための必須テクニック WordPressでサイト制作をするために必要な環境とプラグインの完全ガイド WordPressのコメントを安全に投稿してもらう方法（スパム対策）