HTMLでもPHPでも何にしろ、ソースコードを載せる記事はコードがきれいに表示されていた方がいいものです。
コードが読みやすく色分け表示（シンタックスハイライト）されていれば、自分にとっても読み手にも分かりやすく優しいといえるでしょう。
【Highlighting Code Block】は記述したコードを色分け表示（シンタックスハイライト）することのできるプラグイン。
『prism.js』を使用しており、HTML、PHPをはじめとした17種類の言語に対応しています。
- コードをきれいに色分け表示（シンタックスハイライト）したい
- 『prism.js』を使用してシンタックスハイライトしたい
- コードを『prism.js』を使用して、シンタックスハイライトする
- 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述できる
インストール
- ダッシュボード > プラグイン > 新規追加 とクリックする
- Highlighting Code Blockで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
使用方法
ブロックエディターの場合
『テキスト』内の【Highlighting Code Block】ブロックを追加します。
追加したブロックにコードを記述します。
記述したコードの言語を選択し、ファイル名・data-line属性の値を指定します。（未入力可）
| Lang Select | 言語を選択 |
|---|---|
| ファイル名 | サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示 |
| data-line属性の値 | 入力した行番号が強調表示される。強調しない場合は空欄にする |
【Highlighting Code Block】ブロックを選択すると『HCB設定』が表示されますので、行番号を表示するかを選択します。
保存すると、コードがシンタックスハイライト表示されます。
ビジュアルエディター（旧エディター）の場合
ツールバー内のコードブロックと表示されたプルダウンメニューをクリックし、言語を選択します。
『/* Your code… */』部分にコードを記述します。
または、先にコードを記述し選択した状態でコードブロックから言語を選択します。
テキストエディターに切り替え『data-lang』の値を編集すると、ファイル名を変更することができます。
保存すると、コードがシンタックスハイライト表示されます。
【Highlighting Code Block】の設定
プラグインを有効化すると、管理画面 > 設定 内に【[HCB]設定】項目が追加されるので、そこから設定を行います。
| 言語の設定 | サイトに表示したコードに言語名を表示するかの選択 |
| 行数の表示設定 | サイトに表示したコードに行番号を表示するかの選択 |
| コピーボタン | コードブロックにコピーボタンを表示するかの選択 |
| フォントスムージング | フォントスムージングをオンにするかの選択 |
| コードカラーリング（フロント側） | サイトに表示したコードのカラーリングを選択 |
| コードカラーリング（エディター側） | エディターのコードのカラーリングを選択 |
| フォントサイズ（PC ） | PC上のフォントサイズを指定 |
| フォントサイズ（SP ） | スマホ上のフォントサイズを指定 |
| コードの”font-family” | コードのフォントを指定 |
| 使用する言語セット | 言語の追加と削除を指定 削除する場合は、行ごと削除追加する場合『クラスキー:”言語名”』の形式で記述 ※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」の設定と併用する |
| 独自カラーリングファイル | コードのシンタックスハイライト表示を独自のものにしたい場合に、CSSファイル名を指定 （CSSファイルはテーマフォルダ内に置く） |
| 独自prism.js | 独自にセットした『prism.js』を使用する場合、ファイル名を指定 （『prism.js』ファイルはテーマフォルダ内に置く） |
動作確認環境
- バージョン 1.2.9
- WordPress 5.7.2
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Highlighting Code Block】は、ソースコードを色分け表示（シンタックスハイライト）するプラグイン。
- 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述することができます。