WordPressでソースコードを表示するなら『Highlighting Code Block』プラグインがおすすめ

ブログ記事で、ソースコードをハイライト表示させるのに便利な『Highlighting Code Block』プラグインの紹介です。

このサイトでも使用しており、言語、ファイル名、ハイライトする行番号などを指定すると、整った見た目でソースコードを表示させることができます。

投稿の編集画面

実際の表示は以下のようになります。

#include <iostream>

using namespace std;

int main(){
  cout << "Hello world." << endl;
  return 0;
}

このプラグインのインストール・設定方法を紹介します。

インストール

Highlighting Code Blockは、WordPressのダッシュボードから検索してインストールするだけです。

2021年6月時点で、有効インストール数も多く、更新もされており、信頼して使えるプラグインかと思います。

2021/6時点の情報

設定

基本設定

基本的な使い方や設定方法は、公式のマニュアルがわかりやすいです。

ちなみに、このサイトでの設定は以下のようになっています。特別な設定はしていません。

このブログでのプラグインの設定

行のハイライト表示をCSSで修正

WordPressテーマとの相性が良くなかったのか、一部表示がくずれている箇所がありました。

このサイトでは、テーマのCSSカスタマイズで2点修正を入れています。

テーマのカスタマイズでCSS追加

1つ目は、行数表示をONにすると、コードが折り返し表示されるようになっていました。1行が長いコードを書いた場合にブログの視認性が悪くなったため、修正を入れました。

/* コードを折り返しさせないように */
.hcb_wrap pre.line-numbers>code {
    white-space: pre;
}

2つ目は、行をハイライト表示させたときに、ハイライト箇所が上下方向にずれていたため、修正を入れました。

/* 上下がずれていたので固定値を指定して補正する */
.hcb_wrap .line-highlight {
    margin-top: 11px;
}

まとめ

いくつかソースコード表示プラグインがありますが、個人的には今回紹介した『Highlighting Code Block』が非常に見やすくて使いやすいプラグインだと思います。

一部、このサイトではカスタマイズが必要でしたが、他のサイトでは不要かもしれません。