El resaltado de sintaxis no se copia al copiar y pegar en un lugar que admita texto con color

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

Cuando copié lo que sigue, de Discourse, a mi cliente de correo electrónico:

@@ -1,11 +1,11 @@
-Premio al joven voluntario: celebramos a los jóvenes voluntarios de entre 16 y 24 años que se esfuerzan al máximo en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
+El Premio al Joven Voluntario celebra a los jóvenes voluntarios de entre 16 y 24 años que se esfuerzan al máximo en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
 
 ¿Conoces a un joven que:
 
-Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad.
+• Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad?
 
-Dispone de su tiempo para apoyar a su comunidad local (bancos de alimentos, centros y grupos comunitarios, personas sin hogar, grupos religiosos)
+• Dispone de su tiempo para apoyar a su comunidad local (bancos de alimentos, centros y grupos comunitarios, personas sin hogar, grupos religiosos)?
 
-Ha realizado actividades de recaudación de fondos con su escuela o instituto o ha organizado recogidas de basura u otros eventos locales.
+• Ha realizado actividades de recaudación de fondos con su escuela o instituto o ha organizado recogidas de basura u otros eventos locales?
 
-Piensas que este joven voluntario merece ser reconocido por su arduo trabajo y su compromiso con su comunidad.
+En tal caso, ¿crees que este joven voluntario merece ser reconocido por su arduo trabajo y su compromiso con su comunidad?

…no se replicó la coloración.

[Lilly (Lillian)]

¿Usaste diff? Tal vez tu cliente de correo no lo soporta.

- aquí hay algún texto
+ aquí hay un poco más de texto

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

@Lilly

¿Usaste diff?

@Lilly, sí. Es necesario especificar diff para que la coloración se renderice en Discourse:

1. ```
   @@ -1,11 +1,11 @@
   -Premio al voluntariado juvenil – en honor a los jóvenes voluntarios, de 16 a 24 años, que hacen un esfuerzo adicional en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
   +El Premio al Voluntariado Juvenil celebra a los jóvenes voluntarios, de 16 a 24 años, que hacen un esfuerzo adicional en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
    
    ¿Conoces a un joven que:
    
   -Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad.
   +• Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad.
    
   -Dedica su tiempo a apoyar a su comunidad local (bancos de alimentos, centros comunitarios y grupos, personas sin hogar, grupos religiosos)
   +• Dedica su tiempo a apoyar a su comunidad local (bancos de alimentos, centros comunitarios y grupos, personas sin hogar, grupos religiosos).
    
   -Ha organizado actividades de recaudación de fondos en su escuela o universidad, o ha organizado limpiezas de basura u otros eventos locales.
   +• Ha organizado actividades de recaudación de fondos en su escuela o universidad, o ha organizado limpiezas de basura u otros eventos locales.
    
   -Piensas que este joven voluntario merece ser reconocido por su arduo trabajo y compromiso con su comunidad.
   +En tal caso, ¿piensas que este joven voluntario merece ser reconocido por su arduo trabajo y compromiso con su comunidad?
   ```
   

2. @@ -1,11 +1,11 @@
   -Premio al voluntariado juvenil – en honor a los jóvenes voluntarios, de 16 a 24 años, que hacen un esfuerzo adicional en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
   +El Premio al Voluntariado Juvenil celebra a los jóvenes voluntarios, de 16 a 24 años, que hacen un esfuerzo adicional en sus comunidades locales, demostrando nuestros valores y la importancia de la conexión y la acción.
    
    ¿Conoces a un joven que:
    
   -Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad.
   +• Ha estado haciendo voluntariado con Neighbourhood Watch y generando un impacto positivo en su comunidad.
    
   -Dedica su tiempo a apoyar a su comunidad local (bancos de alimentos, centros comunitarios y grupos, personas sin hogar, grupos religiosos)
   +• Dedica su tiempo a apoyar a su comunidad local (bancos de alimentos, centros comunitarios y grupos, personas sin hogar, grupos religiosos).
    
   -Ha organizado actividades de recaudación de fondos en su escuela o universidad, o ha organizado limpiezas de basura u otros eventos locales.
   +• Ha organizado actividades de recaudación de fondos en su escuela o universidad, o ha organizado limpiezas de basura u otros eventos locales.
    
   -Piensas que este joven voluntario merece ser reconocido por su arduo trabajo y compromiso con su comunidad.
   +En tal caso, ¿piensas que este joven voluntario merece ser reconocido por su arduo trabajo y compromiso con su comunidad?
   

