- 1 WordPressでソースコードを美しく表示・埋め込むプラグイン6選
- 2 WordPress コードブロックの見た目
- 3 ソースコード埋め込みにおすすめのプラグイン6選
- 3.1 ①Syntax-highlighting Code Block
- 3.2 ソースコード埋め込みのサンプル↓
- 3.3 ②Code Block Pro
- 3.4 ソースコード埋め込みのサンプル↓
- 3.5 ③Urvanov Syntax Highlighter
- 3.6 ソースコード埋め込みのサンプル↓
- 3.7 「設定」項目の編集画面↓
- 3.8 ④Code Syntax Block
- 3.9 ソースコード埋め込みのサンプル↓
- 3.10 ⑤Highlighting Code Block
- 3.11 ソースコード埋め込みのサンプル↓
- 3.12 「設定」項目の編集画面↓
- 3.13 ⑥Enlighter
- 3.14 ソースコード埋め込みのサンプル↓
- 3.15 「設定」項目の編集画面↓
- 4 目的別おすすめプラグイン
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」を選んでおけばまず間違いありません。必要な機能が一通り揃っており、バランスの取れたプラグインです。
プラグインを使ってソースコードの表示を工夫するのも、ブログ運営の楽しみの一つです。もし少しマンネリを感じてきたら、新しいプラグインを試してみるのも良いでしょう！
