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

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』
Highlighting Code Block Light
カラーリング『Dark』
Highlighting Code Block Light

インストール

Highlighting Code Block インストール

  1. 管理画面から プラグイン > 新規追加 とクリックする
  2. Highlighting Code Block“で検索する
  3. “今すぐインストール”をクリック。インストール後、有効化する

または、配布サイトからダウンロードして、インストール。
Highlighting Code Block – WordPress プラグイン | WordPress.org

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする […]

WordPressのプラグインをインストールする方法

使用方法

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

ツールバー内の【コードブロック】と表示されたプルダウンメニューをクリックし、言語を選択し『/* Your code… */』部分にコードを記述します。

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

Highlighting Code Block ビジュアルエディター

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

『フォーマット』内の【Highlighting Code Block】ブロックを追加します。
Highlighting Code Block ブロックエディター

追加したブロックにコードを記述し、言語を選択します。
Highlighting Code Block ブロックエディター

Lang Select 言語を選択
ファイル名 サイトに表示したコードブロックの右上に表示される。未入力で言語名を表示
data-line属性の値 入力した行番号が強調表示される

HCB設定

追加した【Highlighting Code Block】ブロックを選択し、行番号を表示するかを選択します。
Highlighting Code Block ブロックエディター

設定

基本設定

Highlighting Code Block 設定

高度な設定

Highlighting Code Block 設定

動作確認環境

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

まとめ

  • 【Highlighting Code Block】は、ソースコードをシンタックスハイライトするプラグイン。
  • 旧エディター、ブロックエディター(Gutenberg)の両エディターに対応しているので、エディターを気にせずにコードを記述することができます。
コードをシンタックスハイライト表示する【Highlighting Code Block】の使い方
最新情報をチェックしよう!
スポンサーリンク