コードをシンタックスハイライト表示する【Highlighting Code Block】

HTMLでもPHPでも何にしろ、ソースコードを載せる記事はコードがきれいに表示されていた方がいいものです。

コードが読みやすく色分け表示(シンタックスハイライト)されていれば、自分にとっても読み手にも分かりやすく優しいといえるでしょう。

Highlighting Code Block】は記述したコードを色分け表示(シンタックスハイライト)することのできるプラグイン。

prism.js』を使用しており、HTML、PHPをはじめとした17種類の言語に対応しています。

こんな場合にオススメ
  • コードをきれいに色分け表示(シンタックスハイライト)したい
  • 『prism.js』を使用してシンタックスハイライトしたい
プラグインを使ってできること
  • コードを『prism.js』を使用して、シンタックスハイライトする
  • 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述できる
目次

インストール

Highlighting Code Block インストール
Highlighting Code Block インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Highlighting Code Blockで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

使用方法

ブロックエディターの場合

STEP
ブロックを追加

『テキスト』内の【Highlighting Code Block】ブロックを追加します。

Highlighting Code Block 使用方法
STEP
コードの記述

追加したブロックにコードを記述します。

STEP
言語を選択

記述したコードの言語を選択し、ファイル名・data-line属性の値を指定します。(未入力可)

Highlighting Code Block 使用方法
Lang Select言語を選択
ファイル名サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示
data-line属性の値入力した行番号が強調表示される。強調しない場合は空欄にする
STEP
HCB設定

【Highlighting Code Block】ブロックを選択すると『HCB設定』が表示されますので、行番号を表示するかを選択します。

Highlighting Code Block 使用方法
STEP
使用イメージ

保存すると、コードがシンタックスハイライト表示されます。

Highlighting Code Block 使用方法

ビジュアルエディター(旧エディター)の場合

STEP
コードブロックをクリック

ツールバー内のコードブロックと表示されたプルダウンメニューをクリックし、言語を選択します。

Highlighting Code Block 使用方法 クラシックエディターの場合
STEP
コードを記述

『/* Your code… */』部分にコードを記述します。

Highlighting Code Block 使用方法 クラシックエディターの場合
Highlighting Code Block 使用方法 クラシックエディターの場合

または、先にコードを記述し選択した状態でコードブロックから言語を選択します。

Highlighting Code Block 使用方法 クラシックエディターの場合
STEP

テキストエディターに切り替え『data-lang』の値を編集すると、ファイル名を変更することができます。

Highlighting Code Block 使用方法 クラシックエディターの場合
Highlighting Code Block 使用方法 クラシックエディターの場合
STEP
使用イメージ

保存すると、コードがシンタックスハイライト表示されます。

Highlighting Code Block 使用方法

【Highlighting Code Block】の設定

STEP
CODE BLOCKを開く

プラグインを有効化すると、管理画面 > 設定 内に【[HCB]設定】項目が追加されるので、そこから設定を行います。

Highlighting Code Block 設定
STEP
項目の設定
Highlighting Code Block 設定
Highlighting Code Block 設定
言語の設定サイトに表示したコードに言語名を表示するかの選択
行数の表示設定サイトに表示したコードに行番号を表示するかの選択
コピーボタンコードブロックにコピーボタンを表示するかの選択
フォントスムージングフォントスムージングをオンにするかの選択
コードカラーリング(フロント側)サイトに表示したコードのカラーリングを選択
コードカラーリング(エディター側)エディターのコードのカラーリングを選択
フォントサイズ(PC
PC上のフォントサイズを指定
フォントサイズ(SP
スマホ上のフォントサイズを指定
コードの”font-family”コードのフォントを指定
使用する言語セット言語の追加と削除を指定 削除する場合は、行ごと削除追加する場合『クラスキー:”言語名”』の形式で記述 ※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」の設定と併用する
独自カラーリングファイルコードのシンタックスハイライト表示を独自のものにしたい場合に、CSSファイル名を指定 (CSSファイルはテーマフォルダ内に置く)
独自prism.js独自にセットした『prism.js』を使用する場合、ファイル名を指定 (『prism.js』ファイルはテーマフォルダ内に置く)
STEP
保存
項目を設定したら変更を保存します。

動作確認環境

  • バージョン 1.2.9
  • WordPress 5.7.2

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Highlighting Code Block】は、ソースコードを色分け表示(シンタックスハイライト)するプラグイン。
  • 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述することができます。
他にシンタックスハイライト表示するプラグイン
よかったらシェアしてね!
目次
閉じる