WordPress は、コードブロックで HTML や CSS などのソースコードを表示できます。
でも、特定の文字・記号の色を変えたり、特定の行のみ強調表示する、といった機能（シンタックスハイライト）はありません。ソースコードをきれいに埋め込みたいなら、専用プラグインの利用がおすすめです。
以下の 6 つのプラグインを実際に試してみましたので、ご参考になれば幸いです。
本記事執筆にあたり、以下の環境で検証しました。
仕様環境
ダウンロード数順で紹介していきます。
「Syntax-highlighting Code Block」は、コアのコードブロックを拡張するプラグイン。
専用の設定画面はなくデザイン調整もできませんが、行番号＆ハイライト表示だけのシンプルさを求めるならおすすめです。
投稿編集画面
プレビュー画面
右パネルでコントロールできる項目は、下表のとおり。
| 設定項目 | 内容 |
|---|---|
| LANGUAGE | 言語 |
| HIGHLIGHTED LINES | ハイライト（強調表示）する行 |
| Show Line Numbers | 行数の表示 |
| Wrap Lines | 行の折り返し |
「Code Block Pro」は、Visual Studio Code と同じレンダリングエンジンを採用しているプラグイン。
コアブロックからの変換にも対応していて、直感的に操作できます。
投稿編集画面
プレビュー画面
設定画面はありませんが、投稿編集画面の右パネルで詳細な設定ができます（設定は一部自動保存される）。
| 設定項目 | 内容 |
|---|---|
| CODE LANGUAGE | 言語 |
| Enable line numbers | 行数の表示（開始行番号変更可） |
| Enable line highlighting | ハイライトする行 |
| Enable blur emphesis | ぼかし効果 |
| Header Type | ヘッダーのデザイン |
| Footer Type | フッターのデザイン |
| Themes | 全体のデザイン |
| Copy Button | コピーボタン |
| Disable Padding | Padding 無効化 |
「Urvanov Syntax Highlighter」は、「Crayon Syntax Highlighter」の後継プラグイン。
ブロックエディターでも使えますが、どちらかというとクラシックエディター＆クラシックテーマ向きです。
投稿編集画面
プレビュー画面
開発が終了した Crayon Syntax Highlighter の UI がそのまま受け継がれていて、初心者にはちょっと扱いづらいかもしれません。
過去に愛用していたなら違和感なく使えると思います（個人的にとてもなつかしい…）。
「Code Syntax Block」は、コアブロックを拡張するプラグイン。
投稿編集画面
プレビュー画面
最初に紹介した「Syntax-highlighting Code Block」と似ていますが、ハイライト機能はありません。設定画面でデザイン変更できるので、一長一短ですね（※ 投稿ごとのデザイン変更は未対応）。
| 設定項目 | 内容 |
|---|---|
| LANGUAGE | 言語 |
| Show line numbers | 行数の表示 |
| TITLE FOR CODE BLOCK | ヘッダーに表示するタイトル |
「Highlighting Code Block」は、SWELL 開発者が提供しているプラグイン。
当然ながら日本語完全対応で解説記事もあるため、初心者でもわかりやすいと思います。
投稿編集画面
プレビュー画面
主な項目は専用設定画面で設定し、投稿画面では行数表示・言語名表示の切り替えができるようになっています。
「Enlighter」は、本記事で紹介したプラグインのなかで最も高機能なプラグイン。
投稿編集画面
プレビュー画面
設定画面でかなり細かいコントロールができます。高機能ゆえ初心者向きではなく、プロユースのプラグインですね。
ご紹介してきたように、プラグインによって特徴が異なります。目的に応じて選んでみてください。
| 目的 | おすすめプラグイン |
|---|---|
| クラシックエディターで使いたい | Urvanov Syntax Highlighter |
| 日本語対応でわかりやすいプラグインがよい | Highlighting Code Block |
| 標準的な機能・デザインを求めている | Code Block Pro |
| 知識があり自分好みに細かく調整したい | Enlighter |
どうしても迷うなら、「Code Block Pro」を選んでおけば間違いないと思います。必要最低限の機能がありますし、最もバランスがとれているおすすめのプラグインです。
SWELL ユーザーなら開発者が同じ「Highlighting Code Block」が使いやすいんじゃないでしょうか。
当サイトも SWELL ＋ Highlighting Code Block でしたが、Astro 移行を機に通常のコードブロック表示にしました。少し見た目が寂しいのでいろいろお試し中です。