色付きテキストをサポートする場所にコピー＆ペーストする際、構文ハイライトはコピーされない

貢献 バグ
11

その通りです！私も同じ挙動になります。

厳密に言えば、これはバグではありません。Firefox は要求された通りに HTML をそのままコピーしています：

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<p dir="auto">Discourse から以下の内容をコピーして、メールクライアントに貼り付けたとき：</p>
<pre data-code-wrap="diff" dir="auto" class="codeblock-buttons">
		<div class="codeblock-button-wrapper" style="right: 0px;"></div>
		<code class="lang-diff hljs language-diff" data-highlighted="yes">
			<span class="hljs-meta">@@ -1,11 +1,11 @@</span>
			<span class="hljs-deletion">-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
			<span class="hljs-addition">+The Young Volunteer Award celebrates young volunteers, aged 16–24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.</span>
		</code>
	</pre>

貼り付け後に生じる差異は、Chromium がスタイルをインライン化しているのに対し、Firefox はそうしていないことに起因します。1 行に絞って見てみると、何が起きているかが浮き彫りになります[1]：

<span
  class="hljs-deletion">
-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.
</span>

<span
  class="hljs-deletion"
  style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);">
-Young volunteer award – celebrating young volunteers, aged 16-24, who go the extra mile in their local communities, demonstrating our values and the importance of connection and action.
</span>

（改行を追加）

Chromium は、貼り付け先の先ほどおそらくそのスタイルが存在しないため、class="hljs-deletion" から style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);" というインライン CSS を span にインライン化します。

  1. へへ ↩︎

「いいね！」 1