このサイトでとてもお世話になっているシンタックスハイライトをつけてくれるプラグイン、「Code Block Pro」の使い方・機能をご紹介します。
以前は「Highlighting Code Block」を使っていたのですが、更新されなくなってしまったので、こちらに切り替えました。
動作確認環境
- WordPressバージョン : 6.9
- プラグインバージョン : 1.27.7
- 動作確認日 : 2026/1/22
インストール
プラグイン追加画面から「Code Block Pro」を検索し、インストール＆有効化します。
【プラグインページ】
Code Block Pro – WordPress プラグイン | WordPress.org 日本語
有効化すると投稿ブロックに「Code Pro」が追加されます。
基本の使い方
ブロックを選択すると、コードエディターが表示されます。各追加設定は右側にあるブロック設定から行います。
必ず必要な言語とテーマは、ブロックのツールバーでクリックすると、設定項目が開きます。
言語は最近使ったものが表示されるので、よく使う言語はすぐ選択できて便利です。
テーマは20種類以上から選択できます。全て表示させておくといちいち選ぶのも大変です。「Manage Themes」から、自分の好きなテーマ、使用するテーマだけを表示させておくようにできます。
行設定（Line Setting）
「Line Setting」では行に関する設定ができます。それぞれどのような表示がされるか実際に表示させてみます。
Line Number【行数の表示】
ここにチェックを入れると、左側に数字が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Syntax Highlight Sample</title>
</head>
<body>「START FROM」で開始数字を指定すると、その数字から始まります。
<!DOCTYPE html>
<html lang="ja">Line highlights【行の強調】
強調させたい行の番号を入力すれば、以下のようにハイライトされます。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>複数の場合はカンマで区切ります。以下は、2,5, [14,16] を指定しています。2,5 は2行目と5行目、[14,16] は14行目から16行目が適用されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Syntax Highlight Sample</title>
</head>
<body>
<!-- メインコンテンツ -->
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。
</p>
<a href="https://example.com" target="_blank">
詳細はこちら
</a>
</body>
</html>数字を入力してもハイライトされない。
この記事を書きながらこの現象におちいりました。
「START FROM を「7」に指定」したブロックをコピペして、「Line numbers」のチェックを外し、「Line highlights」を2行目に設定しました。
しかし、2行目にハイライトされません。
「Line numbers」の「START FROM を「7」に指定」したまま、チェックだけ外したことが原因でした。また「Line numbers」にチェックを入れると「START FROM」に「7」数字が入ったまま。
この状態だと見た目上の「2行目」は、「8行目」となります。なので「Line highlights」には「8」を入力する必要があります。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>もしハイライトが適用されない場合は、「Line numbers」を表示させて、行数が合っているか確認してみてください。
Line highlights on hover【ホバーで行の強調】
こちらにチェックを入れると、ホバーした行がハイライトされるようになります。以下のコードブロックをホバーしてみてください。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>Line blurring【ぼかす】
こちらにチェックを入れると、以下のようにコードがぼかされます。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>強調したい行数を指定することで、ブラーを外せます。
また「Remove blur on hover」にチェックを入れると、ホバー時にブラーが外れるようになります。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>Font Styling【フォント調整】
Font size、Line height、Font familyをサイトに合わせ調整できます。
/* 見出しのスタイル */
.title {
font-size: 24px;
color: #333;
margin-bottom: 16px;
}/* 見出しのスタイル */
.title {
font-size: 24px;
color: #333;
margin-bottom: 16px;
}Max Height
コードが長くなってしまう時に、表示高さの最大値を設定してコンパクトに表示させることができます。
管理画面の場合はスクロールで、クライアント側は伸び縮みして全コード表示ができるようになります。
// ユーザー名を表示する関数
function greetUser(name) {
if (!name) {
return "ゲストさん、こんにちは";
}
return `こんにちは、${name}さん`;
}
// 実行例（※実際には使わない）
const message = greetUser("田中");
console.log(message);Extra Setting【その他の設定】
paddingを無しに。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>エンコーディングされたコードに。
<h1 class="title">シンタックスハイライトの例</h1>
<p id="description">このコードは<strong>表示専用</strong>のサンプルです。</p>
<a href="https://example.com" target="_blank">詳細はこちら</a>カテゴリー : WordPress
タグ :
