コードをシンタックスハイライト表示する【Highlighting Code Block】の使い方

HTMLでもPHPでも何にしろ、ソースコードを載せる記事を書くときは、コードはきれいに表示されていた方がいいと思います。

コードが読みやすく色分け表示（シンタックスハイライト）されていた方が、自分にとっても読み手にも優しいですね。

【Highlighting Code Block】は記述したコードをシンタックスハイライトしてくれるプラグイン。
『prism.js』を使用しており、HTML、PHPをはじめとした17種類の言語に対応しています。

対応している言語

こんな場合におススメ

プラグインを使ってできること

使用イメージ

カラーリング『Light』

カラーリング『Dark』

または、配布サイトからダウンロードして、インストール。
Highlighting Code Block – WordPress プラグイン | WordPress.org

ツールバー内の【コードブロック】と表示されたプルダウンメニューをクリックし、言語を選択し『/* Your code… */』部分にコードを記述します。

または、先にコードを記述し選択した状態で【コードブロック】から言語を選択します。

『フォーマット』内の【Highlighting Code Block】ブロックを追加します。

追加したブロックにコードを記述し、言語を選択します。

Lang Select	言語を選択
ファイル名	サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示
data-line属性の値	入力した行番号が強調表示される

追加した【Highlighting Code Block】ブロックを選択し、行番号を表示するかを選択します。

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。