HCBで、コードをわかりやすく色分けして、横スクロールで表示
WordPressにはコードブロックがありますが、単色でしか表示されません。今回は、プラグインHCBで、コードをわかりやすく色分けして、横スクロールで表示する方法を紹介します。
設定
まず、全体の設定をしていきます。左サイドバーの設定＞HCBをクリックをクリックし、設定画面を表示します。Highlighting Code Block
コードカラーリング（フロント側）、コードカラーリング（エディター側）をDarkに設定します。フォントサイズ(PC)、フォントサイズ(SP)を任意の値に設定します。画面下の変更を保存をクリックします。
設定＞HCBをクリック
フォントサイズ(PC)、フォントサイズ(SP)を任意の値に設定
変化を保存をクリック
設置
ブロックエディターを開きます。左サイドバーのブロック＞Hiliting Code Blockをクリックして、HCBブロックを挿入します。
右サイドバーの言語から入力するコードの言語を選択します。ブロック内にコードを入力します。これで完成です。プレビューを確認します。
ブロック＞Hiliting Code Blockをクリック
ブロック内にコードを入力
設定＞HCBをクリック
プレビューを確認
以上で今回の説明は終了です。コードを改行せずに、わかりやすく表示できるので便利です。
