WordPress上でコードをいい感じにハイライトしてくれるプラグイン、Highlighting Code Blockはとても便利です。
対応言語が初期状態では限られていますが、あとからprism.jsというファイルを設定することで追加可能です。
検索するとFTPを使って設定をする方法が多く見つかりましたが、FTPを使いたくなかったのでSSHのみで設定した方法を記録します。
環境
- Webサーバー：CentOS / Nginx
手順
[HCB設定]を開く
WordPress管理画面に入り「設定」→「[HCB]設定」の順にクリックします。
「Highlighting Code Block 設定」画面が開きます。
[高度な設定]を確認する
「使用する言語セット」のところに、初期状態で対応している言語が並んでいます。
ここに追加するだけで終わりかと思いきや、そう簡単にはいきません。
例えば 対応言語にYAML を追加するため「yaml:"YAML",」と行追加したとしても、ハイライト表示はされません…。
HCBプラグインは、prism.jsというファイルを読み込んでシンタックスハイライトしているのですが、最初から使用しない言語まで対応させると、不必要に処理が重くなってしまいます。
そのため、自分にとって必要最小限の言語分だけ書かれたprism.jsファイルを用意する仕様になっているのです。
用途に合うprism.jsファイルを以下の手順で入手して設定しましょう。
prism.jsをダウンロードする
ダウンロードサイトへ移動する
「ヘルプ」のところをみると、以下の記載がありますので「こちら」の部分をクリックします。
※ 現在読み込んでいるprism.jsファイルは、 こちら でダウンロードできます。
このようなサイトが表示されます。
追加する言語にチェックを入れる
「Languages」のところで、使いたい言語にチェックを入れます。
初期状態から利用可能な言語には最初からチェックが入っています。
ダウンロードする
ページ下部の「DOWNLOAD JS」をクリックすると、prism.jsファイルがダウンロードされます。
WordPressサーバーへ格納する
HCB設定画面の「独自prism.js」に記載されている場所の配下にprism.jsファイルを格納して、設定する必要があります。
具体的にはサーバーの以下の場所です。
<ドキュメントルート>/wp-content/themes/<テーマ名>/scpコマンドでファイル転送
Macでダウンロードしたので、サーバーにファイル転送します。
cd <転送するprism.jsファイルの格納先ディレクトリ>
scp prism.js <接続先ユーザー名>@<接続先ホスト名orIPアドレス>:~/scpコマンド(ssh接続を使ったファイル転送コマンド)を使い、書き込み権限のある場所（例えばユーザーのホームディレクトリ;”~/”）にprism.jsを格納しています。
ファイル転送処理が終わったら、サーバーにSSHログインします。
ssh <接続先ユーザー名>@<接続先ホスト名orIPアドレス>scpコマンドで転送したファイルを正しい場所に移動します。
cd <ドキュメントルート>/wp-content/themes/<テーマ名>/
sudo mkdir hcb
sudo mv ~/prism.js hcb/ファイル所有者を変更
私の環境ではWebサーバーにNginxを使用しているため、所有者・グループを”nginx”に変更します。
sudo chown -R nginx:nginx <ドキュメントルート>/wp-content/themes/<テーマ名>/hcb/パーミッション変更
ファイルのパーミッションも正しく設定します。
sudo chmod 644 <ドキュメントルート>/wp-content/themes/<テーマ名>/hcb/prism.js[高度な設定]を設定する
[独自prism.js]を設定
独自prism.jsに、「hcb/prism.js」を指定します。
[使用する言語セット]を設定
末尾に追加したい言語を追加します。
行の最後の”,”を忘れないようにしてください。
<クラスキー>:"<言語名>",
以上で全ての設定は完了です！
いつも通りHCBブロックで「- Lang Select -」をクリックすると、追加した言語が選べると思います。
補足
CentOSの場合、上記手順だけだとprism.jsが「403 Forbidden」になってしまったのですが、SELinuxが原因でした…。
下記記事と同様にchconコマンドを実行したら直りました。
コメント