Mostrando cambios de código y comentarios

Esto es una pregunta sobre si existe una función (posiblemente como un plugin) o una solicitud de función en caso de que no exista…

Lo que busco es la capacidad de mostrar algo como esto dentro de las discusiones del foro de Discourse:

No solo mostrar un fragmento de código con resaltado de sintaxis específico del lenguaje (ya tenemos esto al introducirlo con <kbd>\``php, por ejemplo, y cerrarlo con ````).

Lo que quiero es poder resaltar alguna línea, tal vez comentarla y mostrar una edición en la línea. Esto suele ser útil en cualquier foro que discuta temas técnicos donde se recomienden cambios a aplicar o se señalen áreas problemáticas.

Aunque usamos GitHub para nuestro proyecto, no estoy pidiendo específicamente mostrar los cambios tal como ocurren en GitHub, sino algo que se pueda ingresar de forma independiente dentro de Discourse; la imagen anterior solo sirve como ejemplo de cómo podría verse.

Puedes mostrar diferencias así:

Una línea normal
- línea eliminada
+ línea añadida

```diff
Una línea normal
- línea eliminada
+ línea añadida
```
6 Me gusta

Vale… eso se ve :cool:

¿Hay alguna manera de combinarlo con el resaltado de sintaxis específico del idioma?

El código se ve tan soso sin él y tan genial con él.

Desafortunadamente no, aunque coincido en que sería agradable. Utilizamos highlight.js para nuestro resaltado de sintaxis. Parece que hubo una discusión similar en su repositorio de GitHub, pero decidieron que estaba fuera del alcance del proyecto.

3 Me gusta

Hhmm :thinking:

Así que tienen ese fragmento de gist allí; lo que sugieren es que la gente lo implemente fuera del resaltador (en este caso, es marked.js, aunque supongo que se podría hacer lo mismo con highlight.js).

¿Crees que Discourse podría hacerlo? O, antes de eso, ¿tiene sentido esto en términos de arquitectura?

Supongo que la idea general es simplemente hacer una búsqueda y reemplazo, eliminar las marcas de diferencia, enviarlo al resaltador de sintaxis y luego trabajar sobre él con más búsquedas y reemplazos después. Suena muy incómodo, pero la verdad es que el fragmento no es tan complicado en absoluto.

1 me gusta

Ciertamente es posible, pero no creo que sea fácil. Todo el resaltado de sintaxis se realiza en JavaScript, por lo que podría manipularse mediante un componente de tema.

1 me gusta

¿Cómo los hiciste de color?

Type out the code block like this:

```diff
A normal line
- removed line
+ added line
```

Specifying diff as the syntax means that you can use + and - at the beginning of lines to highlight them green and red.

3 Me gusta

¡Lo logré! Gracias @david

2 Me gusta

A partir de ahora usaré la estructura diff, es muy útil.

No veo que Discourse implemente esa otra sugerencia del Gist; cuanto más lo pienso, más creo que encajaría perfectamente dentro del resaltador de sintaxis, no fuera de él.

Básicamente, con el paso de los años tiene sentido añadir algunas funciones a los resaltadores de sintaxis, y la tarea básica de mostrar el código de forma fácil de leer se extiende naturalmente para mostrar también parte de la dinámica del código.

Qué cambió, dónde, quién lo hizo; a qué estoy apuntando; qué comentario útil explica la relación del código con el lugar donde se publica, etc.

Gracias a todos por su participación en esta discusión.

1 me gusta

¿Quizás una alternativa?

<del>del</del> 
<ins>ins</ins> 

del
ins

4 Me gusta