¿Te refieres a que yo redacte CommonMark en mi cliente?

Using text/markdown in emails

En tal caso, eso correspondería a otro ámbito:

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

En cambio, me refiero a copiar directamente desde el marcado renderizado aquí, como en:

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, sí. Es necesario especificar diff para que el coloreado se renderice en Discourse:

Sí, obviamente lo sé, por eso te estaba preguntando.

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

@Lilly, como puedes ver en /1, lo he utilizado, sin embargo.

[Lilly (Lillian)]

Oh, mis disculpas, inicialmente pensé que era una captura de pantalla.

[supermathie (Michael Brown)]

Hoy en día, depende de cómo lo copies.

Usando el botón de copiar:

solo coloca la versión de texto en el portapapeles, entre otros:

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

pero copiar el texto real funciona:

ya que estás copiando el HTML renderizado a través del navegador en lugar de que Discourse interactúe con el portapapeles; text/html está disponible como formato para los consumidores del portapapeles:

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

Para apoyar esto mediante el botón de copiar, necesitaríamos agregar la capacidad de tomar la versión coloreada renderizada (ya que se colorea mediante una biblioteca) y enviarla al portapapeles con el formato text/html. Es probable que sea posible (quizás incluso como un componente de tema), pero mientras tanto, siempre existe la opción de copiar seleccionando el texto.

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

@supermathie

pero copiar el texto real funciona:

@supermathie, gracias. Entonces, el problema parecería ser mi cliente (protonMail/webClients, 5.0.115.3 β):

Sin embargo, la coloración tampoco logra replicarse en thunderbird-149.0.1-2.fc44, a pesar de que parece funcionar para ti:

¿Tienes alguna idea de qué haces diferente, si es que haces algo?

[supermathie (Michael Brown)]

Cuando copias a ProtonMail, al ser un cliente web, parece que se está utilizando la versión de texto plano. Observa la falta de diferenciación en el formato, aunque es difícil de determinar ya que estás sobrescribiendo las fuentes.

En contraste, al pegar en Thunderbird:

Está captando algo del formato, pero no todo.

Si copio, captura todo:

Supongo que para resolver esto, hay que diferenciar si:

• no se están copiando todos los estilos
• no se están pegando todos los estilos

Comenzar desde un navegador limpio sin extensiones podría ayudar a averiguarlo. Por ejemplo, si uso un navegador privado sin extensiones, obtengo:

este script que escribí también te dará visibilidad del portapapeles, lo cual podría ayudar.

(o quizás Arch » Fedora )

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

@supermathie

Obsérvese la falta de diferenciación en el formato, aunque es difícil de determinar ya que estás sobrescribiendo las fuentes.

@supermathie, eso es porque la hoja de estilos predeterminada de ProtonMail es pésima.

@supermathie

Supongo que para resolver esto, hay que diferenciar si:

• no se están copiando todos los estilos
• no se están pegando todos los estilos

Siguiendo tus indicaciones, he determinado que el propio Firefox (ni siquiera mi perfil, ya que el problema se reproduce con un nuevo usuario en about:profiles) no logra copiarlo:

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

¡Muchas gracias!

[supermathie (Michael Brown)]

@rokejulianlockhart

El propio Firefox

¡Sí! Obtengo el mismo comportamiento.

Y, estrictamente hablando, no es un error. Firefox está copiando el HTML exactamente como se solicitó:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<p dir="auto">Cuando copié lo mencionado a continuación, desde Discourse, a mi cliente de correo electrónico:</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>

La diferencia resultante después de pegar proviene de que Chromium incrusta los estilos, mientras que Firefox no. Reducirlo a una sola línea resalta^[1] lo que está ocurriendo:

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

(se añadieron saltos de línea)

Chromium incrusta desde class="hljs-deletion" el CSS en línea style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 224, 224); color: rgb(192, 45, 46);" al elemento span, ya que probablemente lo que se está pegando no tiene ese estilo.

---

1. jaja ↩︎