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】の設定
プラグインを有効化すると、管理画面 > 設定 内に【CODE BLOCK】項目が追加されるので、そこから設定を行います。



言語名の表示 | サイトに表示したコードに言語名を表示するかの選択 |
---|---|
行数の表示 | サイトに表示したコードに行番号を表示するかの選択 |
フォントスムージング | フォントスムージングをオンにするかの選択 |
コードカラーリング(サイト表示) | サイトに表示したコードのカラーリングを選択 |
コードカラーリング(エディタ内) | エディターのコードのカラーリングを選択 |
フォントサイズ(PC) | PC上のフォントサイズを指定 |
font-family: コードのフォント | コードのフォントを指定 |
ブロックエディタのコンテンツ幅 | ブロックエディターのコンテンツ幅を指定 |
使用する言語設定 | 言語の追加と削除を指定 削除する場合は、行ごと削除追加する場合『クラスキー:”言語名”』の形式で記述 ※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」の設定と併用する |
独自カラーリングファイル | コードのシンタックスハイライト表示を独自のものにしたい場合に、CSSファイル名を指定 (CSSファイルはテーマフォルダ内に置く) |
独自prism.js | 独自にセットした『prism.js』を使用する場合、ファイル名を指定 (『prism.js』ファイルはテーマフォルダ内に置く) |
動作確認環境
- バージョン 1.1.0
- WordPress 5.4.1
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Highlighting Code Block】は、ソースコードを色分け表示(シンタックスハイライト)するプラグイン。
- 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述することができます。