Formatear publicaciones usando markdown, BBCode y HTML

:bookmark: Esta guía de referencia detalla todas las opciones de formato disponibles en las publicaciones de Discourse, incluyendo markdown, BBCode y HTML. Especifica qué es compatible y proporciona recursos donde puede ver ejemplos.

:person_raising_hand: Nivel de usuario requerido: Todos los usuarios

Comprender el formato compatible en las publicaciones

Aunque el texto sin formato es suficiente para la mayoría de las respuestas, Discourse permite a los usuarios mejorar el formato de sus publicaciones utilizando markdown, BBCode y HTML. Esta guía explica qué tipos de formato son compatibles y cómo puede utilizarlos de manera efectiva.

También puede practicar algunos de los conceptos básicos en un tutorial interactivo enviando un mensaje personal a @discobot aquí o en cualquier sitio de Discourse.

Resumen

Esta guía cubre:

  • Sintaxis de markdown compatible
  • Etiquetas BBCode compatibles
  • Etiquetas y atributos HTML compatibles y seguros

Mejores prácticas

  • Utilice markdown principalmente por su simplicidad y legibilidad.
  • Mezcle markdown y BBCode solo cuando sea necesario, y mantenga un uso consistente.
  • Limite el uso de HTML a etiquetas simples y seguras para evitar problemas de formato y garantizar que las publicaciones sean seguras.

Markdown compatible

Discourse utiliza markdown-it para su implementación de markdown.

