ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「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」で検索しても出てきます!

シンタックスハイライト機能付きコードブロックの挿入方法
プラグインが有効化できたら、ブロックエディタ・クラシックエディタの両方で シンタックスハイライト機能付きのコードブロックが簡単に挿入できるようになっています。
ブロックエディタでコードブロックを使用する
WordPress5からの新エディタ、ブロックエディタでの使用方法です。
エディタ内で「ブロックの追加ボタン」をクリックし、「一般ブロック」・「フォーマット」・「レイアウト要素」などのカテゴリの中から「フォーマット」を選択してください。
すると、以下のように「Highlighting Code Block」というブロックが選択できるようになっています。

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

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

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

h1タグにHello, World!を記述
投稿を一度保存し、記事の表示をみてみましょう。
以下のように、コードが綺麗に表示されています。

ラインハイライトの使用方法
ブロックエディタでは、ラインハイライト機能も簡単に使用できます。
例えば、先ほどのHTMLコードの2行目をハイライト表示させたい場合、以下のようにコードブロックの右下の入力エリアに「2」を入力します。

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


複数行のハイライト表示ももちろん可能です。
ラインハイライトの指定方法は Line highlight : How to use のページを参考にしてください。
クラシックエディタでコードブロックを使用する
エディタ上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているかと思います。
(2段目が隠れている場合は「ツールバーの切り替えボタン」にて表示させてください。)

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

試しに「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ファイルです。
- 上記ページから 追加したい言語にチェックを入れ、ページ下部でJSファイルをダウンロードしてください。
- ダウンロードしたファイル(prism.js)をテーマファイル内にアップロードします。
- 「高度な設定」->「独自prism.js」項目でアップロードしたファイルまでのパスを入力し、設定を保存します。
ここまで設定することで、自分専用の言語セットのprism.jsファイルが使用できるようになります!
アップデートによる追加機能
機能が追加されていけばここに更新して行こうと思います。
個別のコードブロックごとに「行数表示」の設定が可能になりました
初回ベータ版では、全ブロック共通の設定しかできませんでしたが、コードブロックごとに行数の表示をするかどうかを設定できるようになりました。

これにより、「1行のコードを記述するときは行数を表示したくない」など、の細かな設定が可能になります。
コードブロックに「ファイル名の表示」が可能になりました
コードブロックに「ファイル名」を設定するテキストエリアを追加しています。

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

クラシックエディターでファイル名を表示させたい時は、data-file="ファイル名"
をpreタグに追記してください。
コードのフォントファミリーが自由に設定できるようになりました
コードのフォントファミリーを自由に設定できるようにしてほしいとの要望を受け、設定画面にてフォントファミリーを設定できるようにしました。

HCBのコードブロックをテキストで呼び出せるように、キーワードを追加
Gutenbergでは段落の最初に/
を入力するとブロックを呼び出すことができます。
この時、/
に続けてキーワードを入力することで呼び出したいブロックを検索することもでき、HCBコードブロックは/hcb
または/code
で検索できるようになっています。(v.1.0.6から)
コメント
コメント一覧 (9件)
Amazing thanks
こちらのプラグインを使用させていただいているものです。
ソースコードを挿入するとハイライトされないようです。
CSS指定はHTMLを見るとされているのですが、ハイライトだけがされていません。
原因はありますでしょうか。
ご利用ありがとうございます!
問題の現象を確認できるページのURLを教えていただくことはできますでしょうか?
よろしくお願いいたします。
使用させていただいています。
簡単でかっこいいです、ありがとうございます!
ありがとうございます!使わさせていただきます。
このプラグインを使用させていただいております。
とても使い勝手がよく、重宝させていただいております。
一つ設定で困っていることがあります。
「使用する言語を増やす」の項目に従って言語の追加を行ったのですが、
エディターの”- Lang Select -“の項目がデフォルトのまま変更されません。
なにか対処しなくてはいけないことがありましたらご教授いただけると幸いです。
WordPress: Ver. 5.7.2
Highlighting Code Block: Ver. 1.2.9
行番号の開始番号を指定する事は可能でしょうか例えば、Prism.jsにてdata-start=”100″を指定した場合、
100行目から100,101,102と行が表示される機能の事です。
よろしくお願いいたします。
はじめまして、こんにちは。
Highlighting Code Blockのカラーリング設定について教えて下さい。
Darkにしても、文字の周りだけ四角く黒で囲われた状態になるだけで、背景はLightのままになってしまいます。
Lightの背景に、黒帯状のコードが貼り付けられてる状態。
エディタの方は通常にDarkで表示されます。フロントの方がこの様な現象です。
WordPress5.8 テーマ 「THOR」
ブロックエディタです。
[HCB]設定以外でどこか設定する場所があるのでしょうか。
こんばんは。
Highlighting Code Block、大変便利に使わせてもらっています。ありがとうございます。
ただ、ちょっと困っております。
高度な設定 > 追加 CSS クラス にclassを追加すると、class名が勝手に増殖して
WordPressが最終的にクラッシュするか、
「更新に失敗しました。データベース内の投稿を更新できませんでした。」というエラーがでるようです。
検証手順は次のとおりです。
1.Highlighting Code Blockの高度な設定 > [ 追加 CSS クラス ]にaaa(なんでもよい)というクラスを追加する
2.再編集する (更新する > 投稿を表示 > 投稿を編集)
3. [ 追加 CSS クラス をみると、なぜか、]aaa aaa と勝手に増えている
4. 記事を何回もブラッシュアップしているうちに、Wordpressが突然、クラッシュしました。
で、原因を調査していました。
少しカスタマイズして使っており、クラス名が追加できないと痛いので、ご相談させてもらえればと思いました。
環境:ブロックエディタ
バージョン 1.2.6では、この症状は発生しないことは確認済み。
バージョン 1.3.0の最新版のみで当方の環境では発生するようです。
少ししか確認していないけど、Highlighting Code Block以外の他のブロックでは発生しないようです。
再現しますでしょうか?何か勘違いがあればご指摘ください。
お忙しいかと思いますが、お手すきの際にお返事もらえると幸いです。