【WordPress】ブログ中のソースコードをハイライト表示（『Highlighting Code Block』）する手順

プログラミング関連のブログ記事では、サンプルのソースコードを記載することも多いと思います。

WordPressデフォルトでは、キーワードがハイライト表示されませんし、コードの行数も表示されません。

この記事では、WordPressの記事内のソースコードを見やすくするプラグイン『Highlighting Code Block』の紹介をします。

Highlighting Code Blockとは

『Highlighting Code Block』はWordPressの記事内のソースコードを見やすくするプラグインです。

『Highlighting Code Block』を使えば、ソースコードを以下のように修飾することでがきます。

• シンタックスハイライトが可能
• 行数を表示／非表示が可能
• コピーボタンの表示が可能
• 言語名の表示が可能

Highlighting Code Blockのインストール

『Highlighting Code Block』は下記のようにインストールします。

① WordPress管理画面から「ダッシュボード」→「プラグイン」→「新規追加」を選択します。

「キーワード」に「Highlighting Code Block」を入力すると、一番上に「Highlighting Code Block」が表示されます。「今すぐインストール」をクリックして、インストールを実施してください。

② 「有効化」ボタンをクリックします。

インストールが完了したら、「有効化」をクリックしてください。

Highlighting Code Blockの設定

『Highlighting Code Block』の設定はデフォルトのままで問題はないと思います。

もし変更をしたい場合は、下記の画面からおこないます。

① WordPress管理画面から「ダッシュボード」→「設定」→「[HCB設定」を選択します。

Highlighting Code Blockの使い方

① WordPressの記事の編集画面の「ブロックの追加」から『Highlighting Code Block』を選択します。

② コードの「言語」と「行数の表示の有無」を選択します。

③ 実際のイメージ

Highlighting Code Blockの表示パターン

void main{
 print("Hello World!");
}

void main{
 print("Hello World!");
}

まとめ

ソースコードをWordPressの記事に載せる場合は、『Highlighting Code Block』を使えばハイライト表示や行番号の表示などの表示を行うことができます。

プログラミング関連のブログを運営しているあなたに是非インストールして欲しいプラグインです。