WordPressでソースコードの記述がめちゃくちゃ簡単に！新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方

ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。

クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。

カラーリングは現在「Light」と「Dark」の2種類。

カラーリングの例

このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます！

シンタックスハイライトの機能自体は「prism.js」を使っています。（より良いカラーリングができるように少しだけ追加処理を加えています。）

また、使用できる言語も幅広く、以下の言語が標準でサポートされています。

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

この他の言語も、設定によって使用可能です。

インストール方法

現在、公式プラグインリポジトリへの登録申請中ですので、インストールは以下のzipファイルをダウンロードしてお使いください。

無事、申請が通りました。

プラグインの新規追加画面から、「Highlighting Code Block」で検索しても出てきます！

シンタックスハイライト機能付きコードブロックの挿入方法

プラグインが有効化できたら、ブロックエディタ・クラシックエディタの両方で シンタックスハイライト機能付きのコードブロックが簡単に挿入できるようになっています。

ブロックエディタでコードブロックを使用する

WordPress５からの新エディタ、ブロックエディタでの使用方法です。

エディタ内で「ブロックの追加ボタン」をクリックし、「一般ブロック」・「フォーマット」・「レイアウト要素」などのカテゴリの中から「フォーマット」を選択してください。

すると、以下のように「Highlighting Code Block」というブロックが選択できるようになっています。

この「Highlighting Code Block」をクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ラインハイライト指定エリア」がセットとなったブロックが追加されます。

左下の「言語選択ボックス」からお好きな言語を選択してください。

言語選択の様子

例として「HTML」を選択し、簡単なコードを書いてみます。

h1タグにHello, World！を記述

投稿を一度保存し、記事の表示をみてみましょう。

以下のように、コードが綺麗に表示されています。

ラインハイライトの使用方法

ブロックエディタでは、ラインハイライト機能も簡単に使用できます。

例えば、先ほどのHTMLコードの２行目をハイライト表示させたい場合、以下のようにコードブロックの右下の入力エリアに「2」を入力します。

すると、以下のように、２行目のコードがハイライト表示されます！

複数行のハイライト表示ももちろん可能です。

ラインハイライトの指定方法は Line highlight : How to use のページを参考にしてください。

クラシックエディタでコードブロックを使用する

エディタ上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているかと思います。
（２段目が隠れている場合は「ツールバーの切り替えボタン」にて表示させてください。）

このセレクトボックスで、お好きな言語を選択できます。

試しに「HTML」を選択してみると、以下のようにコードブロックが挿入されます。

/* Your code... */の部分を削除してコードを記述してください。

すでにコードをエディタに書いておき、それらを選択した状態でコードブロックを選択することも可能です。

選択した状態でセレクトボックスから言語を選択すると、以下のようにコードブロックで選択範囲がラッピングされます。

ラインハイライトの使用方法

クラシックエディタでラインハイライトを指定する場合は、テキストエディタにて、preタグに直接 data-line属性を追記してください。

data-line属性の指定方法は Line highlight : How to use のページを参考にしてください。

コードブロックから抜け出す方法

コードブロック内で通常のエンターキーで改行を重ねてもコードブロックからは抜け出せません。

カーソルキーの「→」または「↓」で抜け出してください。（もしくは「Shiftキーを押しながらの改行」でも可）

クラシックエディタでのコピペに関する注意

クラシックエディタでコードブロック内にコードをコピペする場合、

普通のCtrl + Vのペーストではなく、Shift + Ctrl + Vのペーストを使ってください。

もしくは、右クリックで「ペーストしてスタイルを合わせる」を選択してペーストしてください。

また、複数行に渡るコードをコピペする時、空白行がテキストに含まれているとうまくコードブロック内にペーストされません。

OK（h1タグとpタグの間の行が空いていない）

<h1>
    Hello, World
</h1>
<p>hoge</p>

NG（h1タグとpタグの間の行が空いている）

