Highlighting Code Blockの使い方：記事内にソースコードを表示

プラグインHighlighting Code Blockの設定と使い方をまとめています。

記事内にソースコードを綺麗に表示させるプラグインです。言語、行数、コピーボタンの設定が可能で、ブロックエディターとクラシックエディターの両方に対応しているのが特徴です。

＼ FUJI ROCK FESTIVAL '24 ／

設定と使い方

プラグインを有効化すると、管理画面の設定に「[HCB]設定」が追加されます。

使い方

記事編集画面で「Highlighting Code Block」ブロックを追加します。

Your Codeにソースコードを入力して、必要であれば言語等を設定します（ソースコード以外は任意）。

参考までに、ソースコードのみを入力すると、下記の様に表示されます。

.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy {
    color: var(--color_main);
}

言語を選択すると、右上に言語名が表示され、ソースコードにはカラーが反映されます。

.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy {
    color: var(--color_main);
}

ファイル名を入力すると、右上にファイル名が表示されます（言語名は上書きされる）。

.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy {
    color: var(--color_main);
}

data-line属性値に数字を入力すると、入力した数字の行がハイライトされます。

.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy {
    color: var(--color_main);
}

サイドバーのメニューは、基本設定を上書きしたい場合にのみ設定して下さい。

基本設定

基本設定は、管理画面の設定「[HCB]設定」から変更できます（必要なければ初期設定推奨）。

管理画面 ▶ 設定 ▶ [HCB]設定

ここでの設定は全体に影響を及ぼしますが、「行数」と「言語名」の表示は記事編集画面で上書きできます。

僕はコードカラーリングのみ「Dark」に変更して使っています（初期値は「Light」）

上手く表示されないケースと対策

僕が実際に使って上手く表示されなかったケースと対策です。

登録済みのショートコード

登録済みのショートコードを表示させたい時は、ショートコード全体を[]で囲んで入力して下さい。

[[blog_parts id="1"]]

実際のブログでは下記の様に表示されます。

[blog_parts id="1"]

登録済みのショートコードをHighlighting Code Blockでそのまま表示させることはできないので注意して下さい。

コピーボタンが表示されない

テーマ「SWELL」を使っている方で、下記スクリプトを遅延読み込みさせるとコピーボタンが表示されません。

clipboard.min.js,
hcb_script.js,

コピーボタンが表示されない時は、SWELL設定の「遅延読み込み機能」を確認してみて下さい。また、他のテーマでも遅延読み込み系のプラグインを使用されている方は、同様の現象が起きる可能性があります。

あわせて読みたい

SWELLでHighlighting Code Blockのコピーボタンが表示されない時の対処法 SWELLでHighlighting Code Blockのコピーボタンが表示されない時に確認してほしいことをまとめています。 プラグインの設定 プラグインの設定画面で、「コピーボタン」...

最後に

HTMLやCSSのソースコードは、WordPressデフォルトの機能でも表示できますが、ブログ内で頻繁にソースコードを表示させる機会がある方は、プラグインを使った方が綺麗に表示できるのでおすすめです。

また、僕は元々「Urvanov Syntax Highlighter」を使っていたのですが、「Highlighting Code Block」の方が無駄な機能がない＆設定がシンプルで使いやすかったです（SWELLと開発者が同じなのでテーマと相性も良い）。

あわせて読みたい

WordPressの記事にソースコードをそのまま表示させる方法 WordPressの記事にソースコードをそのまま表示させる方法をまとめています。 コードブロック WordPress共通の「コードブロック」を呼び出して、ソースコードをそのまま...

あわせて読みたい

Urvanov Syntax Highlighterの使い方：記事内でソースコードを表示 プラグインUrvanov Syntax Highlighter（旧Crayon Syntax Highlighter）の設定と使い方をまとめています。 記事内に綺麗で見やすいソースコードを表示させるプラグイン...