WordPressのコードハイライトHighlighting Code Blockプラグイン紹介

ソースコードをブログに掲載する時には、できるだけ見やすく掲載したいものです。
そのためにはシンタックスハイライトが必要となります。「Highlighting Code Block」はソースを綺麗に掲載するにはうってうけの WordPress プラグインで、今回はその特徴と使い方について説明していきます。

Highlighting Code Blockの特徴
インストール
使い方
Highlighting Code Blockの設定
1. 設定
2. 高度な設定
  1. 対応言語の追加
  2. 配色パターンの追加
まとめ

Highlighting Code Blockの特徴

特徴

「Highlighting Code Block」はソースコードのシンタックスハイライトを可能にするプラグインです。シンタックスハイライトとは、ソースコードの「色・行間・フォント・インデント」等を装飾し、強調表示する機能のことを指します。このプラグインを使うと、以下のようにソースコードを美しく、読みやすく表示できます。

<?php
function custom_main_query($query){
    if(is_admin() || ! $query->is_main_query()):
        return;
    endif;
    if($query->is_home()):
       $query->set('posts_per_page',5);
    endif;
}
add_action('pre_get_posts','custom_main_query');
?>

このプラグインはデフォルトで17種類のプログラミング言語をサポートし、自分好みのカラーリングに変更することが可能です。
また、「ブロックエディター（Gutenberg）」と「旧エディター（Classic Editor）」の両方に対応しており、使用するエディターを選ばないのも特徴です。

対応言語

デフォルトで対応しているプログラミング言語は以下の通りです。

HTML
CSS
SCSS
JavaScript
TypeScript
PHP
Ruby
Python
Swift
C
C#
C
Objective-C
SQL
JSON
Bash
Git

カラーテーマ

「Highlighting Code Block」プラグインはデフォルトで2つのカラーリング、つまり「Light」と「Dark」のテーマに対応します。

Light テーマ

Dark テーマ

対応していない言語や、カラーテーマも設定を追加すれば追加することができます。

インストール

「Highlighting Code Block」は WordPress の管理画面からインストールすることが可能です。

まずは、WordPress の管理画面にアクセスし、「プラグイン」のセクションをクリックします。次に、「新規追加」を選択し、キーワード欄に「Highlighting Code Block」を入力します。見つかったら、「今すぐインストール」をクリックし、「Highlighting Code Block」のインストールを行います。

インストールが完了したら忘れずに「有効化」することを確認しましょう。これで、「Highlighting Code Block」が使用可能となります。

使い方

ブロックエディター（Gutenberg）での使用例を紹介します。WordPress の投稿画面でブロックを追加する際、「Highlighting Code Block」を選択します。

次のように、記述用のブロックにソースコードを入力します。

「Your Code…」にソースコードを記述します。
「Lang Select」：ソースコードの言語名を選択します。
「ファイル名」：ファイル名の表示が可能なので、ファイル名がある場合記述します。
「data-line属性値」：対象行を指定してハイライトできます。「6」と指定すると6行目がハイライトされます。

また、読者にとって便利なコードのコピー機能も備えています。ブログ画面で右上のアイコンをクリックすると、コードを丸ごとコピーすることができます。

Highlighting Code Blockの設定

設定

設定は、WordPressの管理画面から「設定」→「HCB設定」で確認できます。基本設定では、「言語名の表示、行数表示、コピーボタン表示、カラーリング、フォントサイズ、フォントの種類など」を調整できます。
「Light」「Dark」の2種類からカラーリングを選ぶことができます。

高度な設定

高度な設定では、デフォルトでサポートされていない言語の追加やカラーリングの変更を行うことが可能です。

「Highlighting Code Block」プラグインでは、例えば Java 言語のハイライト表示や配色パターンのカスタマイズが可能です。ただし、デフォルトの設定ではこれらはサポートされていませんので、「prism.js」をカスタマイズして使用する必要があります。以下にその手順をまとめます。

対応言語の追加

WordPressの「設定」から「[HCB]設定」を選択します。

「ヘルプ」の「こちら」のリンクをクリックして、リンク先のページで「Language」オプションを見つけます。
「Language」から Java 言語にチェックを入れ、他の必要な言語も選択します。
画面一番下の「DOWNLOAD JS」および「DOWNLOAD CSS」をクリックして、必要なファイルをダウンロードします。
ダウンロードしたファイルをサーバーに FTP でアップロードします。この時、アップロード先は使用中のテーマ内の任意の場所に設定します（例えば「/wp-content/themes/テーマ名/」）など。
アップロードしたパス、ファイル名を「[HCB]設定」内の「独自カラーリングファイル」「独自prism.js」に入力します。
「使用する言語セット」に Java 言語を追加します。具体的には、「java :”Java”,」と入力します。
変更を保存します。