【WordPress】ソースコードを見やすく表示する「Highlighting Code Block」

WordPressの記事にソースコードを埋め込むときに、ハイライト表示やコードの行数を表示したいときがあると思います。

行数の表示やハイライト表示はCocoonなどの設定でも簡単できますが、ファイル名の表示やコピーボタンの設置は少し設定が必要になります。

そんなときに「Highlighting Code Block」というプラグインを使用しましょう。

この記事では「Highlighting Code Block」についてご紹介します。

「Highlighting Code Block」でできること

Highlighting Code Blockと導入することで下記ができるようになります。

・ソースコードの行数を表示

・ソースコードをハイライト表示

・ソースコードのファイル名を表示

・ソースコードのコピーボタンを設置

プラグインの追加画面で、「Highlighting Code Block」を検索します。

そして、「今すぐインストール」、「有効化」を押します。

試しにHTMLのソースコードを表示してみます。

Highlighting Code Blockのボタンをクリックして、HTMLを選択します。

すると、このようなコードを入力する欄が表示されます。

pタグを書くと、このように表示されます。

クライックエディタの場合、右上のファイル名を変更する箇所がないので、テキストにして変更する必要があります。

data-langの部分を表示したいファイル名にすることで、右上のタブの表示を変更できます。

詳細設定は「設定」→「HCB設定」からできます。

言語名の表示・行数の表示・コピーボタンの設置などはこちらから設定できます。

Cocoonの高速化の設定で「JavaScript縮小化」をONにしている場合は、「Highlighting Code Block」がうまく機能しないことがあります。

そのため、Cocoonで「Highlighting Code Block」を使用するためには、縮小化しないファイルに「prism.js 」を指定する必要があります。