結論から言うと、技術ブログを書くなら「Highlighting Code Block」一択です。

なぜCocoon標準のハイライト機能ではダメなのか、その具体的な理由と、競合を避けて正しくプラグインを導入する完全な手順を、私の失敗談を交えてご紹介します。

クラノスケ

意地を張って標準機能で頑張っていた過去の自分に、「早くこのプラグインを入れろ！」と教えてあげたいです。

前提

この記事では、WordPressの無料テーマ「Cocoon（コクーン）」を使っていることを前提に進めていきます。

Cocoonは本当に素晴らしいテーマですが、餅は餅屋と言うように、コード表示に関しては「専用のプラグイン」に任せたほうが幸せになれます。もし他のテーマを使っている場合は、設定画面の場所が少し違うかもしれないので、そこだけご注意くださいね。

推奨理由

「Cocoonにもコード機能があるのに、なんでわざわざプラグインを入れるの？」と思いますよね。理由は大きく分けて2つあります。

1つ目は、標準機能の限界です。

Cocoon標準の機能だと、コードの左上に「ファイル名」を表示できません。また、背景色を変えることはできても、読者がワンクリックでコードをコピーできる「コピーボタン」が付かないんです。これだと、記事を読んでくれた人が手動で選択してコピーしなければならず、ちょっと不親切ですよね。

2つ目は、圧倒的な見た目の良さです。

今回使う「Highlighting Code Block（以下HCB）」というプラグインを入れると、Macの黒い画面（ターミナル）のようなカッコいいデザインが、インストールするだけで手に入ります。もちろんコピーボタン付きです。

「ただの文字の羅列」から「プロっぽいコード画面」へ。これだけでブログの信頼感がグッと上がりますよ。

導入手順

それでは、実際にプラグインを入れて、Cocoonと喧嘩しないように設定していきましょう。5分もあれば終わります。

インストール

まずはプラグインをWordPressに追加するところからです。

1. WordPressの管理画面から「プラグイン」を開き、「新規追加」をクリックします。
2. 検索窓に「Highlighting Code Block」と入力してください。
3. 作者名が「LOOS WEB STUDIO」になっているのを確認して、「今すぐインストール」、そして「有効化」をクリックします。

競合回避

ここが今回の一番のポイントです。

CocoonもHCBも「コードをきれいに見せよう」とする機能を持っているので、そのままだと両方が動いて表示が崩れてしまいます。なので、Cocoon側の機能をオフにしてあげましょう。

1. 管理画面の「Cocoon設定」を開きます。
2. たくさんタブが並んでいますが、「コード」というタブを選んでください。
3. 「ソースコードをハイライト表示する」という項目のチェックを外します。
4. 最後に「変更をまとめて保存」をクリックするのを忘れずに。

これで、コード表示の担当がCocoonからプラグインに切り替わりました。

配色設定

最後に、デザインを整えます。執筆中の画面と、公開される画面の色を統一して「ダークモード」にしておくと作業がしやすいです。

1. 管理画面の「設定」の中に「Highlighting Code Block」というメニューができているのでクリックします。
2. 設定画面で、以下の2箇所を変更します。

• コードカラーリング（フロント側）：Dark
• コードカラーリング（エディター側）：Dark

3. 「変更を保存」をクリックします。

これで準備完了です！記事を書いている最中も、黒背景でコードが確認できるようになりました。

執筆手順

設定お疲れ様でした。ここからは、実際に記事を書くときの手順を見ていきましょう。

ブロック配置

記事を書く画面（ブロックエディタ）での操作です。

1. 「＋」ボタンを押して、ブロック検索で「high」と入力してみてください。
2. 「Highlighting Code Block」というブロックが出てくるので選択します。

ここで注意なのが、Cocoon標準の「コード」というブロックも検索に出てくること。アイコンが似ているので間違えないように、「Highlighting…」の方を選んでくださいね。

詳細設定

ブロックを置くと、コードを入力する黒い箱が表示されます。このままでも使えますが、右側の設定パネル（もしくはブロック上のメニュー）を使うともっと便利になります。

• Lang（言語）：
  ここ重要です。コマンドなら「Bash」、設定ファイルなら「Text」などを選ぶと、文字色がカラフルになって見やすくなります。
• File Name（ファイル名）：
  ここに入力した文字が、ブロックの左上に表示されます。「oisystem-batch.sh」とか「/etc/nginx/nginx.conf」のように書いてあると、読者が「あ、このファイルをいじればいいんだな」と直感的にわかります。

運用注意点

最後に、読者に「親切だな」と思ってもらうためのちょっとしたコツをお伝えします。

記号の扱い

コマンドを紹介するとき、行の先頭に $ や # を付けたくなりますが、これらは書かないのがベストです。

理由はシンプルで、読者がコピーボタンを押したとき、この記号まで一緒にコピーされてしまうからです。そのまま貼り付けて実行するとエラーになってしまい、「このブログの通りにやったのに動かない！」となってしまいます。

コマンドだけをポンと置いてあげるのが、一番の優しさです。

更新頻度

プラグインのページを見ると、最終更新日が数年前になっていることがあって「大丈夫かな？」と不安になるかもしれません。

でも安心してください。このプラグインは機能としてすでに完成されていて、今のWordPressでも問題なく動きます。有名な技術ブロガーさんたちもこぞって愛用している鉄板プラグインなので、自信を持って使い続けて大丈夫です。

まとめ

Cocoonで技術ブログを書くなら、コード表示を見やすくするのは必須のマナーと言ってもいいかもしれません。

1. Highlighting Code Blockをインストールする。
2. Cocoon設定の「コードハイライト」を必ずオフにする。
3. 設定で「Dark」モードを選ぶ。

たったこれだけで、あなたのブログは「個人のメモ書き」から「プロの技術情報」へと生まれ変わります。ぜひ、過去の記事のコードブロックも、時間があるときにこの新しいブロックに書き換えてみてください。きっと、自分のブログを読み返すのが楽しくなるはずです！