ソースコードをわかりやすく表示するためのブロックを追加してくれるWordPressプラグイン「Highlighting Code Block」

Highlighting Code Blockは、ソースコードをわかりやすく表示させるためのブロックを追加してくれるWordPressプラグインです。

「Highlighting Code Block」というブロックが追加され、投稿内でソースコードを見やすく表示させることができます。

さらに、クラシックエディターにも対応しています。

Highlighting Code Blockの対応言語

デフォルトでの対応言語は以下の通りです。設定から使用する言語を追加することもできます。

インストール手順は以下の通りです。

WordPress管理画面の[設定] – [CODE BLOCK]でプラグインの設定を行います。

言語の表示	言語名の表示
行数の表示設定	行数の表示
フォントスムージング	「-webkit-font-smoothing:antialiased;」と「-moz-osx-font-smoothing:grayscale;」の追加
コードカラーリング（フロント側）	フロント側のカラーテーマ
コードカラーリング（エディター側）	エディタ上でのテーマカラー
フォントサイズ(PC)	PCでのフォントサイズ
フォントサイズ(SP)	スマホでのフォントサイズ
コードの “font-family”	フォントの種類
ブロックエディターの最大幅	エディタ上での最大幅
使用する言語セット	使用する言語の設定
独自カラーリングファイル	独自CSSの読み込み
独自prism.js	独自のprism.jsファイル

※行数の表示設定が「コードブロックに言語名を表示するコードブロックに行数を表示する」となっていました(^^; おそらくこれは記述ミスなので、アップデートで修正されると思われます。

※2020/03/01追記
早速、バージョン1.1.0で修正されていました。

投稿編集画面にて、フォーマットブロックの中にある「Highlighting Code Block」というブロックを追加します。

「Your Code…」と書かれている部分にソースコードを入力し、「Lang Select」で言語を選択します。

「ファイル名」にindex.html等のファイル名を入力すると、ソースコードの右上にファイル名が表示されます。ファイル名が未入力の場合は、選択した言語名を表示します。

「data-line属性値」では、ハイライトさせたい行数を指定します。複数行を指定したい時はカンマ(,)区切りで行数を指定するか、「4-9」のように範囲を指定します。

実際にコードを入力して表示させてみたのがこちら↓

コードカラーリングを”Dark”にすると以下のようになります。

エディタ側もDarkにすると、こんな感じです↓

Highlighting Code Blockはクラシックエディターにも対応しています。クラシックエディターの場合は、[コードブロック]というプルダウンが追加されますので、そこから言語を選択して挿入します。

「/* Your code… */」という文字を消して、ソースコードを記述します。

ハイライトを設定したい時は、エディタをテキストモードにしてpre要素に「data-line=”9″」というようにdata-line属性を追加してあげます。

なお、Enterを押下してもソースコードを入力する領域から抜けられない場合は、[Shift]+[Enter]でコードブロックの下に改行できます。

ソースコードを表示するためのプラグインは、長年「SyntaxHighlighter Evolved」を愛用してきましたが、最近は既存の投稿を編集しようとするとソースコード内の括弧などが化けてしまう現象に悩まされていました。

別のプラグインに乗り換えようと思っていたところで、Highlighting Code Blockを見つけました。シンプルさ・使いやすさに完全にハートを持っていかれたので乗り換えます！