強化されたコードブロック: 構文ハイライトなどの新機能

昨年、WordPress.com はブロックエディター用の新しいコードエディターと WordPress 管理画面に「追加CSS」入力ボックスを導入しました。これは、コード編集をより快適にする大きな取り組みの第1段階でした。

本日は、その第2段階として、コードブロックの新機能を紹介します。

今回の更新は新しいブロックの追加ではなく、既存のコードブロックを強化したものです。主な改善点は次のとおりです。

• 構文ハイライト： 100以上の言語に対応した、色分け表示に対応。
• 設定オプション： ファイル名・言語名・行番号などの表示に加え、読者向けのコピーボタンの追加が可能。
• ドラッグ＆ドロップ対応： ローカルのコードファイルをエディターにドラッグすると、言語が設定されたコードブロックに自動的に変換。
• ブロック変換： Syntax Highlighter など、WordPress.com の他のコード系ブロックを新しいコードブロックに変換。
• スタイル： エディターから直接、または theme.json で構文ハイライトの色をカスタマイズ。

強化されたコードブロックの使い方

新しいバージョンを使用するのに、特別な設定は必要ありません。すでに使用できる状態で、ブロックエディターの好きな場所にコードブロックを挿入し、コードを追加するだけです。

デフォルトでは、コードを挿入すると、プレーンテキスト形式で表示されます。

プレーンテキストは言語ではないため、構文ハイライトは適用されません。構文ハイライトを有効にするには、サイドバーの「設定 → 言語」ドロップダウンメニューからコード言語を選択してください。

選択した言語に合わせて構文ハイライトが適用され、見やすく表示されます。

ヒント： （例：```php）のように、3つのバックティックに続けて言語名を入力し、Enterを押すと、自動的にエディターが新しいコードブロックを作成し、言語を設定します。

コードブロックでは、言語以外にも以下の設定を変更できます。

• ファイル名： コードブロックの左上に表示するファイル名を追加。（チュートリアルで読者を案内する際に便利）。
• 言語名を表示： ブロックの右上に言語名を表示。
• コピーボタンを表示： ブロックの右上にコピーボタンを追加し、読者がコード全体をコピー可能。
• 行番号を表示： コードの左側に行番号を表示。
• 行番号の開始値： 開始する行番号を指定可能。

これで、コード例をより見やすく表示できます。

コードブロックの色をカスタマイズする

強化されたコードブロックでは、構文ハイライトの色をカスタマイズする方法がいくつかあります。簡単でわかりやすい方法から、上級者向けのより高度なテクニックまで紹介します。

ブロックスタイルを選択する

コードブロックには、初期設定で4つのスタイルを用意しています。

• デフォルト： テーマのデフォルトスタイルと色を使用。
• ハイライトなし： 構文ハイライトを無効化。
• Solarized Light： 明るい配色。
• Solarized Dark： 暗い配色。

テーマに追加のスタイルを登録することもできますが、この中から選ぶのが、コードブロックの表示を変更する最も簡単な方法です。

エディターから色をカスタマイズする

エディターのサイドバーの「スタイル → 色」パネルから、直接色をカスタマイズすることもできます。このブロックには、構文ハイライト全体をカバーする豊富なカラーオプションを用意しています。

色だけでなく、タイポグラフィ、ボーダーなど、他のスタイルも変更できます。これらのオプションは従来どおり利用できる機能です。

theme.json でコードブロックをカスタマイズする

開発者やテーマ制作者は、ブロックのデフォルト出力に使用する構文ハイライトの色やスタイルをあらかじめ定義したいと思うでしょう。今回の強化では、theme.json のサポートも追加しています。

以下は、theme.json を少し編集し作成した私のカスタムコードブロックスタイルの例です。

WordPress ソフトウェア自体は、 theme.json でのカスタムカラーに未対応のため、WordPress.com の開発チームがこの機能を独自に追加しました。

構文ハイライトの色は settings.custom.core/code でカスタマイズできます。各キーは構文の種類を示し、値には対応するカラーを指定します。

以下は、色をカスタマイズするサンプルコードです。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	}
}

有効な CSS カラーはすべて使用できます。16進数のカラーコードだけではなく、CSS カスタムプロパティ、RGBA なども指定可能です。

私がカスタマイズした theme.json を試したい場合は、以下のコードをコピーしてください。コードブロックをさらに見やすくするためのスタイルも追加しています。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"settings": {
		"custom": {
			"core/code": {
				"comment": "#94a3b8",
				"keyword": "#8b5cf6",
				"boolean": "#f59e0b",
				"literal": "#10b981",
				"string": "#06b6d4",
				"specialString": "#ec4899",
				"macroName": "#8b5cf6",
				"variableDefinition": "#3b82f6",
				"typeName": "#14b8a6",
				"className": "#f97316",
				"invalid": "#ef4444"
			}
		}
	},
	"styles": {
		"blocks": {
			"core/code": {
				"border": {
					"color": "#e2e8f0",
					"style": "solid",
					"width": "1px",
					"radius": "8px"
				},
				"color": {
					"background": "#f1f5f9",
					"text": "#1e293b"
				},
				"typography": {
					"fontSize": "15px"
				}
			}
		}
	}
}

コードを共有してみましょう

コードスニペットを公開する場合でも、本格的なチュートリアルを公開する場合でも、強化されたコードブロックを使えば、 WordPress.com でコードを共有し、スタイリングを整える作業がこれまで以上にスムーズになります。

構文ハイライト、ブロックスタイル、カスタムカラーオプションを活用すれば、コードの表示方法を自由にカスタマイズできます。

今回の強化で、書式設定に時間を取られることなく、読者の学習や制作に役立つ質の高いコンテンツ作成に集中できるようになります。