ソースコードを埋め込むプラグインである「Highlighting Code Block」では、デフォルトでサポートされていない言語も追加して使用することができます。
今回は、Java を例に、デフォルトでサポートされていない言語を追加する方法を紹介します。
前提
「Highlighting Code Block」をインストール済みであることが前提です。
未インストール の場合は、以下の記事をご参照ください。
言語を追加する手順
WordPressのメニューから、設定 > HCB設定 を選択します。
![[HCB]設定メニュー](https://hiyoko-programming.com/wp-content/uploads/2021/09/HCB_setting1.png)
「使用する言語セット」の設定項目に、java:”Java”, を追記して、変更を保存します。
![使用する言語セットにJavaを追記した画面](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java1-1024x480.png)
次に、「ヘルプ」の「こちら」を選択します。
![Highlighting Code Block設定のヘルプ](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java2-1024x87.png)
以下のページが開きます。
![prism.jsのダウンロードページ](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java3-1024x573.png)
追加したい言語にチェックを入れます。
![Javaにチェックを入れた画面](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java4-1024x428.png)
ページ下部の「DOWNLOAD JS」を選択して prism.js をダウンロードします。
![「DOWNLOAD JS」ボタンの表示位置](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java5-1024x573.png)
ダウンロードした prism.js をサーバーの指定された場所にアップロードして、
「独自prism.js」の設定項目に prism.js の場所を入力します。
![独自prism.jsの場所入力画面](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java6-1024x82.png)
入力後、「変更を保存」を選択して、完了です。
Java が使用可能になっているか確認すると、
言語選択で、Java が選択できるようになっています。
![Javaが追加されている言語選択画面](https://hiyoko-programming.com/wp-content/uploads/2021/09/add_java7.png)
また、Java のソースコードも、以下のようにカラーリングされるようになっています。
public class MainActivity extends AppCompatActivity {
@override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
まとめ
今回は、「Highlighting Code Block」で、サポートされていない言語を追加する方法を紹介しました。
Javaを例に紹介しましたが、他の言語も同様の手順で追加することができます。
以上で、【WordPress】Highlighting Code Block で言語を追加する方法 は終わりです。
コメント