以前にWordPressでEnlighterを使ってソースコードを表示する方法を紹介しましたが、今回はWordPressのGutenbergからEnlighterを使う方法を紹介します。
なお、今回はEnlighterの設定だけの紹介になるので、Enlighterの導入方法については、上記の記事をご参照ください。
GutenbergでEnlighterを使う方法
WordPressのGutenbergでは、ブロックという単位で記事を書いていく形になります。ブロックには、テキスト用のブロックや画像用のブロック、そしてJINなど独自テーマ向けブロックなど数多くの種類が用意されています。
Enlighterにも専用のブロックが用意されており、このブロックを使えば、Gutenberg上でソースコードを簡単に編集できるようになります。
GutenbergでEnlighterのブロックを有効化
デフォルトではGutenbergでEnlighterのブロックが有効になっていないと思われるため、WordPressのEnlighterの設定ページから「Visual Editorタブ」にある「Gutenberg Editor Plugin」の「Enableにチェック」を入れることで、Enlighterのブロックを有効にできます。
Enlighterのブロックが有効になっていれば、GitHubで紹介されているGutenberg Editorの操作のように、ソースコードの編集が可能です。