Syntax highlighting, when copying-and-pasting to somewhere that supports coloured text, is not copied

[rokejulianlockhart (Mr. Beedell, Roke Julian Lockhart (RJLB))]

When I copied the undermentioned, from Discourse, to my e-mail client:

@@ -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?

…it didn’t duplicate the colouration.

[Lilly (Lillian)]

did you use diff? perhaps your email client doesn’t support it?

- here is some text
+ here is some more text

[rokejulianlockhart (Mr. Beedell, Roke Julian Lockhart (RJLB))]

@Lilly

Did you use diff?

@Lilly, yes. Specifying diff is required, for colourisation to render, on Discourse:

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?
   

Are you referring to me authoring CommonMark in my client?

Using text/markdown in emails

If so, that would be the purview for elsewhere:

Fenced code blocks should add class to `code` rather than `pre`, matching the...

Instead, I am referring to copying directly from rendered markup here, like:

When copying content from a published post or preview, don't copy links to embedded images; copy the images

Recently, I wanted to duplicate the content of a Discourse post into a message, to be sent via e-mail. That worked well. However, that post has since been deleted, so the images have been removed from the server: [1] [image] [2] Instead, having the images themselves duplicated into the clipboard (perhaps, via a src="data:image/png;base64, rather than an src="https:), would be an improvement. This more prominently applies to content copied from the previewer. [3] gitlab.com/-/snippets/490…

[Lilly (Lillian)]

@rokejulianlockhart

@Lilly, yes. Specifying diff is required, for colourisation to render, on Discourse:

yes i obviously know that, which is why i was asking you

[rokejulianlockhart (Mr. Beedell, Roke Julian Lockhart (RJLB))]

@Lilly, you can see, in /1, that I’ve utilised it, however.

[Lilly (Lillian)]

oh my apologies, i initially thought that was a screenshot

[supermathie (Michael Brown)]

Today, it depends on how you copy it.

Using the copy button:

puts only the text version into the clipboard, among others:

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

but copying the actual text works:

since you’re copying the rendered HTML via the browser instead of having Discourse interact with the clipbard, text/HTML is available as a format to clipboard consumers:

<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 \xe2\x80\x93 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\xe2\x80\x9324, 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">

To support this via the copy button, we’d need to add the ability to take the rendered colorised version (since it’s colorised via a library) and send it to the clipboard with the text/html format. It’s likely possible (maybe even as a theme component) but meanwhile there’s always the option to copy via selecting.

[rokejulianlockhart (Mr. Beedell, Roke Julian Lockhart (RJLB))]

@supermathie

but copying the actual text works:

@supermathie, thanks. Then, the problem would appear to be my client (protonMail/webClients, 5.0.115.3 β):

However, the colouration also fails to duplicate into thunderbird-149.0.1-2.fc44, despite it appearing to duplicate, as desired, for you:

Any idea of what you do differently, if anything?

[supermathie (Michael Brown)]

When you copy into protonmail, being a web client, it looks like it’s using the plain text version. Note the lack of formatting differentiation, though it’s hard to tell since you’re overriding fonts.

Contrast with pasting into Thunderbird:

It’s picking up on some of the formatting, but not all.

If I copy, it picks up everything:

I guess to figure this out, you have to differentiate whether:

• not all styles are copying
• not all styles are pasting

Starting from a clean browser with no extensions might help figure it out? e.g. if I use a private browser with no extensions etc. I get:

this script I wrote will also give you visibility into the clipboard, which may help.

(or maybe Arch » Fedora )

[rokejulianlockhart (Mr. Beedell, Roke Julian Lockhart (RJLB))]

@supermathie

Note the lack of formatting differentiation, though it’s hard to tell since you’re overriding fonts.

@supermathie, that’s because ProtonMail’s default stylesheet is abysmal.

@supermathie

I guess to figure this out, you have to differentiate whether:

• not all styles are copying
• not all styles are pasting

Per your guidance, I have ascertained that Firefox itself (not even my profile, for it reproduces with a new entrant in about:profiles) is failing to copy it:

meta.discourse.org/t/403639/9 - 2041778 - Firefox does not add colouration to...

I am very thankful!

[supermathie (Michael Brown)]

@rokejulianlockhart

Firefox itself

Yep! I get the same behaviour.

And strictly speaking, it’s not a bug. Firefox is copying the HTML exactly as requested:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<p dir="auto">When I copied the undermentioned, from Discourse, to my e-mail client:</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>

The resulting difference after pasting is from Chromium inlining the styles whereas Firefox is not. Paring it down to a single line highlights^[1] what’s going on:

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

(linebreaks added)

Chromium inlines from class="hljs-deletion" the inline CSS style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);" to the span, since what it’s pasting into probably doesn’t have that style.

---

1. heh ↩︎