Cocoonでソースコードをハイライト表示する

WordPressのテーマ「Cocoon」にはhighlight.jsが組み込まれており、ソースコードのハイライト表示ができます。ここでは、Cocoonの標準機能を使用したソースコードのハイライト表示のやり方を紹介します。プラグインの導入は不要です。

事前準備（Cocoonの設定）

WordPressの管理画面から「Cocoon設定」を開き、以下の設定を行います。

1. 「コード」タブを選択
2. 「ソースコードをハイライト表示」のチェックをON
3. 「行番号表示」はお好みでONに。ONにすると行番号が表示されます。
4. ライブラリは「軽量版」「全て」のどちらかを選択。
   メジャーな言語は「軽量版」に含まれていますが、マイナーな言語を使う場合は「全て」にチェックを入れます。「軽量版」に含まれている言語は、ページ下の一覧を見てください。
5. 「変更をまとめて保存」ボタンを押し、設定を完了。

記事の編集

ソースコードをハイライト表示するには、ブロックエディタで「コード」ブロックを挿入します。

コードブロック挿入後にソースコードを書き、ブロックの設定で「言語」の設定をします。

適した言語がない場合は「高度な設定」→「追加cssクラス」にhighlight.jsで定義されている言語のAliasを指定することで指定言語のハイライト表示が可能になります。

cssクラスに指定可能なAliasの一覧は下の表を見てください。

ハイライト表示可能な言語の一覧

highlight.js の languages フォルダにあるソースコード名が class に指定する言語の名前になっています。

highlight.js：https://github.com/highlightjs/highlight.js/tree/main/src/languages

highlight.jsでサポートしている言語は以下の通りです。（2022.01.28 時点）
「言語」は言語の名称、「Alias」はブロックエディタの追加CSSに指定可能な名称、「軽量版に含まれる」が○のものはCocoon設定のライブラリ「軽量版」に含まれる言語です。○が付いていない言語を使いたい場合は、Cocoon設定でライブラリに「全て」を選択してください。

言語の一覧（2022.01.28 時点）