WordPressでソースコードを表示するなら『Highlighting Code Block』プラグインがおすすめ
WordPressブログ記事で、ソースコードをハイライト表示させるのに便利な『Highlighting Code Block』プラグインの紹介です。
このサイトでも使用しており、言語、ファイル名、ハイライトする行番号などを指定すると、整った見た目でソースコードを表示させることができます。
実際の表示は以下のようになります。
#include <iostream>
using namespace std;
int main(){
cout << "Hello world." << endl;
return 0;
}
このプラグインのインストール・設定方法を紹介します。
インストール
Highlighting Code Blockは、WordPressのダッシュボードから検索してインストールするだけです。
2021年6月時点で、有効インストール数も多く、更新もされており、信頼して使えるプラグインかと思います。
設定
基本設定
基本的な使い方や設定方法は、公式のマニュアルがわかりやすいです。
ちなみに、このサイトでの設定は以下のようになっています。特別な設定はしていません。
行のハイライト表示をCSSで修正
WordPressテーマとの相性が良くなかったのか、一部表示がくずれている箇所がありました。
このサイトでは、テーマのCSSカスタマイズで2点修正を入れています。
1つ目は、行数表示をONにすると、コードが折り返し表示されるようになっていました。1行が長いコードを書いた場合にブログの視認性が悪くなったため、修正を入れました。
/* コードを折り返しさせないように */
.hcb_wrap pre.line-numbers>code {
white-space: pre;
}
2つ目は、行をハイライト表示させたときに、ハイライト箇所が上下方向にずれていたため、修正を入れました。
/* 上下がずれていたので固定値を指定して補正する */
.hcb_wrap .line-highlight {
margin-top: 11px;
}
まとめ
いくつかソースコード表示プラグインがありますが、個人的には今回紹介した『Highlighting Code Block』が非常に見やすくて使いやすいプラグインだと思います。
一部、このサイトではカスタマイズが必要でしたが、他のサイトでは不要かもしれません。