WEB制作者向け無料テーマ「Arkhe」をリリースしました

WordPressでソースコードの記述がめちゃくちゃ簡単に!新旧エディタに対応のシンタックスハイライター「Highlighting Code Block」の使い方

ブロックエディター・旧エディターの両方に対応しているシンタックスハイライトプラグイン、「Highlighting Code Block」の使い方を紹介します。

クリックだけでコードブロックを簡単に挿入でき、選択した言語に合わせてシンタックスハイライトしてくれます。

カラーリングは現在「Light」と「Dark」の2種類。

カラーリングの例
カラーリングの例

カラーリングの例

このような格好いい表示のコードブロックがめちゃくちゃ簡単に使用できます!

シンタックスハイライトの機能自体は「prism.js」を使っています。(より良いカラーリングができるように少しだけ追加処理を加えています。)

また、使用できる言語も幅広く、以下の言語が標準でサポートされています。

  • HTML
  • CSS
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Ruby
  • Python
  • Swift
  • C
  • C#
  • C++
  • Objective-C
  • SQL
  • JSON
  • Bash
  • Git

この他の言語も、設定によって使用可能です。

目次

インストール方法

現在、公式プラグインリポジトリへの登録申請中ですので、インストールは以下のzipファイルをダウンロードしてお使いください。

無事、申請が通りました。

Highlighting Code Block
Highlighting Code Block

プラグインの新規追加画面から、「Highlighting Code Block」で検索しても出てきます!

プラグイン検索画面でのHCB
こんな見た目のやつです

シンタックスハイライト機能付きコードブロックの挿入方法

プラグインが有効化できたら、ブロックエディタ・クラシックエディタの両方で シンタックスハイライト機能付きのコードブロックが簡単に挿入できるようになっています。

ブロックエディタでコードブロックを使用する

WordPress5からの新エディタ、ブロックエディタでの使用方法です。

エディタ内で「ブロックの追加ボタン」をクリックし、「一般ブロック」・「フォーマット」・「レイアウト要素」などのカテゴリの中から「フォーマット」を選択してください。

すると、以下のように「Highlighting Code Block」というブロックが選択できるようになっています。

Highlighting Code Blockの選択
Highlighting Code Blockの選択

この「Highlighting Code Block」をクリックすると、次のような「コード入力エリア」・「言語選択ボックス」・「ラインハイライト指定エリア」がセットとなったブロックが追加されます。

Highlighting Code Block初期状態
Highlighting Code Block初期状態

左下の「言語選択ボックス」からお好きな言語を選択してください。

言語選択の様子
言語選択の様子

言語選択の様子

例として「HTML」を選択し、簡単なコードを書いてみます。

HTMLの入力
HTMLの入力

h1タグにHello, World!を記述

投稿を一度保存し、記事の表示をみてみましょう。

以下のように、コードが綺麗に表示されています。

カラーリング設定が「Light」の場合の表示
カラーリング設定が「Light」の場合の表示

ラインハイライトの使用方法

ブロックエディタでは、ラインハイライト機能も簡単に使用できます。

例えば、先ほどのHTMLコードの2行目をハイライト表示させたい場合、以下のようにコードブロックの右下の入力エリアに「2」を入力します。

ハイライト行の入力
ハイライト行の入力

すると、以下のように、2行目のコードがハイライト表示されます!

ラインハイライトの様子(ライトカラー)
ラインハイライトの様子(ライトカラー)
ラインハイライトの様子(ダークカラー)
ラインハイライトの様子(ダークカラー)

複数行のハイライト表示ももちろん可能です。

ラインハイライトの指定方法は Line highlight : How to use のページを参考にしてください。

クラシックエディタでコードブロックを使用する

エディタ上部のツールバーに「コードブロック」と表示されたセレクトボックスが追加されているかと思います。
(2段目が隠れている場合は「ツールバーの切り替えボタン」にて表示させてください。)

ツールバーにセレクトボックスが追加されている
ツールバーにセレクトボックスが追加されている

このセレクトボックスで、お好きな言語を選択できます。

言語選択画面
言語選択画面

試しに「HTML」を選択してみると、以下のようにコードブロックが挿入されます。

コードブロック挿入後の画面
コードブロック挿入後の画面

/* Your code... */の部分を削除してコードを記述してください。

すでにコードをエディタに書いておき、それらを選択した状態でコードブロックを選択することも可能です。

コードブロック化させたいエリアを選択
コードブロック化させたいエリアを選択

