コードブロック

スタイル

codeブロックではデフォルトスタイルの他に、背景色を黒としてワイド表示になる「ワイド（黒）」を用意しています。

デフォルト

<?php
$data = [
    ['id' => 1, 'name' => 'Test1'],
    ['id' => 2, 'name' => 'Test2'],
];

foreach ($data as $item) {
    echo $item['name'] . "<br>";
}

ワイド（黒）

<?php
$data = [
    ['id' => 1, 'name' => 'Test1'],
    ['id' => 2, 'name' => 'Test2'],
];

foreach ($data as $item) {
    echo $item['name'] . "<br>";
}

設定

Gutenberg設定の「コードブロック」で以下の設定ができます。

カラーモード

カラーモード（ダーク・ライト）を設定できます。

コピーボタン

EX限定機能です

コードをコピーするボタンを表示します。

動作しないケース・注意事項

HTTPS が必須

セキュアコンテキスト（HTTPS または localhost） でのみ動作します。HTTP 環境ではボタンは表示されますが、クリック時に「Clipboard unavailable」と表示されます。

ブラウザの対応状況

古いブラウザでは navigator.clipboard 自体が存在しないため「Clipboard unavailable」となります。

iframe 内での制限

コードブロックが <iframe> 内に表示される場合、iframe に allow="clipboard-write" 属性がないとコピーが失敗します（「Failed: check permission」と表示）。

ブラウザのクリップボード権限

一部のブラウザ（特に Firefox）ではクリップボードへの書き込みに明示的な権限許可が必要な場合があります。ユーザーが権限を拒否した場合、「Failed: check permission」と表示されます。

AMP ページ

AMP ページではカスタム JavaScript が実行されないため、コピーボタンは動作しません。st-richjs.php 自体が AMP で読み込まれない構成であれば影響はありません。

.entry-content 外の <pre> 要素

セレクタが .entry-content pre に限定されているため、サイドバーやヘッダーなど .entry-content の外にある <pre> 要素にはボタンが追加されません。