コードをシンタックスハイライト表示する【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
コードの記述

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

Highlighting Code Block 使用方法 ブロックエディターの場合
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を開く

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

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

動作確認環境

  • バージョン 1.1.0
  • WordPress 5.4.1

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

まとめ

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