【WordPress】「Highlighting Code Block」に言語を追加する方法について

目次

「Highlighting Code Block」とは?

Highlighting Code Block」はWordPressのプラグインです。

プログラムのソースコードを記事内でシンタックスハイライト、色付きのビジュアル表示させます。

本ブログをテーマ「SWELL」の開発者が作成されており、とても使いやすく、デフォルトでは17言語対応しています。

「prism.js」でデフォルト言語以外を追加する

プログラミング言語は多数あります。

この17言語以外を表示させたい場合は、言語の追加をする必要があります。

このシンタックスハイライト部分の機能は、「prism.js」によってもたらされています

つまり「prism.js」を更新すれば、ハイライト言語の追加が可能です。

「Highlighting Code Block」の設定変更

「Highlighting Code Block」の設定画面へ移動します。

ダッシュボードの左メニュー「設定」から「[HCB]設定」を選択します。

「Highlighting Code Block」の設定画面へ

次に「高度な設定」から使用する言語を追加します。

今回はVBAを追加するので、「vba:”vba”と追記します。

クラスキーと言語名の追加

この後ダウンロードする「prism.js」を読み込むためのファイル名を設定します。

私の場合、「prism.js」の名前を変えて、「prism_excel-vba.js」という名前で保存する予定です。

最後に「変更を保存」をクリックして設定を保存します。

独自prism.jsの指定

「prism.js」をダウンロードする

設定画面の下に「こちら」と書かれたリンクがあります。

これをクリックします

「prism.js」のリンク

「prism.js」をダウンロードするページに移動します。

あわせて読みたい
Download ▲ Prism
「prism.js」ダウンロードページ

こちらで、シンタックスハイライトに必要な言語にチェックを入れます。

今回はVBAなので、VBAにチェックを入れます。

必要な言語にチェックを入れる

チェックを入れたら、「DOWNLOAD JS」をクリックして、「prism.js」をダウンロードします。

「prism.js」をダウンロード

「prism.js」をサーバーに設置する

先程ダウンロードした「prism.js」をサーバーに設置します。

設置場所は「<ワードプレスインストール先>/wp-content/themes/<使用テーマ>になります。

ファイル名は、先程の設定保存で指定したファイル名(今回の場合は「prism_excel-vba.js」)でアップロードします。

ファイルをアップロード

ハイライトが反映されているか確認する

設定変更して実際にシンタックスハイライトが反映されているか確認します。

反映されていれば作業は完了です。

シンタックスハイライトの確認
よかったらシェアしてね!
目次
閉じる