HTMLでもPHPでも何にしろ、ソースコードを載せる記事はコードがきれいに表示されていた方がいいものです。
コードが読みやすく色分け表示（シンタックスハイライト）されていれば、自分にとっても読み手にも分かりやすく優しいといえるでしょう。
【Highlighting Code Block】は記述したコードを色分け表示（シンタックスハイライト）することのできるプラグイン。
『prism.js』を使用しており、HTML、PHPをはじめとした17種類の言語に対応しています。
- 対応している言語
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
こんな場合におススメ
- コードをきれいに色分け表示（シンタックスハイライト）したい
- 『prism.js』を使用してシンタックスハイライトしたい
プラグインを使ってできること
- コードを『prism.js』を使用して、シンタックスハイライトする
- 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述できる
スポンサーリンク
目次
インストール
- 管理画面 > プラグイン > 新規追加 とクリックする
- Highlighting Code Blockで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]
使用方法
ブロックエディターの場合
- STEP1ブロックを追加『フォーマット』内の【Highlighting Code Block】ブロックを追加します。
- STEP2コードの記述追加したブロックにコードを記述します。
- STEP3言語を選択記述したコードの言語を選択し、ファイル名・data-line属性の値を指定します。（未入力可）
Lang Select 言語を選択 ファイル名 サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示 data-line属性の値 入力した行番号が強調表示される。強調しない場合は空欄にする - STEP4HCB設定【Highlighting Code Block】ブロックを選択すると『HCB設定』が表示されますので、行番号を表示するかを選択します。
- STEP5使用イメージ保存すると、コードがシンタックスハイライト表示されます。
ビジュアルエディター（旧エディター）の場合
- STEP1コードブロックをクリックツールバー内のコードブロックと表示されたプルダウンメニューをクリックし、言語を選択します。
- STEP2コードを記述『』部分にコードを記述します。
または、先にコードを記述し選択した状態でコードブロックから言語を選択します。
- STEP3テキストエディターに切り替え『data-lang』の値を編集すると、ファイル名を変更することができます。
- STEP4使用イメージ保存すると、コードがシンタックスハイライト表示されます。
スポンサーリンク
【Highlighting Code Block】の設定
- STEP1CODE BLOCKを開くプラグインを有効化すると、管理画面 > 設定 内に【CODE BLOCK】項目が追加されるので、そこから設定を行います。
- STEP2項目の設定
言語名の表示 サイトに表示したコードに言語名を表示するかの選択 行数の表示 サイトに表示したコードに行番号を表示するかの選択 フォントスムージング フォントスムージングをオンにするかの選択 コードカラーリング（サイト表示） サイトに表示したコードのカラーリングを選択 コードカラーリング（エディタ内） エディターのコードのカラーリングを選択 フォントサイズ（PC） PC上のフォントサイズを指定 font-family:
コードのフォントコードのフォントを指定 ブロックエディタのコンテンツ幅 ブロックエディターのコンテンツ幅を指定 使用する言語設定 言語の追加と削除を指定
削除する場合は、行ごと削除追加する場合『クラスキー:”言語名”』の形式で記述
※ デフォルトでサポートされていない言語を使用する場合、「独自prism.js」の設定と併用する独自カラーリングファイル コードのシンタックスハイライト表示を独自のものにしたい場合に、CSSファイル名を指定
（CSSファイルはテーマフォルダ内に置く）独自prism.js 独自にセットした『prism.js』を使用する場合、ファイル名を指定
（『prism.js』ファイルはテーマフォルダ内に置く） - STEP3保存項目を設定したら変更を保存します。
動作確認環境
- バージョン 1.0.7
- WordPress 5.3
まとめ
- 【Highlighting Code Block】は、ソースコードを色分け表示（シンタックスハイライト）するプラグイン。
- 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述することができます。
