【WordPress】Highlighting Code Blockで使える言語を追加する方法【Prism.js使用】

Highlighting Code Block (HCB) は、記事内にプログラミングコードがキレイに表示できて便利。

ところがデフォルトで使える言語は限られています。

例えば、以下のようなプログラミング言語はデフォルト対応していません。

本記事では、これらのプログラミング言語をHCBに追加する方法を解説します。

Highlighting Code Blockに新しい言語を追加する手順

Highlighting Code Block (HCB) は内部で Prism.js を使っています。

そのため、Prism.jsを自分用にカスタマイズしていく流れとなります。

1. Prism.jsをカスタムビルドする

Prismのダウンロードページの言語一覧から、HCBで使いたい言語にチェックを入れます。

その後、DOWNLOAD CSS, DOWNLOAD JSの二つをクリックしましょう。

JavaScriptファイル(.js)とCSSファイル(.css)の二つがダウンロードできたかを確認してください。

2. HCBの言語リストを編集する

WP管理画面 → [設定] → [HCB] 設定 →「使用する言語セット」を順番にクリックして下さい。

以下のように書き込んで、保存ボタンを押しましょう。

python:"Python",
php:"PHP",
vba:"VBA",
js:"JavaScript",
ts:"TypeScript",
html:"HTML",
css:"CSS",
sql:"SQL",
bash:"Bash",
git:"Git",
json:"JSON",
yaml:"YAML",
nginx:"Nginx",

python:"Python",
php:"PHP",
vba:"VBA",
js:"JavaScript",
ts:"TypeScript",
html:"HTML",
css:"CSS",
sql:"SQL",
bash:"Bash",
git:"Git",
json:"JSON",
yaml:"YAML",
nginx:"Nginx",

なお、コロン(:)の左側の文字列はPrism.jsが認識する言語キー名です。

Prism公式: Supported languages 一覧には、言語ごとの言語キー名が掲載されいています。参考にして下さい。

一方で、コロン(:)の右側の文字列はWordpressのHCBブロックエディタ内で表示されるメニュー名になります。

設定画面の下の方には、prism関係の入力フォームがあります。
以下のように設定しておきましょう。

3. prism.jsとCSSをテーマに設置する

1.でダウンロードしたJavaScriptファイルとCSSファイルを、以下のパスに保存します。

/wp-content/themes/{あなたの設定しているテーマ名}/prism.js
/wp-content/themes/{あなたの設定しているテーマ名}/prism.css

/wp-content/themes/{あなたの設定しているテーマ名}/prism.js
/wp-content/themes/{あなたの設定しているテーマ名}/prism.css

アップロードは、XServerの場合ならファイルマネージャを使いましょう。

保存したいフォルダに移動してから、アップロードボタンを押すことでJavaScriptやCSSファイルのアップロードができます。

これで、先ほど追加したプログラミング言語が表示されるようになります。

よくある失敗と対処法

HCBの設定はWordpress管理画面だけでは完結しないので、ハマりポイントがあります。

「おかしいな？」と思ったら、このセクションを参考にしてみて下さい。

コードの見た目が反映されない場合

PrismのダウンロードページからCSSファイルもダウンロードしたか、再度確認しましょう。

デフォルトでもある程度のスタイリングはしてくれますが、言語に合わせた見た目にするならCSSファイルのダウンロードも忘れずに行いましょう。

初見ではJavaScriptファイルのみ落としてしまいがちなので、要注意ポイントです。

言語が選択肢に表示されない場合

言語名の綴りが合っているか確認しましょう。

HCBの設定にあたっては、Prismのクラス名とする必要があります。

Prismのクラス名は、Prism公式: Supported languages 一覧に記載があります。

今一度、綴りに間違いがないか確認してみて下さい。

まとめ

HCBにプログラミング言語を追加する方法を解説してきました。

かなりの種類の言語に対応しているので、おそらくあなたがお探しのプログラミング言語も追加できるようになるはず。

ぜひ、本記事を参考にHCBをカスタマイズして素敵なWordpressライフをお過ごし下さい！