プログラミングのハウツー系のブログ記事では、ソースコードのサンプルを記載することも多いと思います。ただ、WordPressデフォルトでは、色が変わらず、行数も表示されないので見やすいとはいえません。
そこで今回は、記事内のソースコードを見やすくするプラグイン「Highlighting Code Block」をご紹介いたします。同じ機能のプラグインは多数ありますが、中でも使いやすく見た目も美しいです。
「Highlighting Code Block」とは
記事内のソースコードを見やすくするプラグインは「Crayon Syntax Highlighter」も有名ですが、2021年現在6年以上更新されていないため推奨はできません。
今回ご紹介する「Highlighting Code Block」の特徴は以下の通りです。上記プラグインの代替としても十分使えるはずです。
- 2021年11月現在も更新されている
- ブロックエディター（Gutenberg）/クラシックエディター両方に対応
- コードに色がつく（シンタックスハイライト）
- 行数を表示可
- コピーボタン表示可
- 言語名表示可
- コードブロックのスタイルを2タイプから選択可
- フォントサイズをPC/SPで選べる
管理画面から「Highlighting Code Block」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
「Highlighting Code Block」の使い方
クラシックエディターとブロックエディター（Gutenberg）の両方に対応しているので、以下でそれぞれの使い方を解説いたします。詳細設定はデフォルトのままでも使えるので最後にご紹介いたします。
クラッシックエディター
クラシックエディターの場合は、ビジュアルモードで使います。下記のように「Code Block」というドロップダウンメニューが追加されているので、コードを選択した状態で該当する言語をクリックします。
するとサイト上には以下のように表示されます（エディター上ではコードに色は付きせん）。
シンタックスハイライト（カラーで強調）された状態で、行数と共にコードが表示されます。右上の言語名の横のボタンでコピー可能です。
ブロックエディター
ブロックエディターの場合は、「Highlighting Code Block」というブロックが追加されます。
そこからブロックを追加し、コードを貼り付けて言語を選択すればOKです。
ブロックエディターでは編集画面の右側で、行数や言語名の有無も変更できます。コードブロックごとに個別設定可能で、後述する設定よりも優先されます。
また、下記のようにファイル名を入力したり、指定した行をハイライトすることも可能です。
- 編集画面
- 実際の表示
指定した行をハイライトできる点は、ハウツー系の記事で活用シーンが多そうですね。
詳細設定
基本的にはデフォルトのままでも大丈夫ですが、細かく設定を変更したい場合にご利用ください。サイドメニューの設定内の「[HCB]設定」から変更できます。ブロックエディター内で設定を変更した箇所を除く、コードブロック部分全箇所で共通反映されます。
すべて日本語なので、簡単に設定できるはずです。フォントスムージングはブラウザやOSによってテキストが汚く見えることを防ぐ機能ですので、お好みで設定してください。
また、コードカラーリングは、LightとDarkからお好みのものを選択できます。サイトのカラーに合わせて変更しましょう。サイトに表示されるフロント側と管理画面のエディター側でそれぞれ設定できます。
- Light
- Dark
まとめ
WordPressの記事内にサンプルコードを挿入するなら、このプラグインが使いやすいかと思います。シンプルな使い心地で表示も綺麗なので、ぜひチェックしてみてください。
プラグインを使わずにソースコードを共有できるWebサービスもありますので、よろしければご覧ください。
WEBに関わるハウツーの記事を書く時は、ソースコードそのものを記事内に記述したい時があります。Wordpressにはプラグインが多数揃っているので、ソースコードを記事内に記述する時に使えるプラグインはもちろんありますが…プラグインを導入せずに運用したいという方も多いのではないでしょうか。 そこ...
コメント