Algunas características de markdown de uso común incluyen:

  • Negrita: **texto**

  • Cursiva: *texto*

  • Enlace: [título](https://example.com)

  • Código en línea: `código`

  • Resaltar: <mark></mark>

  • Cita en bloque: > texto citado

  • Bloque de código:

    ```
    bloque de código
    ```
    

En publicaciones más largas (como esta), también puede ser útil agregar estructura utilizando encabezados:

# Encabezado 1
## Encabezado 2
### Encabezado 3

Nota: cuando se carga una imagen, la sintaxis de markdown para referenciar la imagen se generará automáticamente.

![leyenda|500x500](upload://image.jpeg)

Para obtener una lista completa de las características de markdown, consulte la guía interactiva.

BBCode compatible

Discourse admite un subconjunto de etiquetas BBCode comunes, algunas de las cuales se generan automáticamente para admitir formato especial, por ejemplo, cuando cita una publicación en su respuesta:

quote=\"usuario\"\]texto citado\[/quote
[quote="usuario"]texto citado[/quote]

También puede usar BBCode para ocultar texto como spoiler o como detalles

texto estropeado

[spoiler]texto estropeado[/spoiler]
details=\"clic para expandir\"\]texto oculto\[/details
[details="clic para expandir"]texto oculto[/details]

Las etiquetas BBCode para formato simple compatibles con markdown también son compatibles:

  • [b]fuerte[/b]
  • [i]énfasis[/i]
  • [u]subrayado[/u]
  • [s]tachado[/s]
  • [ul][li]opción uno[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]código[/code]

Para obtener una lista completa de las etiquetas BBCode compatibles y ejemplos, consulte las pruebas de BBCode de Discourse.

HTML compatible

Discourse admite un subconjunto seguro de HTML. Aunque puede mezclar HTML con markdown, solo se permiten etiquetas y atributos HTML específicos para garantizar la seguridad y un estilo consistente.

Algunas de las etiquetas HTML permitidas incluyen:

  • <a href="https://example.com">enlace</a>
  • <strong>texto en negrita</strong>
  • <em>texto en cursiva</em>
  • <ul><li>elemento de la lista</li></ul>
  • <img src="https://example.com/image.png" alt="descripción">

Para obtener una lista detallada de las etiquetas y atributos HTML permitidos, consulte la lista de permitidos de Discourse.

:information_source: Nota: Los estilos en línea, como <span>texto de color</span>, no son compatibles. Para estilos personalizados, consulte personalizar el contenido de las publicaciones.

Problemas comunes y soluciones

  • Las etiquetas BBCode o HTML no funcionan: Asegúrese de que las etiquetas que está utilizando formen parte del subconjunto compatible.
  • Los estilos en línea se eliminan: Discourse no admite estilos en línea por motivos de seguridad. Utilice estilos personalizados o complementos si es necesario.
  • Cambios de formato al pegar desde otros editores: Es posible que algunos formatos de texto enriquecido no se muestren correctamente. Utilice markdown para formatear el texto de manera consistente.

Preguntas frecuentes

P: ¿Puedo usar tablas en Discourse?
R: Sí, puede usar markdown para crear tablas. Para obtener más información, consulte esta guía sobre tablas.

P: ¿Por qué no funciona mi estilo en línea?
R: Discourse no admite estilos en línea en HTML por motivos de seguridad. Considere usar BBCode personalizado o la guía de estilo personalizado de Discourse.

P: ¿Puedo agregar etiquetas BBCode personalizadas?
R: Sí, puede agregar etiquetas BBCode personalizadas. Consulte el complemento BBCode de Discourse para obtener más información.

Recursos adicionales

31 Me gusta

Ninguna de estas referencias menciona tablas.

2 Me gusta

Eso es cierto, pero este otro tema sí lo hace. Adding a table to your post using markdown

3 Me gusta

El color del texto y el color de fondo del texto no parecen funcionar con <span> o bbcode, ¿me falta algo?

  • <span>Texto de markdown rojo</span>
    • Texto de markdown rojo
  • bbcode: [color=red]Texto de color rojo[/color]
    • [color=red]Texto de color rojo[/color]
2 Me gusta

Sí, parece que el estilo en línea de HTML no es compatible.

Puedes usar esta guía:

(Y verlo en acción aquí: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

O usa este plugin que extiende el soporte de BBcode:

En cuanto a las etiquetas HTML permitidas, creo que esta es la referencia:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

Aunque no encuentro las etiquetas HTML de tabla (que están permitidas) dentro por alguna razón.

Tal vez porque están referenciadas aquí:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js#L31

5 Me gusta

¡Muchas gracias por las útiles referencias!

1 me gusta

Parece que actualmente, el filtro está configurado de tal manera que los atributos rowspan y colspan en los elementos td y th se filtran. Entiendo que estos son seguros (y creo que son muy útiles): ¿estaría el equipo abierto a permitir estos atributos?

Como nota al margen, @Canapin habló sobre la ubicación de la lista permitida de etiquetas table.

El archivo .../discourse-markdown/table.js, sin embargo, parece ser una implementación específica para tablas Markdown; ¿necesitarían las tablas HTML normales una extensión separada para allowList?

Creo que rowspan y colspan son bastante seguros, pero también quiero pedir otra pieza de marcado. ¿Podríamos permitir atributos data-* en elementos de tabla? Creo que esto sería muy útil para especificar diferentes tipos de contenido de tabla, en particular para usar como ganchos para CSS personalizado.

1 me gusta

Hola :slight_smile:

Creo que esto sería más complicado de lo esperado.
Si creas una tabla HTML en tu publicación y alguien cita tu tabla, se convierte en Markdown, que no admite rowspan ni colspan.

Sospecho que habría otros problemas en los que no he pensado.

No es exactamente lo mismo, pero puedes envolver tu tabla con etiquetas [wrap] :slight_smile:
Ver: Customize posts' contents with your own styles
Pero no podrás tener atributos data- dentro de una tabla HTML (por ejemplo, para personalizar filas o celdas específicas).

edición: si tu tabla usa Markdown en lugar de HTML, puedes insertar spans con atributos data- de esta manera:

| Columna 1 | Columna 2 |
| --- | --- |
| <span data-thing>prueba</span> | prueba |
| prueba | prueba |

Pero se eliminarán si alguien cita o copia y pega tu tabla.

1 me gusta

Sería de gran ayuda si se respetaran algunos estilos CSS en línea simples y seguros en el HTML sin procesar que se agrega a las publicaciones de Discourse. Podría haber publicaciones HTML convertidas de un motor de foro anterior y/o los usuarios a veces pegan texto enriquecido con cosas como alineación de texto y/o imágenes.

Lo siguiente funciona como se esperaba:



<div align="center">
<p>Test</p>
</div>

Test

Pero esto no:


<p style="text-align: center;">Test</p>

Test


Lo mismo ocurre con el formato en línea de <span style="color: ....

Es más probable que haya estilos en línea como esos en contenido convertido / pegado de otros editores WYSIWYG.

El atributo style no está permitido en Discourse porque podría romper cosas fácilmente.

Además, Discourse tiene una cierta filosofía sobre cómo se debe presentar la información en las publicaciones y limita las etiquetas y los atributos a propósito.

El atributo align en <div está explícitamente permitido aquí: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#LL147C2-L147C16

Si fueras a migrar un foro y quisieras mantener algún estilo especial como colores, usaría Discourse BBCode y editaría el importador si fuera necesario :slight_smile:

3 Me gusta

¿Hay alguna razón por la que la marca de cita > no esté incluida en la sección de Markdown? Esta es, en mi experiencia, la cosa más común que la gente no usa cuando debería.

Sé que no puedes listar todo, pero en foros donde la gente cita a menudo otras fuentes, esto es esencial.

@one1, debería desaconsejarse la cita dentro del foro. Su reemplazo allí es [quote]. Por lo demás, estoy de acuerdo.

Estaba hablando de citar de artículos académicos.

¡Esto es súper útil! ¡Muchas gracias! :cara_sonriente:

Ese enlace está roto.

2 Me gusta

¡Gracias! Debería estar arreglado ahora.

1 me gusta

8 publicaciones fueron divididas a un nuevo tema: Uso de encabezados H1 vs. H2 en el compositor