コードブロックのコピー

シンタックスハイライトされたコードブロック（``` 記法）には、右上に コピーボタン が自動で挿入されます。クリックすればクリップボードへコード本体だけがコピーされます。

# 例: このブロックの右上に、ホバーで現れるアイコンがあります
git clone https://github.com/kazumich/md2docs.git
cd md2docs
composer install

仕組み

• ボタンは public/assets/docs/js/copy-code.js が DOMContentLoaded 後に挿入します
• 対象は <pre class="language-*"> のすべて（Prism 出力に対応）
• コピー処理は navigator.clipboard.writeText を使用
• コピーすると 2 秒間アイコンが ✓ に変わります。失敗すると ✗ に変わります

アイコンの差し替え

ボタンに使われている SVG は copy-code.js の冒頭にインライン定数として定義されています。

const ICON_COPY  = '<svg ...>...</svg>';   // デフォルトのコピーアイコン
const ICON_CHECK = '<svg ...>...</svg>';   // 成功時の ✓
const ICON_FAIL  = '<svg ...>...</svg>';   // 失敗時の ✗

差し替える場合は SVG の文字列をそのまま入れ替えてください。サイズは CSS で 0.95rem 角に固定されています。

スタイルのカスタマイズ

ボタンの色・背景は src/css/style.css の .code-copy-button クラスで定義しています。Prism の暗いテーマに馴染むよう、半透明の白系で描画しています。

.code-copy-button {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  /* ... */
}
.code-copy-button.is-copied { color: #34d399; }  /* emerald-400 */
.code-copy-button.is-failed { color: #f87171; }  /* red-400 */

明るい Prism テーマに切り替えた場合は、配色を反転させると馴染みます。

機能を無効にする

themes/docs/layout.html.twig から JS の読み込みを外せば機能ごと無効になります。

<!-- 不要なら削除 -->
<script src="/assets/docs/js/copy-code.js"></script>

特定のコードブロックだけ非表示にしたい場合は CSS で個別対応できます。

pre.no-copy .code-copy-button { display: none; }