技術ブログや解説記事を書いていると、コードを載せる機会がよくあります。そのまま貼るだけだと読みにくく、コピーもしづらいため、色分け(シンタックスハイライト)で見やすく整えたいところです。
かつてはAlex Gorbatchev氏のSyntaxHighlighterを組み込む「Google Syntax Highlighter for WordPress」やその派生「HF Edition」が定番でしたが、現在は更新が止まり、新しく使うものではなくなっています。この記事では、2026年のいま選ぶべきコード表示の方法を、現行のプラグインを中心に整理します。
シンタックスハイライトとは
シンタックスハイライトとは、プログラムのコードを言語の文法に応じて色分けし、読みやすく表示する仕組みです。
HTMLやCSS、PHP、JavaScriptなどの予約語・文字列・コメントが色で区別されるため、読み手はコードの構造を直感的に把握できます。WordPressでは、これを手軽に実現するためにプラグインを使うのが一般的です。
かつての定番「Google Syntax Highlighter for WordPress」は今どうなのか
このプラグインは、SyntaxHighlighterというJavaScriptライブラリをWordPressに組み込み、[sourcecode] のようなショートコードでコードを装飾するものでした。
当時は手軽で人気がありましたが、現在は長期間メンテナンスされておらず、新規サイトでの利用は推奨されません。ブロックエディタ(Gutenberg)との相性や表示速度の面でも、現行のプラグインに見劣りします。
すでに導入している場合は、後述の移行の手順を参考に、現行の方法へ切り替えることをおすすめします。
今のおすすめ:用途別のコード表示プラグイン
現在は、使っているエディタや重視するポイントに応じて選べる選択肢が揃っています。基本はブロックエディタ対応・軽量・メンテナンス継続中のものから選ぶのが安全です。
- Syntax-highlighting Code Block:標準の「コード」ブロックに自動でハイライトを付与。サーバー側でレンダリングするためフロントでJavaScriptを読み込まず軽量で、AMPにも対応します。速度を重視する人向け。
- Code Syntax Block:Prismをベースに、Gutenbergのコードブロックを拡張するプラグイン。テーマ(配色)を選べます。
- highlight.js系のコードブロックプラグイン:定番ライブラリhighlight.jsで標準コードブロックに色付けするタイプ。対応言語が豊富です。
- Enlighter(EnlighterJS):オールインワン型。ブロックエディタとクラシックエディタの両方に対応し、配色のカスタマイザーも備えています。
- SyntaxHighlighter Evolved:クラシックエディタ時代からの定番で、Gutenberg用ブロックも用意され今も使えます。旧プラグインからの移行先として馴染みやすい選択肢です。
迷う場合は、ブロックエディタを使っていてとにかく軽くしたいなら Syntax-highlighting Code Block、配色や機能を細かく調整したいなら Enlighter、というあたりが分かりやすい基準です。
選び方のポイント
コード表示プラグインを選ぶときは、見た目より先に次の点を確認すると失敗しにくくなります。とくに「更新が継続されているか」は最優先で確認すべき項目です。旧プラグインの二の舞を避けるためです。
- 更新が続いているか(最終更新と最新WordPressでの動作確認)
- 使っているエディタ(ブロック/クラシック)に対応しているか
- 表示速度への影響(フロントで重いJavaScriptを読み込まないか)
- 対応言語と配色テーマが自分の用途に合うか
プラグインを使わない方法もある
プラグインを増やしたくない場合は、Prismやhighlight.jsといったライブラリをテーマに直接読み込み、コードを <pre><code> で囲んで表示する方法もあります。手間はかかりますが、不要な機能を読み込まないぶん軽量に保てます。テーマによっては、コードハイライト機能を標準で備えているものもあるので、まず確認してみるとよいでしょう。
旧プラグインから移行するときの注意
古いプラグインを停止すると、これまで [sourcecode] などのショートコードで書いていた箇所が、装飾されないまま生のテキストとして残ることがあります。移行の際は、過去記事のショートコードがどう表示されるかを必ず確認してください。
記事数が多い場合は、検索・置換プラグインで一括変換すると効率的です。切り替え後は、代表的な記事をいくつか開いて表示崩れがないかをチェックしましょう。
まとめ
WordPressでコードを綺麗に表示する方法は、かつての「Google Syntax Highlighter」系から、ブロックエディタ対応で軽量な現行プラグインへと移り変わりました。
これから選ぶなら、更新が続いていてエディタに合った現行プラグインを選ぶのが正解です。まずは1つ導入して、自分の書き方とテーマに合うかを試してみてください。