選択した状態でセレクトボックスから言語を選択すると、以下のようにコードブロックで選択範囲がラッピングされます。

選択した範囲がコードブロックに!
選択した範囲がコードブロックに!

ラインハイライトの使用方法

クラシックエディタでラインハイライトを指定する場合は、テキストエディタにて、preタグに直接 data-line属性を追記してください。

data-line属性の指定方法は Line highlight : How to use のページを参考にしてください。

コードブロックから抜け出す方法

コードブロック内で通常のエンターキーで改行を重ねてもコードブロックからは抜け出せません。

カーソルキーの「→」または「↓」で抜け出してください。(もしくは「Shiftキーを押しながらの改行」でも可)

クラシックエディタでのコピペに関する注意

クラシックエディタでコードブロック内にコードをコピペする場合、

普通のCtrl + Vのペーストではなく、Shift + Ctrl + Vのペーストを使ってください。

もしくは、右クリックで「ペーストしてスタイルを合わせる」を選択してペーストしてください。

また、複数行に渡るコードをコピペする時、空白行がテキストに含まれているとうまくコードブロック内にペーストされません。

OK(h1タグとpタグの間の行が空いていない)

<h1>
    Hello, World
</h1>
<p>hoge</p>

NG(h1タグとpタグの間の行が空いている)

<h1>
    Hello, World
</h1>

<p>hoge</p>

長いコードを挿入したい場合は、「テキストエディタ」に切り替え、pre > codeタグの中へペーストしてください。

各種設定について

このプラグインでの各種設定について簡単に説明しておきます。

「Highlighting Code Block」に関する設定は、「設定」項目内の「CODE BLOCK」項目から可能です。

「CODE BLOCK」項目
「設定」 ->  「CODE BLOCK」

基本設定

基本的な機能として、以下のような設定ができます。

  • コードブロックに言語名を表示するかどうか(デフォルト:表示する)
  • コードの行数を表示するかどうか(デフォルト:表示する)
  • フォントスムージングのオン・オフ(デフォルト:オフ)
  • サイト表示側のコードカラーリング(デフォルト:Light)
  • エディタでのコードカラーリング(デフォルト:Light)
  • コードのフォントサイズ(PC)(デフォルト:14px)
  • コードのフォントサイズ(SP)(デフォルト:13px)
  • ブロックエディタの最大幅の指定(デフォルト:指定なし)
HCBの設定画面のスクリーンショット
HCBの設定画面のスクリーンショット:基本設定

設定画面のスクリーンショット

高度な設定

次に、「基本設定」の下にある「高度な設定」に関する説明をしていきます。

HCB設定画面のスクリーンショット
HCB設定画面のスクリーンショット:高度な設定

設定画面のスクリーンショット

使用する言語を減らしたい場合

「使用する言語設定」項目の内容を編集し、不要な言語の行を削除してください。

例えば、以下のような設定にした場合、

HCBで使用する言語の設定
HCBで使用する言語の設定

「使用する言語設定」

コードブロックでの言語選択セレクトボックスで表示される言語が上記の設定に合わせて減少します。

コードブロックでの言語選択画面
コードブロックでの言語選択画面

使用する言語を増やしたい場合

標準でサポートされている言語以外も使用することもできます。

「使用する言語設定」項目にて、prismでのクラス名:"言語の表示名"という形式で言語を追加できます。

複数言語を追加する場合は、必ず,区切りで言語設定は増やしてください。

「prismでのクラス名」は Prism:Supported languages のページで確認してください。

例:PerlとGoも選択できるようにする

html:"HTML",
css:"CSS",
.
.
.
perl:"Perl",
go:"Go",

こうすることで、セレクトボックスの言語リストに項目が追加されます。

ただ、これだけではまだシンタックスハイライトは有効になっていません。

読み込むprism.jsファイル(シンタックスハイライトを実行するスクリプト)も変更する必要があります。

デフォルトで読み込んでいるprism.jsファイルはこちらのページでダウンロードできるJSファイルです。

  1. 上記ページから 追加したい言語にチェックを入れ、ページ下部でJSファイルをダウンロードしてください。
  2. ダウンロードしたファイル(prism.js)をテーマファイル内にアップロードします。
  3. 「高度な設定」->「独自prism.js」項目でアップロードしたファイルまでのパスを入力し、設定を保存します。

ここまで設定することで、自分専用の言語セットのprism.jsファイルが使用できるようになります!

アップデートによる追加機能

機能が追加されていけばここに更新して行こうと思います。

個別のコードブロックごとに「行数表示」の設定が可能になりました

