WordPress でソースコードをきれいに埋め込むプラグイン 6 選

WordPress は、コードブロックで HTML や CSS などのソースコードを表示できる。

しかし、特定の文字・記号の色を変えたり、特定の行のみ強調表示する、といった機能（シンタックスハイライト）はない。ソースコードをきれいに埋め込みたいなら、専用プラグインの利用がおすすめだ。

本記事で 6 つのプラグインを紹介しているので、ぜひ試してほしい。

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

最初に、プラグインを使わない「素」の状態を見ておこう。

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

プレビューすると、以下のように投稿画面とほぼ同じ見た目で表示される。

WordPressコードブロック表示例 — WordPress テーマ「GeneratePress」を使用

改行やインデントなどはきちんと反映されているから、ユーザーにコードをコピペしてもらうだけならこれでも問題ないだろう。

しかし、コードの解説を必要とする場合は、行番号やハイライト（強調）がほしいところ。実際に見比べてみよう。

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Welcome to my Sample Page</h1>
      <p>This is a sample HTML page.</p>
    </main>
    <footer>
      <p>Copyright &copy; 2023</p>
    </footer>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Welcome to my Sample Page</h1>
      <p>This is a sample HTML page.</p>
    </main>
    <footer>
      <p>Copyright © 2023</p>
    </footer>
  </body>
</html>

行番号・シンタックスハイライトありのほうがきれいに見えると思う。

ソースコードをきれいに見せるのはプラグインを導入するだけで簡単に実現できる。設定項目やデザインに違いがあるので、自分好みのプラグインを見つけてほしい。

ソースコード埋め込み用プラグイン 6 選

これから紹介していくプラグインは、いずれも実際に試したものだ。試用環境は以下のとおり。

WordPress 6.1.1
PHP 7.4
WordPress テーマ「GeneratePress」

ダウンロード数順で紹介していく。

Syntax-highlighting Code Block

投稿編集画面

プレビュー画面

「Syntax-highlighting Code Block」は、コアのコードブロックを拡張するプラグイン。専用の設定画面はなくデザイン調整もできないが、行番号＆ハイライト表示だけのシンプルさを求めるならおすすめ。

右パネルでコントロールできる項目は、下表のとおり。

設定項目	内容
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	Padding 無効化

Urvanov Syntax Highlighter

投稿編集画面

プレビュー画面

「Urvanov Syntax Highlighter」は、「Crayon Syntax Highlighter」の後継プラグイン。ブロックエディターでも使えるが、どちらかというとクラシックエディター＆クラシックテーマ向きだろう。

Crayon Syntax Highlighter の UI がそのまま踏襲されており、直感的な操作ができるわけではないので初心者には扱いづらいと思う。過去に愛用していたならおすすめ（個人的にとてもなつかしい）。

Code Syntax Block

投稿編集画面

プレビュー画面

「Code Syntax Block」は、コアブロックを拡張するプラグイン。

最初に紹介した「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」を選んでおけば間違いない。必要最低限の機能はあるし、最もバランスがとれているおすすめのプラグインだ。

当サイトでは「Highlighting Code Block」を使っているが、今後の開発状況次第では「Code Block Pro」に乗り換えようと考えている。

いろいろな機能を追加するのもブログの楽しみ方の一つだから、少しマンネリ化してきたと感じたら新しいプラグインを探してみよう。楽しくなければ意味がないのだから。