HCBで、コードをわかりやすく色分けして、横スクロールで表示

WordPressにはコードブロックがありますが、単色でしか表示されません。今回は、プラグインHCBで、コードをわかりやすく色分けして、横スクロールで表示する方法を紹介します。

設定

まず、全体の設定をしていきます。左サイドバーの設定＞HCBをクリックをクリックし、設定画面を表示します。Highlighting Code Block

コードカラーリング（フロント側）、コードカラーリング（エディター側）をDarkに設定します。フォントサイズ(PC)、フォントサイズ(SP)を任意の値に設定します。画面下の変更を保存をクリックします。

設置

ブロックエディターを開きます。左サイドバーのブロック＞Hiliting Code Blockをクリックして、HCBブロックを挿入します。

右サイドバーの言語から入力するコードの言語を選択します。ブロック内にコードを入力します。これで完成です。プレビューを確認します。

以上で今回の説明は終了です。コードを改行せずに、わかりやすく表示できるので便利です。