WordPressでソースコードを美しく表示・埋め込むプラグイン調べてみた！※自動でコードを書けるプラグインではない

WEB制作

WordPressでソースコードを美しく表示・埋め込むプラグイン6選

WordPressでは標準のコードブロックを使ってHTMLやCSSなどのソースコードを表示できます。ただし、キーワードの色分けや特定の行だけを目立たせるシンタックスハイライト機能は標準では備わっていません。
ソースコードをより見やすく、読みやすく埋め込みたい場合は、専用プラグインの活用がおすすめです。

今回は実際に6つのプラグインを試してみました。それぞれの特徴や表示例をご紹介します。

  • Syntax-highlighting Code Block

  • Code Block Pro

  • Urvanov Syntax Highlighter

  • Code Syntax Block

  • Highlighting Code Block

  • Enlighter

WordPress コードブロックの見た目

最初に、プラグインを使わない状態を見ておきましょう。

以下はコードブロックで HTML サンプルコードを書いたものです。

（ユーザーが実際に閲覧するページ）では、投稿画面とほぼ同じレイアウトでコードが表示されます。
改行やインデントもしっかり反映されているため、単にユーザーがコードをコピー＆ペーストするだけなら、このままでも特に支障はありません。
ただし、コードを見る時に、行番号や文字の色があると分かりやすいですよね。

プラグインを入れると以下のような表示になります。

↑文字(タグと呼ばれている箇所)に色がつき、左側に番号が書かれている。

ソースコード埋め込みにおすすめのプラグイン6選

ここからは、実際に使用して確認したプラグインを1つずつご紹介していきます。

①Syntax-highlighting Code Block

「Syntax-highlighting Code Block」は、WordPress標準のコードブロック機能を拡張するシンプルなプラグインです。専用の設定画面はなく、デザインのカスタマイズも行えませんが、行番号の表示やハイライト機能が欲しい方には十分な機能です。

プラグインページはこちら

ソースコード埋め込みのサンプル↓

投稿編集画面の右パネルで設定できる項目は以下の通りです。

設定項目 内容
LANGUAGE 使用するプログラミング言語の指定
HIGHLIGHTED LINES 強調表示する行の指定
Show Line Numbers 行番号の表示
Wrap Lines 行の折り返し設定

②Code Block Pro

「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 パディングの無効化

③Urvanov Syntax Highlighter

「Urvanov Syntax Highlighter」は、開発が終了した「Crayon Syntax Highlighter」の後継プラグインです。ブロックエディターでも使用可能ですが、クラシックエディターやクラシックテーマとの相性がより良い設計になっています。

プラグインページはこちら

ソースコード埋め込みのサンプル↓

「設定」項目の編集画面↓

Crayon Syntax Highlighterのユーザーインターフェースを引き継いでいるため、やや設定が複雑に感じられるかもしれません。初心者の方は少し操作に慣れが必要です。

④Code Syntax Block

「Code Syntax Block」は、WordPressの標準コードブロックを拡張するプラグインです。

プラグインページはこちら

ソースコード埋め込みのサンプル↓

 

先ほど紹介した「Syntax-highlighting Code Block」と似ていますが、こちらには行のハイライト機能はありません。

設定できる主な項目は以下の通りです。

設定項目 内容
LANGUAGE 使用言語の指定
Show line numbers 行番号の表示
TITLE FOR CODE BLOCK ヘッダーに表示するタイトル

⑤Highlighting Code Block

「Highlighting Code Block」は、人気テーマSWELLの開発者が提供しているプラグインです。日本語に完全対応しており、公式の解説記事も充実しているため、初心者でも安心して利用できます。

プラグインページはこちら

ソースコード埋め込みのサンプル↓

「設定」項目の編集画面↓

基本的な設定は専用の設定画面で行い、投稿編集画面では行番号や言語名の表示切替が可能です。

⑥Enlighter

「Enlighter」は、今回紹介するプラグインの中で最も高機能なプラグインです。

プラグインページはこちら

ソースコード埋め込みのサンプル↓

「設定」項目の編集画面↓

設定画面から非常に細かいカスタマイズが可能で、表示スタイルやテーマも自由に調整できます。高機能な分、初心者にはやや難易度が高く、どちらかと言えばプロ向けのプラグインといえます。

目的別おすすめプラグイン

ここまでご紹介してきた通り、各プラグインにはそれぞれ特徴があります。利用目的に合わせて選ぶのがポイントです。

目的 おすすめプラグイン
クラシックエディターで使いたい Urvanov Syntax Highlighter
日本語対応でわかりやすく使いたい Highlighting Code Block
標準的な機能とデザインを重視 Code Block Pro
細かいカスタマイズをしたい Enlighter

もし選ぶのに迷ったら、「Code Block Pro」を選んでおけばまず間違いありません。必要な機能が一通り揃っており、バランスの取れたプラグインです。

プラグインを使ってソースコードの表示を工夫するのも、ブログ運営の楽しみの一つです。もし少しマンネリを感じてきたら、新しいプラグインを試してみるのも良いでしょう！