プラグインを使って記事にコードを表示させる方法

2023/05/08 2024/10/21 更新 Web

ネットで、Webデザインのハウツー記事を探すと、ほとんどのサイトで“コード”が当たり前のように掲載されていて、コピーできたり、タブみたいなのでhtmlやcssなんかを切り替えて表示させたり、左のウィンドウのコードを反映させたものを右のウィンドウに表示させたり、、、当たり前のようにできていたことを今までは特に気にしていませんでした。でもいざ自分でブログを書くようになり、アレってどうやって表示させているのだろうとか考えるようになりました。そもそも“アレ”が何なのかすらわからない状態でした。

今回は“アレ”をブログで使いたいと思いいろいろとしらべ、少しわかってきたのでまとめてみたいと思います。と言っても、メインはプラグインで表示させる方法だけですが。

“アレ”の名前

よく見かける“コレ”ら、名前がわからなければ調べようもない。

調べてみると“コレ”らは「サンプルコード」とか「コードスニペット」って呼ばれてるようです。「スニペット」という単語というか発音の響きは、私たちにはなんだか馴染みないような気がしますよね（私だけ？）。しばらくは「サンプルコード」と呼ぶことにします。

一応、「スニペット」についてはこちら。
「切れ端」とか「断片」という意味の単語です（IT用語辞典バイナリ）。コピペって感じのイメージでしょうか……。

サンプルコードを表示させる手段

今回は、WordPressで記事を書く際にサンプルコードを載せる手段を3つほど紹介します。

CodePen

「CodePen」は、簡単に言うとHTML、CSS、JavaScriptのコードを共有できるオンラインツールです。
実はこれより前の記事で使用していたりします。会員登録すれば無料で使えるのでおススメです。ただ、ちょっとしたコードを載せるには少し不釣り合いな高機能なので、今回もっと簡易的にサンプルコードを表示させる方法を探していました。

https://codepen.io/

ブロックエディタの「コード」

実に簡単シンプル、必要最低限の機能でサンプルコードを表示させてくれます。
使い方は、ブロックエディタの挿入ツールから「コード」を選んで表示させたいコードを書き込むだけです。

プラグイン

本記事メインの内容です。
前述の「コード」だけでは物足りない“言語の種類”や“コピーボタン”や“シンタックスハイライト”などを設定できるものもあるので、積極的に入れたいプラグインだなと思いました。

ちなみに今回私は「Highlighting Code Block」というプラグインを使用しました。導入方法は、次項から説明します。

Highlighting Code Block を使うと、どう見える？

「コード」でサンプルコードを載せると、下記のように表示されます。（CSSなどでスタイリングすることで見た目は変えられます。）

<div class="block">
  <ul class="list">
  	<li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>      
  </ul><!--/.list-->
</div><!--/.block-->

「Highlighting Code Block」を使うと、下記のように表示されます。

<div class="block">
  <ul class="list">
  	<li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>      
  </ul><!--/.list-->
</div><!--/.block-->

コード自体に色がついていたり、前述しましたが“言語の種類”や“コピーボタン”や“シンタックスハイライト”が入っているので、ただの「コード」と違ってわかりやすいですよね。

「Highlighting Code Block」の導入方法

①「プラグイン」→「新規追加」
②キーワードで「Highlighting Code Block」と入力して、検索
③「Highlighting Code Block」を見つけたら「今すぐインストール」→「有効化」

これで導入は完了です。記事を書くときに、ブロックエディタで選択できるようになりました。

「Highlighting Code Block」の使い方

①「ブロック挿入ツールを切り替え」をクリック
②「Highlighting Code Block」をクリック

③“コード”を書く
④“言語”を選択
⑤必要に応じて設定（「ファイル名」「deta-line属性値」）

「Highlighting Code Block」の設定

「基本設定」→「[HCB]設定」から設定できます。

デフォルトでも問題なく使用可能なのと、「基本設定」は特に難しそうな部分はないので割愛します。ちなみに本サイトでは、今回はデフォルトのまま使用しました！

まとめ

「Highlighting Code Block」というプラグインを導入することで、簡単にサンプルコードを記事中に表示させることができるようになりました。WordPressのデフォルトの機能だけでは難しい部分を、表示させることができるので、積極的にプラグインを導入してもいいところだと思いました。

出典

IT用語辞典バイナリ. 「スニペット」. https://www.sophia-it.com/content/スニペット, 2023年5月8日閲覧。