記事にコードを表示するWordPressプラグイン4個を比較（シンタックスハイライト）

シンタックスハイライト

記事にコードを表示する際に役に立つWordPressプラグインを紹介します。

ブロックエディタに「シンタックスハイライト」を適用するプラグインです。
クラシックエディタ（旧エディタ）に対応しているプラグインもあります。

この記事で紹介するプラグインは、HTML・CSS・JSなどのコードに着色して強調表示することで、プログラミング言語の構文を見やすくします。

ブログでコードの書き方などの解説を行う機会が多い方に役に立ちます。
便利なプラグインなので活用しましょう。

はじめに

シンタックスハイライトとは？

シンタックスハイライト（Syntax Highlight）は、
テキストエディタなどでプログラミング言語のコードを見やすくするために用いられる機能のことです。

コードに着色して強調表示することで、プログラミング言語の構文を見やすくする目的で利用されます。

ちなみに、シンタックスハイライター（Syntax Highlighter）とも呼ばれます。

シンタックスハイライトを利用する利点

コードに着色して強調表示することで、プログラミング言語の構文が見やすくなる。
コードの編集がやりやすくなる。

プラグイン比較

記事にコードを表示するプラグインの主な特徴をまとめました。
使い方と機能は、ほぼ同じですが、コードの見え方が少し異なります。
日本製のプラグインを優先して紹介しています。
※　比較表は横スクロールできます。

	Highlighting Code Block	Enlighter	SyntaxHighlighter Evolved	Urvanov Syntax Highlighter
主な特徴	シンプルデザインスキン2種類	シンプルカスタマイズ性が高いデザインスキン14種類	シンプルデザインスキン7種類	Crayonから派生 Crayonと互換性ありデザインスキン50種類以上
ブロックエディタ	⚪︎ 対応	⚪︎ 対応	⚪︎ 対応	⚪︎ 対応
クラシックエディタ	△ 対応（ビジュアル編集）	△ 対応（ビジュアル編集）	⚪︎ 対応（ショートコード）	⚪︎ 対応
日本語化	⚪︎ 対応	× 英語	⚪︎ 対応	⚪︎ 対応

日本製のシンタックスハイライト

シンタックスハイライトの機能が利用できる日本製のプラグインです。
日本で開発されているので、日本語環境での運用に完全対応しています。

Highlighting Code Block

Highlighting Code Blockは、記事の中でコードを美しく表示するWordPressプラグインです。

日本製のプラグインです。シンプル機能で、余計な機能が一切無いのが特徴です。
難しい設定はありません。初期設定のままでも運用できます。

ブロックエディタ・クラシックエディタの両方に対応しています。
ブロックエディタ向けに専用のブロックが用意されています。

ブログの記事の中で、プログラミングのコードを書いて解説する機会が多い方は、このプラグインを活用しましょう。

このプラグインが優れていること

WordPressにシンタックスハイライト機能を簡単に導入できる。
記事の中でコードを美しく表示できる。
ブロックエディタの専用ブロックが用意されている。
クラシックエディタを利用する場合は、エディタのビジュアル編集からコードを記述します。

オススメ理由

シンプルで使いやすい。

ブロックエディタ（見本）

Highlighting Code Block

記事にコードを配置した状態（見本）

Highlighting Code Block

補足情報

日本語化	日本製のプラグインです。日本語表記なので使いやすい。
導入の難易度	導入は簡単です。
インストール数	10,000以上
アップデート頻度	定期的にアップデートされています。
プラグインの評判	レビュー・サポートフォーラムでは、好意的評価が多いようです。

インストール方法

WordPress管理画面＞プラグイン＞新規追加＞「Highlighting Code Block」で検索
「wordpress.org」からダウンロード

Highlighting Code Block
https://ja.wordpress.org/plugins/highlighting-code-block/
prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

海外製のシンタックスハイライト

シンタックスハイライトの機能が利用できる海外製のプラグインです。