<h1>
    Hello, World
</h1>

<p>hoge</p>

長いコードを挿入したい場合は、「テキストエディタ」に切り替え、pre > codeタグの中へペーストしてください。

各種設定について

このプラグインでの各種設定について簡単に説明しておきます。

「Highlighting Code Block」に関する設定は、「設定」項目内の「CODE BLOCK」項目から可能です。

基本設定

基本的な機能として、以下のような設定ができます。

• コードブロックに言語名を表示するかどうか（デフォルト：表示する）
• コードの行数を表示するかどうか（デフォルト：表示する）
• フォントスムージングのオン・オフ（デフォルト：オフ）
• サイト表示側のコードカラーリング（デフォルト：Light）
• エディタでのコードカラーリング（デフォルト：Light）
• コードのフォントサイズ（PC）（デフォルト：14px）
• コードのフォントサイズ（SP）（デフォルト：13px）
• ブロックエディタの最大幅の指定（デフォルト：指定なし）

設定画面のスクリーンショット

高度な設定

次に、「基本設定」の下にある「高度な設定」に関する説明をしていきます。

設定画面のスクリーンショット

使用する言語を減らしたい場合

「使用する言語設定」項目の内容を編集し、不要な言語の行を削除してください。

例えば、以下のような設定にした場合、

「使用する言語設定」

コードブロックでの言語選択セレクトボックスで表示される言語が上記の設定に合わせて減少します。

使用する言語を増やしたい場合

標準でサポートされている言語以外も使用することもできます。

「使用する言語設定」項目にて、prismでのクラス名："言語の表示名"という形式で言語を追加できます。

複数言語を追加する場合は、必ず,区切りで言語設定は増やしてください。

「prismでのクラス名」は Prism:Supported languages のページで確認してください。

例：PerlとGoも選択できるようにする

html:"HTML",
css:"CSS",
.
.
.
perl:"Perl",
go:"Go",

こうすることで、セレクトボックスの言語リストに項目が追加されます。

ただ、これだけではまだシンタックスハイライトは有効になっていません。

読み込むprism.jsファイル（シンタックスハイライトを実行するスクリプト）も変更する必要があります。

デフォルトで読み込んでいるprism.jsファイルはこちらのページでダウンロードできるJSファイルです。

1. 上記ページから 追加したい言語にチェックを入れ、ページ下部でJSファイルをダウンロードしてください。
2. ダウンロードしたファイル（prism.js）をテーマファイル内にアップロードします。
3. 「高度な設定」->「独自prism.js」項目でアップロードしたファイルまでのパスを入力し、設定を保存します。

ここまで設定することで、自分専用の言語セットのprism.jsファイルが使用できるようになります！

アップデートによる追加機能

機能が追加されていけばここに更新して行こうと思います。

個別のコードブロックごとに「行数表示」の設定が可能になりました

初回ベータ版では、全ブロック共通の設定しかできませんでしたが、コードブロックごとに行数の表示をするかどうかを設定できるようになりました。

これにより、「１行のコードを記述するときは行数を表示したくない」など、の細かな設定が可能になります。

コードブロックに「ファイル名の表示」が可能になりました

コードブロックに「ファイル名」を設定するテキストエリアを追加しています。

実際の表示は以下のようになります。

クラシックエディターでファイル名を表示させたい時は、data-file="ファイル名" をpreタグに追記してください。

コードのフォントファミリーが自由に設定できるようになりました

コードのフォントファミリーを自由に設定できるようにしてほしいとの要望を受け、設定画面にてフォントファミリーを設定できるようにしました。

HCBのコードブロックをテキストで呼び出せるように、キーワードを追加

Gutenbergでは段落の最初に/を入力するとブロックを呼び出すことができます。

この時、/に続けてキーワードを入力することで呼び出したいブロックを検索することもでき、HCBコードブロックは/hcbまたは/codeで検索できるようになっています。（v.1.0.6から）