WordPress:ソースコードを表示するコードブロック拡張プラグイン「Code Syntax Block」

Code Syntax Block は、ブロックエディター（Gutenberg）のコードブロックを拡張して、ソースコード強調表示できる機能を提供するプラグインです。

Code Syntax Blockプラグインのインストール
Code Syntax Blockプラグインの使用方法
1. 行番号が表示れないときの対処方法

Code Syntax Blockプラグインのインストール

Code Syntax Blockプラグインを利用するには、管理画面のサイドバーにある「プラグイン」⇒「新規追加」を開いて「Code Syntax Block」と検索すると表示されるのでインストールします。

プラグインを有効化するとブロックエディターの「コード」ブロックをサポートします。

プラグイン詳細：Code Syntax Block

Code Syntax Blockプラグインの使用方法

Code Syntax Blockは、専用の設定ページはなく、プラグイン有効後すぐに使用できます。

コードをハイライト表示したいときは、ブロックエディターの「コード」を追加します。

右サイドの「ブロック」を表示して、入力したコードの設定ができます。

Language: 言語設定
Show line numbers: 行番号表示
Title for Code Block: タイトル設定
Schemes: 表示する配色設定

行番号が表示れないときの対処方法

Show line numbersをオンにしても使用しているテーマによって、行番号が表示されないこともあります。公式サポートページによると表示するためには、下のCSSをテーマのstyle.cssに追加すると表示されます。

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 0;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

}

.line-numbers-rows > span {
	pointer-events: none;
	display: block;
	counter-increment: linenumber;
}

.line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #5C6370;
	display: block;
	padding-right: 0.8em;
	text-align: right;

code snippetsなどのプラグインを使用してCSSコードを追加する方法もあります。