Highlighting Code Block を使ってみる

「Syntax Highlight系のプラグインで軽量でいいものないかなぁ」と物色していたところ、「Highlighting Code Block」というプラグインが見つかり利用してみることにしました。

使い始めてみて
導入＆設定
- プラグインの導入
- 基本設定
基本的な使い方
- 新規に追加する方法
- 既存の標準コードブロックからの変換
参考サイト様

使い始めてみて

軽量かつ設定も簡単、サイトのプリロードにも影響していないようで、非常にいい感じです。
AMPへの対応言及は無かったのですが、現状本サイトもAMP化は見送っておりますので、問題ありません。

現在見出しの修正対応で各記事を修正しているので、併せて変更していこうかと思います。

もしAMP化必須かつ「Syntax Highlight」を利用されたいのでしたら、以下のプラグインが存在します。
既存のコードブロックを置き換えてくれるので、大変便利なのですが一部日本語が文字化けする可能性があります。
そのため、英語表記のみかつ、AMP必須の場合は以下のプラグインをご検討ください。

AMP対応 SyntaxHighlight プラグインSyntax-highlighting Code Block (with Server-side Rendering) – WordPress プラグイン | WordPress.org 日本語Extending the Code block with syntax highlighting rendered on the server, thus being AMP-compatible and having faster frontend performance.

ja.wordpress.org

導入＆設定

プラグインの導入

「ダッシュボード」＞「プラグイン」＞「新規追加」を選択します。
「キーワード横」のテキスト入力エリアに「Highlighting Code Block」を入力します。
「今すぐインストール」＞「有効化」を実施します。

これで導入は完了です。簡単ですね。
似たプラグインに「Syntax-Highlighting Code Block」がありますが、こちらではありません。

基本設定

基本的に使うだけでしたら本当に設定は簡単でした。

「ダッシュボード」＞「設定」＞「HCB 設定」を選択します。
自分好みに設定します。自分なりの細かいカスタマイズも

「ダッシュボード」＞「設定」＞「CODE BLOCK」を選択します。
自分の好みに細かい設定(jsやcssのファイルアップロード)も出来ますが、基本的には何もしなくても大丈夫です。
私は「コードカラーリング(フロント、エディタ)」を「Dark」にしたくらいです。

基本的な使い方

新規に追加する方法

ブロックの追加から「Highlighting Code Block」を選択します。

以下の画像の様なブロックが表示されますので、「Your Code…」と表示されている入力エリアに、表示させたいコードを入力します。
また、同時にプルダウンでコードの種類を選択出来ます。

コードを入力すれば完了です。プレビュー画面等で確認してくださいね。
(以下実際の画面となります。)

/* H2 追加CSS */
h2.is-style-mode {
	font-weight: 600;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    position: relative;
}