コードを分かりやすくブログ記事に表示！WordPress無料プラグイン「Highlighting Code Block」の使い方を解説

こんにちは！もっくんです。

今回は、WordPressのプラグイン「Highlighting Code Block」（無料、登録不要）を使って、ブログ記事などに簡単にソースコードを表示できる方法についてご紹介します。

技術ブログなどを読んでいると、こういった感じでソースコードが表示されているのをよく見かけますよね！

 <h1>見やすいソースコード</h1>
 <ul>
  <li class="item1">すごいプラグイン</li>
  <li class="item2">つよいプラグイン</li>
  <li class="item3">やばいプラグイン</li>
 </ul>

h1 {
  color: red;
  text-align: center;
  font-weight: bold;
}
li {
  color: #fff;
  width: 100px;
  padding: 8px;
}

これからご紹介するプラグイン、「Highlighting Code Block」で簡単に実装することができます。

ソースコードを用いて、より分かりやすい記事を書きたいという方はぜひ参考にしてください。

インストール方法

STEP

WordPress管理画面→プラグイン→新規追加から「Highlighting Code Block」と検索

STEP

以下のプラグインが表示されたら、名称や作者を確認し、「今すぐインストール」ボタンをクリック

※検索で表示されない場合は、こちらから↓

WordPress.org 日本語

Highlighting Code Block prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。 (Gutenberg とクラシックエディター共に利用可能)

STEP

インストールできたら、プラグインを「有効化」する

これだけで、ブロックエディターから使用可能になります。

使い方

使い方は簡単です。

STEP

投稿編集画面で、挿入したい箇所のブロックを選択し、「＋」をクリック。

STEP

検索に「hcb」と入力すると、「Highlighting Code Block」が表示されます。
これをクリックすると、ブロックが挿入されます。

※挿入箇所で「/（スラッシュ）hcb」と入力することで、よりすばやく選択・挿入できます。

STEP

使用するコードの言語を選択し、任意のコードを入力してください。

基本設定

Highlighting Code Blockのプラグインを有効化すると、

WordPress管理画面→「設定」の中に、「[HCB]設定」というメニューが追加されています。

このプラグインに関する設定は、このメニューから行います。ここでは、主な設定項目について紹介します。

言語の表示

「コードブロックに言語名を表示する」にチェックすると、シートに選択したコードの種類が表示されます。

行数の表示設定

「コードブロックに行数を表示する」にチェックすると、コードの左端に行数が表示されます。

コピーボタン

「コードブロックにコピーボタンを表示する」にチェックすると、ユーザーがボタンをクリックしてソースコードをコピーできます。

コードカラーリング（カラーを変更）

フロント側、エディター側それぞれのカラーリングを「Light」と「Dark」から好みに合わせて選ぶことができます。

まとめ

いかがでしたか？

Highlighting Code Blockはブロックのひとつなので、タブやカラムなど他のブロックと組み合わせて使うことで、より見やすく、分かりやすい記事が書けるようになると思いますので、ぜひ実践してみてください。