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』を使用して、シンタックスハイライトする
- 旧エディター、ブロックエディター（Gutenberg）の両エディターに対応しているので、エディターを気にせずにコードを記述できる
スポンサーリンク
目次
使用イメージ
カラーリング『Light』
カラーリング『Dark』
インストール
- 管理画面から プラグイン > 新規追加 とクリックする
- “Highlighting Code Block“で検索する
- “今すぐインストール”をクリック。インストール後、有効化する
または、配布サイトからダウンロードして、インストール。
Highlighting Code Block – WordPress プラグイン | WordPress.org
手動でインストールする方法はコチラ
関連記事
WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]
使用方法
ビジュアルエディター（旧エディタ）の場合
ツールバー内の【コードブロック】と表示されたプルダウンメニューをクリックし、言語を選択し『/* Your code… */』部分にコードを記述します。
または、先にコードを記述し選択した状態で【コードブロック】から言語を選択します。
ブロックエディター（Gutenberg）の場合
『フォーマット』内の【Highlighting Code Block】ブロックを追加します。
追加したブロックにコードを記述し、言語を選択します。
| Lang Select | 言語を選択 |
|---|---|
| ファイル名 | サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示 |
| data-line属性の値 | 入力した行番号が強調表示される |
HCB設定
追加した【Highlighting Code Block】ブロックを選択し、行番号を表示するかを選択します。
設定
基本設定
高度な設定
動作確認環境
- バージョン
- WordPress 5.2.2
まとめ
- 【Highlighting Code Block】は、ソースコードをシンタックスハイライトするプラグイン。
- 旧エディター、ブロックエディター（Gutenberg）の両エディターに対応しているので、エディターを気にせずにコードを記述することができます。