ブロックエディター上にコードを入れている時に、codeタグの部分を見やすくしたいと思った時に便利なプラグインです。いくつかプラグインがありますが、今回は「Urvanov Syntax Highlighter」を使ってみます。

Urvanov Syntax Highlighter

カスタマイズ可能な言語とテーマをサポートする、PHP と jQuery で構築された Syntax Highlighter。
URL、または WordPress の投稿テキストから強調表示できます。Crayon を使用すると、言語ファイルを簡単に管理し、正規表現を使用してカスタム言語要素を定義できます。

まずはプラグインをインストールして有効化します。

Urvanov Syntax Highlighter ブロックエディタ

ブロックエディタの中に「Urvanov Syntax Highlighter」が追加されますので、選択します。

[rml_read_more]

設定が様々ありますが、プログラム言語の種類やフォント、余白など様々調整ができるようになっています。

Syntax Highlighterで表示される

コードの文字や数値、コメント、キーワードなどが、それぞれ異なる色で表示されます。これにより、コードの読みやすさが向上し、誤字やエラーも見つけやすくなります。

Copyをクリックすると、全文をコピーすることができます。

まとめ

このプラグインを使用すると、コードを見やすく、色分けされたテキストブロックで表示できます。プラグインはシンタックスハイライトエンジンを使用しており、多数のプログラミング言語に対応しています。

ご参考ください。