Highlighting Code Block を使ってみる

Wordpress/
  1. ホーム
  2. Wordpress
  3. Highlighting Code Block を使ってみる

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

使い始めてみて

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

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

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

導入&設定

プラグインの導入

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

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

基本設定

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

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

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

基本的な使い方

新規に追加する方法

  1. ブロックの追加から「Highlighting Code Block」を選択します。
  1. 以下の画像の様なブロックが表示されますので、「Your Code…」と表示されている入力エリアに、表示させたいコードを入力します。
    また、同時にプルダウンでコードの種類を選択出来ます。
  1. コードを入力すれば完了です。プレビュー画面等で確認してくださいね。
    (以下実際の画面となります。)
/* H2 追加CSS */
h2.is-style-mode {
	font-weight: 600;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    position: relative;
}

既存の標準コードブロックからの変換

  1. 変換したいコードを選択します。
  2. 左上のコードアイコンをクリックします。
  1. 変換リストより「Highlighting Code Block」を選択します。
  1. ブロックが自動的に「Highlighting Code Block」に置き換わりますので、コードの言語を選択して完了です。

参考サイト様