コードをシンタックスハイライト表示する【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』を使用して、シンタックスハイライトする
  • 旧エディター、ブロックエディターの両エディターに対応しているので、エディターを気にせずにコードを記述できる
スポンサーリンク

インストール

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

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

Highlighting Code Block

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

関連記事

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

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

使用方法

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

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

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

  • STEP2
    コードの記述
    追加したブロックにコードを記述します。
    Highlighting Code Block 使用方法 ブロックエディターの場合
  • STEP3
    言語を選択
    記述したコードの言語を選択し、ファイル名・data-line属性の値を指定します。(未入力可)

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

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

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

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

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

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

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

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

  • STEP2
    コードを記述
    『』部分にコードを記述します。

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

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

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

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

    Highlighting Code Block 使用方法 クラシックエディターの場合
    Highlighting Code Block 使用方法 クラシックエディターの場合
  • STEP4
    使用イメージ
    保存すると、コードがシンタックスハイライト表示されます。

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

スポンサーリンク

【Highlighting Code Block】の設定

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

    Highlighting Code Block 設定

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

動作確認環境

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

まとめ

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

他にシンタックスハイライト表示するプラグイン

コードをシンタックスハイライト表示する【Highlighting Code Block】の使い方
最新情報をチェックしよう!
スポンサーリンク