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

Discourse から以下の内容をコピーして、メールクライアントに貼り付けたとき:

@@ -1,11 +1,11 @@
-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.
+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.
 
 Do you know a young person who:
 
-Has been volunteering with Neighbourhood Watch and making a positive impact in their community.
+• Has been volunteering with Neighbourhood Watch and making a positive impact in their community?
 
-Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)
+• Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)?
 
-Held fundraising activities with their school or college or have organised litter picks or other local events.
+• Held fundraising activities with their school or college or have organised litter picks or other local events?
 
-You think this young volunteer deserves to be recognised for their hard work and commitment to their community.
+If so, do you think this young volunteer deserves to be recognised for their hard work and commitment to their community?

……すると、色付けが複製されませんでした。

「diff」を使いましたか?もしかして、お使いのメールクライアントはそれをサポートしていないのかもしれません。

- ここにいくつかのテキストがあります
+ ここにさらにいくつかのテキストがあります

@Lilly、はい。Discourse で色付けをレンダリングするには、「diff」の指定が必要です。

  1. ```
    @@ -1,11 +1,11 @@
    -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.
    +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.
     
     Do you know a young person who:
     
    -Has been volunteering with Neighbourhood Watch and making a positive impact in their community.
    +• Has been volunteering with Neighbourhood Watch and making a positive impact in their community?
     
    -Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)
    +• Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)?
     
    -Held fundraising activities with their school or college or have organised litter picks or other local events.
    +• Held fundraising activities with their school or college or have organised litter picks or other local events?
     
    -You think this young volunteer deserves to be recognised for their hard work and commitment to their community.
    +If so, do you think this young volunteer deserves to be recognised for their hard work and commitment to their community?
    ```
    
  2. @@ -1,11 +1,11 @@
    -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.
    +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.
     
     Do you know a young person who:
     
    -Has been volunteering with Neighbourhood Watch and making a positive impact in their community.
    +• Has been volunteering with Neighbourhood Watch and making a positive impact in their community?
     
    -Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)
    +• Gives up their time to support their local community (foodbanks, community hubs and groups, homeless, faith groups)?
     
    -Held fundraising activities with their school or college or have organised litter picks or other local events.
    +• Held fundraising activities with their school or college or have organised litter picks or other local events?
     
    -You think this young volunteer deserves to be recognised for their hard work and commitment to their community.
    +If so, do you think this young volunteer deserves to be recognised for their hard work and commitment to their community?
    

私がクライアント内で CommonMark を記述していることを指しているのでしょうか?

もしそうであれば、それは他の場所の範疇です。

むしろ、ここではレンダリングされたマークアップから直接コピーすることを指しています。例如下記の通りです。

はい、もちろんそれは知っています。だからこそあなたに質問したのです。

@Lilly、/1 を見ると、私がそれを利用していることがわかります。

ああ、すみません。最初はスクリーンショットかと思いました。

「いいね!」 1

今日では、コピー方法によって異なります。

コピーボタンを使用する場合:

クリップボードには、テキストバージョンのみがコピーされます。例えば以下のような形式も含まれます:

TIMESTAMP,TARGETS,SAVE_TARGETS,MULTIPLE,UTF8_STRING,STRING,TEXT,text/plain,text/plain;charset=utf-8,chromium/x-internal-source-rfh-token,chromium/x-source-url

しかし、実際のテキストを直接コピーすると、

ブラウザがレンダリングされた HTML を直接コピーするため、Discourse がクリップボードと直接やり取りするのではなく、クリップボードを利用する側に対して text/html 形式も利用可能になります:

<span class="hljs-meta" style="color: rgb(133, 133, 133); font-style: italic; font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">@@ -1,11 +1,11 @@</span><span style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><span class="hljs-deletion" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(79, 24, 11); color: rgb(222, 113, 118); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">-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 style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><span class="hljs-addition" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(11, 66, 32); color: rgb(118, 196, 144); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">+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><span style="color: rgb(199, 199, 199); font-family: &quot;JetBrains Mono&quot;, Consolas, Monaco, monospace; font-size: 15.75px; font-style: normal; font-variant-ligatures: none; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre; background-color: rgba(0, 0, 0, 0.25); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">\n</span><br class="Apple-interchange-newline">

コピーボタンでこれをサポートするには、ライブラリによって色付けされたレンダリング済みバージョンを取得し、text/html 形式でクリップボードに送信する機能を追加する必要があります。これはおそらく「可能」でしょう(テーマコンポーネントとして実装できる可能性もあります)。それまでの間、テキストを選択してコピーする方法が常に利用可能です。

「いいね!」 3

@supermathie、ありがとうございます。だとすると、問題は私のクライアント(protonMail/webClients、5.0.115.3 β)にあるようです:

Screencast20260522180439

しかし、色付けは thunderbird-149.0.1-2.fc44 にも複製されません。あなたにとっては機能しているようですが:

もし何か違いがあるなら、どのようなことをしているのかご存知でしょうか?

ProtonMail(ウェブクライアント)にコピーすると、プレーンテキスト版が使われているように見えます。フォントを上書きしているため判別しにくいですが、書式の区別がない点に注意してください。

一方、Thunderbird に貼り付けると:

一部の書式は反映されますが、すべてではありません。

私がコピーすると、すべてが反映されます:

これを解決するには、以下のどちらかを見極める必要があります:

  • すべてのスタイルがコピーされていない
  • すべてのスタイルが貼り付けられていない

拡張機能なしのクリーンなブラウザから始めると、原因が特定できるかもしれません。例えば、拡張機能などを一切使わないプライベートブラウザで試すと、以下のような結果になります:

私が作成したこのスクリプト this script を使えば、クリップボードの内容を確認できるため、参考になるかもしれません。

(あるいは Arch » Fedora :face_with_tongue:

「いいね!」 1

@supermathie、それはProtonMailのデフォルトスタイルシートがひどいからです。

ご指摘の通り、Firefox自体(プロファイルの問題ではなく、about:profilesで新規作成したプロファイルでも再現するため)がコピーに失敗していることを確認しました。

本当にありがとうございます!

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

厳密に言えば、これはバグではありません。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. へへ ↩︎