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

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

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

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

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

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

WordPressコードブロック使用例

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

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 投稿画面

プレビュー画面

Syntax-highlighting Code Block プレビュー画面

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

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

設定項目内容
LANGUAGE言語
HIGHLIGHTED LINESハイライト(強調表示)する行
Show Line Numbers行数の表示
Wrap Lines行の折り返し

Code Block Pro

投稿編集画面

Code Block Pro 投稿画面

プレビュー画面

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 PaddingPadding 無効化

Urvanov Syntax Highlighter

投稿編集画面

Urvanov Syntax Highlighter 投稿画面

プレビュー画面

Urvanov Syntax Highlighter プレビュー画面

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

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

Urvanov Syntax Highlighter 設定画面

Code Syntax Block

投稿編集画面

Code Syntax Block 投稿画面

プレビュー画面

Code Syntax Block プレビュー画面

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

最初に紹介した「Syntax-highlighting Code Block」と似ているが、ハイライト機能はない。設定画面でデザイン変更できるので、一長一短といったところだ(投稿ごとのデザイン変更は不可)。

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

Highlighting Code Block

投稿編集画面

Highlighting Code Block 投稿画面

プレビュー画面

Highlighting Code Block プレビュー画面

Highlighting Code Block」は、SWELL 開発者が提供しているプラグイン。当然ながら日本語完全対応で解説記事もあるため、初心者でもわかりやすいと思う。

主な項目は専用設定画面で設定し、投稿画面では行数表示・言語名表示の切り替えができるようになっている。

Highlighting Code Block 設定画面

Enlighter

投稿編集画面

Enlighter 投稿画面

プレビュー画面

Enlighter プレビュー画面

Enlighter」は、本記事で紹介したプラグインのなかで最も高機能なプラグイン。

設定画面でかなり細かいコントロールができるが、高機能ゆえ初心者には向かない。プロユースと考えてよいだろう。

Enlighter 設定画面

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

紹介してきたように、プラグインによって特徴が異なる。目的に応じて導入してみてほしい。

目的おすすめプラグイン
クラシックエディターで使いたいUrvanov Syntax Highlighter
日本語対応でわかりやすいプラグインがよいHighlighting Code Block
標準的な機能・デザインを求めているCode Block Pro
知識があり自分好みに細かく調整したいEnlighter

どうしても迷うなら、「Code Block Pro」を選んでおけば間違いない。必要最低限の機能はあるし、最もバランスがとれているおすすめのプラグインだ。

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

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