「Syntax Highlight系のプラグインで軽量でいいものないかなぁ」と物色していたところ、「Highlighting Code Block」というプラグインが見つかり利用してみることにしました。
使い始めてみて
軽量かつ設定も簡単、サイトのプリロードにも影響していないようで、非常にいい感じです。
AMPへの対応言及は無かったのですが、現状本サイトもAMP化は見送っておりますので、問題ありません。
現在見出しの修正対応で各記事を修正しているので、併せて変更していこうかと思います。
もしAMP化必須かつ「Syntax Highlight」を利用されたいのでしたら、以下のプラグインが存在します。
既存のコードブロックを置き換えてくれるので、大変便利なのですが一部日本語が文字化けする可能性があります。
そのため、英語表記のみかつ、AMP必須の場合は以下のプラグインをご検討ください。
導入&設定
プラグインの導入
- 「ダッシュボード」>「プラグイン」>「新規追加」を選択します。
- 「キーワード横」のテキスト入力エリアに「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;
}
既存の標準コードブロックからの変換
- 変換したいコードを選択します。
- 左上のコードアイコンをクリックします。

- 変換リストより「Highlighting Code Block」を選択します。

- ブロックが自動的に「Highlighting Code Block」に置き換わりますので、コードの言語を選択して完了です。

