Highlighting Code Block の使い方

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

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

上記のようないい感じのコードブロックがとても簡単に使用できます。

以下の言語が標準でサポートされています。

この他の言語も、設定と読み込むファイルをカスタマイズすることによって使用可能です。

シンタックスハイライトの機能自体は「prism.js」を使っています。（カラーリング調整するために、少しだけ独自の追加処理を加えています。）

インストール方法

プラグインの新規追加画面から「Highlighting Code Block」と検索してインストールしてください。

コードブロックの使い方

• ブロックエディターの場合は、専用のブロックを呼び出してコードを記入するだけです。（ブロックごとに設定できる項目もいくつかあります）
• クラシックエディターの場合は、エディター上部のツールバーから呼び出してコードを記入するだけです。

順番に詳しく説明していきます。

ブロックエディターでの使い方

エディター内で「ブロックの挿入ボタン」をクリックすると、「テキスト」カテゴリーから「Highlighting Code Block」というブロックが選択できるようになっています。

以下の動画はコードブロックを使う様子です。

ブロックの設定項目について

ブロックツールバーとブロックサイドバーそれぞれに次のような設定項目があります。

言語設定

適切にシンタックスハイライトするために、コードの言語を選択してください。

行数の表示

コードの横に行数を表示するかどうか。
「[HCB]設定」ページでデフォルト値を設定できますが、それをブロックごとに上書きできます。

また、ver.2.0以降では、表示する時の開始番号も指定できるようになりました。

言語の表示

選択中の言語を右上に表示するかどうか。
「[HCB]設定」ページでデフォルト値を設定できますが、それをブロックごとに上書きできます。

ファイル名の表示

コードブロックの右上にファイル名を表示する事が出来ます。
ファイル名表示は、言語表示より優先されます。

ハイライトする行番号

ハイライトで目立たせたい行番号を設定できます。
ラインハイライトの指定方法は Line highlight : How to use のページを参考にしてください。

開始行番号

行数の表示がONの時、どの番号から開始するかを指定できます。

クラシックエディターでの使い方

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

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

試しに「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」に関する設定は、「設定」項目内の「[HCB] 設定」項目から可能です。

基本設定

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

• 言語の表示：コードブロックに言語名を表示するかどうか（デフォルト：表示する）
• 行数の表示設定：コードブロックに行数を表示するかどうか（デフォルト：表示する）
• コピーボタン：コードブロックにコピーボタンを表示するかどうか（デフォルト：表示する）
• フォントスムージング：フォントスムージングのオン・オフ（デフォルト：オフ）
• コードカラーリング（フロント側）：サイト表示側のコードカラーリング（デフォルト：Light）
• コードカラーリング（エディター側）：エディターでのコードカラーリング（デフォルト：Light）
• フォントサイズ(PC)：コードのフォントサイズ（PC）（デフォルト：14px）
• フォントサイズ(SP)：コードのフォントサイズ（SP）（デフォルト：13px）
• コードの “font-family”：コードのフォントファミリー（デフォルト：Menlo, Consolas, “Hiragino Kaku Gothic ProN”, “Hiragino Sans”, Meiryo, sans-serif;）

高度な設定

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

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

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

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

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

サポートする言語を増やす方法

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