ワードプレス

Highlighting Code Blockの使い方とカスタマイズ方法について【prism.js】

customized_parts

Highlighting Code Blockインストール

WordPress管理画面プラグイン新規追加→キーワードに「Highlighting Code Block」と入力し、インストール→有効化。

Highlighting Code Block
Highlighting Code Block

[HCB] 設定

設定[HCB] 設定でHighlighting Code Blockの設定画面に移動できますが、デフォルトでOKで、背景色を変更したい場合はコードカラーリングをLightからDarkに変更すると背景色が黒になります。

背景色変更
背景色変更

使い方

投稿画面の➕マークをクリックし<HCB>をクリックでcode枠が表示されるのでそこでコードを記述します。

HCB
HCB

マークアップ言語やプログラミング言語によってcodeの色が変更できるので、- Lang Select -をクリックして言語選択します。

言語選択
言語選択

Highlighting Code Blockを独自カスタマイズ

Highlighting Code Blockのプラグインを導入し記事内に入れた場合は下の表示になります。
HTMLCSSJSを視覚的に区別する為に、boderで色分けをしています。

@charset "UTF-8";

HTML編集に切り替えるとdivclassに新規でclassを追加する。

customized1
HTML編集

追加CSSにそれぞれのCSSを追加していきます。

customized2
追加css

HTML記述の場合

class名hcb_wrap_htmlを追加して色を付ける。
・カラー:#f16528

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_html {
	border-color: #f16528;
}
.hcb_wrap.hcb_wrap_html pre[data-file]:before {
    background-color: #f16528;
}

CSS記述の場合


class名hcb_wrap_cssを追加して色を付ける。
・カラー:#30a9de

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_css {
	border-color: #30a9de;
}
.hcb_wrap.hcb_wrap_css pre[data-file]:before {
    background-color: #30a9de;
}

js記述の場合

class名hcb_wrap_jsを追加して色を付ける。
・カラー:#dab92c

.hcb_wrap {
    border: 3px solid #ececec;
    border-radius: 5px 5px 5px 5px;
    margin-top: 3em;
    position: relative;
    z-index: 0;
    display: block;
    padding: 0;
}
.hcb_wrap_js {
	border-color: #dab92c;
}
.hcb_wrap.hcb_wrap_js pre[data-file]:before {
    background-color: #dab92c;
}

文字が白くなってしまう現象が最適化でも上手くいかなかった場合は下記画像の通りすべてにチェックをいれて更新で改善すると思います。

  • 言語の表現
  • 行数の表示設定
  • コピーボタン
  • フォントスムージング
チェック項目
チェック項目