【WordPress/Diver】Highlighting Code Blockのプラグイン導入方法

2021年6月14日 2021年6月3日

itechsearchmanager

本記事の内容

Highlighting Code Blockとは
プラグインのインストール方法
使い方
完成形

Highlighting Code Blockとは

ブログ内にソースコードを貼り付けると読みづらい時がありますよね。

そんな時に使えるのが、Highlighting Code Blockというプラグインになります。

言語に見合った文字のカラーリングをしてくれる便利なプラグインとなっています。

Highlighting Code Blockを使った記事を載せておきます。

プラグインのインストール方法

①『アイテックサーチエンジン（自分のブログ名）』を選択します。

②『プラグイン』から『新規追加』を選択します。

③『プラグインを追加』から検索ボックスに『キーワード』を選択し、『Highlighting Code Block』と入力します。

④『Highlighting Code Block』の『今すぐインストール』を選択します。

⑤『Highlighting Code Block』の『有効化』を選択します。

⑥『Highlighting Code Block』が『有効』になっていればOKです。

使い方

①『アイテックサーチエンジン（自分のブログ名）』を選択します。

②『投稿』の『新規追加』を選択します。

③『+』を押して、検索ボックスで『Highlighing Code Block』※と検索し、『Highlighing Code Block』を選択します。

※スペルミスでしょうか。プラグイン名『Highlighting Code Block』を検索しても表示されませんの注意が必要です。

④ブロックエディターに『Highlighting Code Block』が表示されます。

⑤『- Lang Select -』から言語を指定します。

⑥『Your Code...』に自分のコードを貼り付けて、言語を選んでファイル名を入力します。

今回は直近で作ったプログラムのJavaScriptを貼り付けました。

⑦入力した結果がこちらです。

function run() {
    alert("start");
    document.getElementById("output_error").value = '';
    //入力フォームからデータを取得するクライアント側のOSによってCR,LF,CR+LFの場合があります。この為、1行目で正規化(全て\nに統一)させています。
    input_src.value = document.getElementById("input_src").value.replace(/\r\n|\r/g, "\n"); //入力されているデータから値を取得する
    alert(input_src.value.length);
    //ソースコードチェック
    output_src = check_src(input_src.value);

    //ソースコードを出力する
    document.getElementById("output_src").value = output_src;  //データから値を取得する
    alert("fin");
}