WordPressのプラグインHighlighting Code Blockの言語セットにJavaを追加する方法について解説します。
Highlighting Code Blockとは
prism.jsを使用したシンタックスハイライト機能付きのコードブロックを生成することができるWordPressのプラグインです。Highlighting Code Blockを使用することで、以下のようにソースコードを見やすく記述することができます。
public class Main {
public static void main(String[] args) {
System.out.println("Highlighting Code Block");
}
}
Highlighting Code Blockの言語セットにJavaを追加する方法
使用する言語セットの一覧に java:”Java”, の記述を追加する
WordPressダッシュボードの「設定」から「[HCB] 設定」を選択する。
![](https://washboard.blog/wp-content/uploads/2022/01/HCB-設定.png)
使用する言語セットの入力欄に java:”Java”, の記述を追加する。
![](https://washboard.blog/wp-content/uploads/2022/01/使用する言語セット-1024x401.png)
prism.jsファイルをダウンロードする
ヘルプの「こちら」のリンク( prism.jsのダウンロードページ )を開く。
![](https://washboard.blog/wp-content/uploads/2022/01/ヘルプ-1024x71.png)
LanguagesのJavaのチェックボックスにチェックを入れる。
※他の項目はそのままにしておく。
![](https://washboard.blog/wp-content/uploads/2022/01/checkbox-Java-1024x264.png)
ページ下部の「DOWNLOAD JS」ボタンを選択し、prism.jsファイルをダウンロードする
![](https://washboard.blog/wp-content/uploads/2022/01/Download-JS-1024x101.png)
prism.jsファイルをサーバーにアップロードする
独自prism.jsを配置するディレクトリを確認する。
![](https://washboard.blog/wp-content/uploads/2022/01/独自prism.js-1024x80.png)
レンタルサーバーのユーザー専用ページより「FTP」を選択する。
![](https://washboard.blog/wp-content/uploads/2022/01/ロリポップ!FTP.png)
先ほど確認したディレクトリまで移動し、ダウンロードしたprism.jsファイルを「ファイルを選択する」→「アップロードする」の順でボタンを選択し、アップロードする。
※独自prism.jsのディレクトリとアップロードする場所が同じであることを確認
![](https://washboard.blog/wp-content/uploads/2022/01/アップロード-1024x578.png)
最後に、「変更を保存」を選択する。
![](https://washboard.blog/wp-content/uploads/2022/01/変更を保存.png)
コメント