색상 텍스트를 지원하는 곳에 복사하여 붙여넣을 때 구문 하이라이트가 복사되지 않습니다

기여 기능
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]:

# firefox
<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>

# chromium
<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"에서 인라인 CSS인 style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);"을 span에 인라인으로 삽입합니다. 이는 스타일링된 대상에 붙여넣을 때 해당 스타일이 없을 가능성이 높기 때문입니다.

  1. heh ↩︎

2개의 좋아요