初回ベータ版では、全ブロック共通の設定しかできませんでしたが、コードブロックごとに行数の表示をするかどうかを設定できるようになりました。

コードブロック個別設定
コードブロック個別設定

これにより、「1行のコードを記述するときは行数を表示したくない」など、の細かな設定が可能になります。

コードブロックに「ファイル名の表示」が可能になりました

コードブロックに「ファイル名」を設定するテキストエリアを追加しています。

コードブロック内のファイル名入力位置
コードブロック内のファイル名入力位置

実際の表示は以下のようになります。

コードブロックにファイル名が表示されます
コードブロックにファイル名が表示されます

クラシックエディターでファイル名を表示させたい時は、data-file="ファイル名" をpreタグに追記してください。

コードのフォントファミリーが自由に設定できるようになりました

コードのフォントファミリーを自由に設定できるようにしてほしいとの要望を受け、設定画面にてフォントファミリーを設定できるようにしました。

フォントの設定位置
フォントの設定位置

HCBのコードブロックをテキストで呼び出せるように、キーワードを追加

Gutenbergでは段落の最初に/を入力するとブロックを呼び出すことができます。

この時、/に続けてキーワードを入力することで呼び出したいブロックを検索することもでき、HCBコードブロックは/hcbまたは/codeで検索できるようになっています。(v.1.0.6から)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (9件)

  • こちらのプラグインを使用させていただいているものです。

    ソースコードを挿入するとハイライトされないようです。
    CSS指定はHTMLを見るとされているのですが、ハイライトだけがされていません。
    原因はありますでしょうか。

    • ご利用ありがとうございます!
      問題の現象を確認できるページのURLを教えていただくことはできますでしょうか?
      よろしくお願いいたします。

  • 使用させていただいています。
    簡単でかっこいいです、ありがとうございます!

  • このプラグインを使用させていただいております。
    とても使い勝手がよく、重宝させていただいております。

    一つ設定で困っていることがあります。
    「使用する言語を増やす」の項目に従って言語の追加を行ったのですが、
    エディターの”- Lang Select -“の項目がデフォルトのまま変更されません。
    なにか対処しなくてはいけないことがありましたらご教授いただけると幸いです。

    WordPress: Ver. 5.7.2
    Highlighting Code Block: Ver. 1.2.9

  • 行番号の開始番号を指定する事は可能でしょうか例えば、Prism.jsにてdata-start=”100″を指定した場合、
    100行目から100,101,102と行が表示される機能の事です。
    よろしくお願いいたします。

  • はじめまして、こんにちは。

    Highlighting Code Blockのカラーリング設定について教えて下さい。

    Darkにしても、文字の周りだけ四角く黒で囲われた状態になるだけで、背景はLightのままになってしまいます。

    Lightの背景に、黒帯状のコードが貼り付けられてる状態。

    エディタの方は通常にDarkで表示されます。フロントの方がこの様な現象です。

    WordPress5.8 テーマ 「THOR」
    ブロックエディタです。

    [HCB]設定以外でどこか設定する場所があるのでしょうか。

  • こんばんは。

    Highlighting Code Block、大変便利に使わせてもらっています。ありがとうございます。
    ただ、ちょっと困っております。

    高度な設定 > 追加 CSS クラス にclassを追加すると、class名が勝手に増殖して

    WordPressが最終的にクラッシュするか、
    「更新に失敗しました。データベース内の投稿を更新できませんでした。」というエラーがでるようです。

    検証手順は次のとおりです。

    1.Highlighting Code Blockの高度な設定 > [ 追加 CSS クラス ]にaaa(なんでもよい)というクラスを追加する
    2.再編集する (更新する > 投稿を表示 > 投稿を編集)
    3. [ 追加 CSS クラス をみると、なぜか、]aaa aaa と勝手に増えている
    4. 記事を何回もブラッシュアップしているうちに、Wordpressが突然、クラッシュしました。

    で、原因を調査していました。

    少しカスタマイズして使っており、クラス名が追加できないと痛いので、ご相談させてもらえればと思いました。

    環境:ブロックエディタ
    バージョン 1.2.6では、この症状は発生しないことは確認済み。
    バージョン 1.3.0の最新版のみで当方の環境では発生するようです。
    少ししか確認していないけど、Highlighting Code Block以外の他のブロックでは発生しないようです。

    再現しますでしょうか?何か勘違いがあればご指摘ください。
    お忙しいかと思いますが、お手すきの際にお返事もらえると幸いです。

目次