WordPress の “Highlighting Code Block” で対応言語を追加する。

このブログのコードブロックでは “Highlighting Code Block” というプラグインを使っています。

がデフォルトで対応する言語はあまり多くありません。公式の説明では追加方法がわかりにくかったので調べてみまみました。

「ひいらぎナレッジ倉庫」さんのサイトによると新しく対応したい言語を追加したバージョンの Prism.js /Prism.css を追加する必要がありそうです。

ダウンロードとワードプレスへのアップロード

  1. WordPress で [設定] – [[HCB] 設定] に進み、ヘルプの 「こちら」 へリンクに進みます。
  2. Prism のダウンロードページが開くので、必要な言語をチェックしていきます。
  3. ページの下に進み、.js をダウンロードします。(.css は自分の環境では必要なさそうでした。)
  4. [HCB] 設定の [独自 Prism.js] フォルダの指し先に合うようにファイルをアップロードします。
    今回は [FQDN]/[ワードプレストップ]/wp-content/theme/[使用中のテーマ]/prism/prism.js
    になる場所にアップロードしました。
  5. 4. に合わせて [独自 Prism.js] にパスを指定します。
  6. [変更の保存] をクリックします。

対応言語の追加

今回は、XML と Kotlin を追加します。

同じく [HCB] 設定の [使用する言語セット] に以下の行を追加します。もともとの末尾に , がない場合はエラーになるので末尾に追加します。(PHP のハッシュや配列の場合、最後の要素に , が付いていてもエラーにならないので最初からつけておいたほうが簡単です。)

Kotlin: “Kotlin”,
xml: “XML”

これで、 Kotlin と XML を選択してハイライトできるようになった。

参考

Highlighting Code Blockで対応言語を追加する方法 | ひいらぎナレッジ倉庫