WordPress プラグイン Highlighting Code Block 対応言語 追加

今回は、WordPressのコード表示用プラグインのHighlighting Code Blockについてです。

https://wordpress.org/plugins/highlighting-code-block/

バージョン6.2.1の現在、標準の対応言語は以下となっています。

HTML
CSS
SCSS
JavaScript
TypeScript
PHP
Ruby
Python
Swift
C
C#
C++
Objective-C
SQL
JSON

上記以外にも、prism.jsでサポートされている言語は追加可能です。

https://prismjs.com/#supported-languages

 

設定ファイル(prism.js、prism.css)ダウンロード

まず、WordPressのメニューより、[HCB] 設定を開きます。

※[HCB]設定は、Highlighting Code Blockが有効になっていると表示されます。

WordPress menu Highlighting Code Block

WordPress menu Highlighting Code Block

ヘルプの部分に、設定ファイルの取得リンクが存在するので、そちらのリンクを開きます。

WordPress menu Highlighting Code Block

リンクを開いたら、

まず、追加したい対象のチェックボックスにチェックを入れます。

全てを選択するチェックボックスも存在しますが、ファイルサイズが大きくなるので注意が必要です。

prism.js config page

その後、DOWNLOAD JSボタンとDOWNLOAD CSSボタンを利用して、

設定ファイルprism.jsprism.cssをダウンロードします。

prism.js config page


使用する言語セット追加

続けて設定画面のところの使用する言語セットの部分を確認します。

WordPress menu Highlighting Code Block

デフォルトで選択可能な項目が指定されていますので、

こちらに追加したいものを追記します。

今回は、Javaを追加するために、java:”Java”,と追記しました。

WordPress menu Highlighting Code Block

命名方法は、以下のprism.jsの対応言語に記載されている文字列の形で指定します。

https://prismjs.com/#supported-languages


設定ファイル サーバー配置、設定ファイルパス指定

使用する言語セットの追加も行えたら、

設定ファイルである、prism.jsとprism.cssを、WordPressの実行サーバーに配置します。

FTP prism.js

今回は、FTPツールで配置しました。

FileZilla インストール FTP クライアント ツール mac

ファイルを配置したら、設定画面の独自カラーリングファイル独自prism.jsの部分に、

配置したパスと同じになるようにファイル名を記述します。

ディレクトリを新たに作成して配置した場合、

作成したディレクトリ名/prism.cssというような形で、ファイルを参照できるように指定します。

WordPress menu Highlighting Code Block

WordPress menu Highlighting Code Block

ここまで設定できたら、

一番下に配置されている変更を保存ボタンを押して設定を反映します。


設定が反映されない場合

私の環境では、これらの設定を行っても内容が反映されず、

追加した言語がCode Blockの選択肢に表示されないことがありました。

その際に、以下を試したところ反映されるようになりました。

  • 一度、WordPressからHighlighting Code Blockプラグインを削除し、再度インストール
  • ブラウザキャッシュを削除

反映されずにお困りの方は、上記を試してみてください。

また、FTPツールを使用してprism.js、prism.cssを配置した際に、

適切な権限がファイルとディレクトリに設定されていない場合、

ファイルの参照が正しく行われず、設定が反映されないこともあるかもしれません。

配置したファイル(prism.js、prism.css)と、配置したディレクトリの権限も確認してみてください。


今回のメモは以上となります。

Highlighting Code Blockは、更新が適宜行われているように見えます。

コードの記載方法はよく迷うのですが、

当面、しすろぐではこちらを利用することになると思います。

都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 163

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る