「Highlighting Code Block」は、WordPressにHTMLやCSSなどのコードを綺麗に埋め込めるプラグインです。
下記のようにコードは色付き(シンタックスハイライト)で表示してくれます。
![](https://souken-blog.com/wp-content/uploads/2021/07/20210416g-n1.png)
WordPressにて、単にコードを表示するだけなら、ブロックエディターの「コードブロック」を使えば可能ですが、
![](https://souken-blog.com/wp-content/uploads/2021/07/20210416h-n1.png)
こんな感じで、コードが単色となってしまい、行数も表示されず、どうにもパッとしません。とても見づらいです。
そういう方に「Highlighting Code Block」がお勧めです。
ちなみに、ブロックエディターとクラシックエディターの両方で使えます。
インストールと有効化
WordPress管理画面より「プラグイン」⇒「新規追加」
検索欄に「Highlighting Code Block」と入れます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416e.png)
似たようなプラグインがもう一つあってややこしいのですが、間違わないようにしてください。
これをインストールして有効化します。
ブロックエディターでの使い方
早速、使ってみましょう。
まずはブロックエディターから。
プラグインを入れると、ブロックエディターの中に「Highlighting Code Block」が追加されています。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416f.png)
クリックすると入力画面が開くので、左下の「Lang selet」からコードの種類を選択、
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416i.png)
HTML,CSS,JavaScript,PHP等から選べます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416j.png)
そしてコードを入れます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416l.png)
すると、下記のように表示されます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416k.png)
簡単ですね(^^)v
クラシックエディターでの使い方
クラッシックエディターでは、プラグインを入れるとビジュアルエディター画面に「Code Block」ボタンが追加されます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416o.png)
入力欄にコードを入力後、ドラッグで範囲指定した上で、ボタンをクリックしてコードの種類を選択します。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416p.png)
すると、以下のように表示されます。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416q.png)
こちらも簡単ですね。
設定を変更するには?
このプラグインは、右側のブロックエディターの設定欄(ブロックエディター使用時)からは簡単な設定変更、
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416m.png)
WordPress管理画面⇒設定⇒[HCB]設定、からは詳細な設定変更が可能です。
![](https://souken-blog.com/wp-content/uploads/2021/04/20210416n.png)
ただ、特にこだわりが無ければ初期状態のままで充分に使えます。
![](https://souken-blog.com/wp-content/uploads/2016/07/sblog-prf004.png)