Formateando publicaciones usando markdown, BBCode y HTML

:bookmark: This reference guide details all the formatting options available in Discourse posts, including markdown, BBCode, and HTML. It specifies what is supported and provides resources where you can see examples.

:person_raising_hand: Required user level: All users

Understanding supported formatting in posts

While plain text is sufficient for most replies, Discourse allows users to enhance the formatting of their posts by using markdown, BBCode, and HTML. This guide explains what types of formatting are supported and how you can use them effectively.

You can also practice some of the basics in an interactive tutorial by sending a personal message to @discobot here or on any Discourse site.

Summary

This guide covers:

  • Supported markdown syntax
  • Supported BBCode tags
  • Supported and safe HTML tags and attributes

Best practices

  • Use markdown primarily for its simplicity and readability.
  • Mix markdown and BBCode only when necessary, and keep usage consistent.
  • Limit the use of HTML to simple, safe tags to avoid formatting issues and ensure posts are secure.

Supported markdown

Discourse uses markdown-it for its markdown implementation.

Some commonly used markdown features include:

  • Bold: **text**
  • Italic: *text*
  • Link: [title](https://example.com)
  • Inline code: `code`
  • Highlight: <mark></mark>
  • Code block:
    ```
    code block
    ```
    

In longer posts (like this one), it can also be helpful to add structure using headings:

# Heading 1
## Heading 2
### Heading 3

Note: when an image is uploaded, the markdown syntax to reference the image will automatically be generated.

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

For a full list of markdown features, please refer to the interactive guide.

Supported BBCode

Discourse supports a subset of common BBCode tags, some of which are generated automatically to support special formatting, for example when you quote a post in your reply:

[quote="user"]quoted text[/quote]

You can also use BBCode to mark hide text as a spoiler or as details

spoiled text

[spoiler]spoiled text[/spoiler]
click to expand

hidden text

[details="click to expand"]hidden text[/details]

BBCode tags for simple formatting supported by markdown or are also supported:

  • [b]strong[/b]
  • [i]emphasis[/i]
  • [u]underlined[/u]
  • [s]strikethrough[/s]
  • [ul][li]option one[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]code[/code]

For a complete list of supported BBCode tags and examples, check the Discourse BBCode tests.

Supported HTML

Discourse supports a safe subset of HTML. While you can mix HTML with markdown, only specific HTML tags and attributes are allowed to ensure security and consistent styling.

Some of the allowed HTML tags include:

  • <a href="https://example.com">link</a>
  • <strong>bold text</strong>
  • <em>italic text</em>
  • <ul><li>list item</li></ul>
  • <img src="https://example.com/image.png" alt="description">

For a detailed list of allowed HTML tags and attributes, refer to Discourse’s allow-list.

:information_source: Note: Inline styles, like <span style="color:red">colored text</span>, are not supported. For custom styles, see customize post contents.

Common issues and solutions

  • BBCode or HTML tags not working: Ensure the tags you are using are part of the supported subset.
  • Inline styles being stripped: Discourse does not support inline styles for security reasons. Use custom styles or plugins if necessary.
  • Formatting changes on pasting from other editors: Some rich-text formats may not render correctly. Use markdown to format text consistently.

FAQs

Q: Can I use tables in Discourse?
A: Yes, you can use markdown to create tables. For more information, see this guide on tables.

Q: Why isn’t my inline style working?
A: Discourse does not support inline styles in HTML for security reasons. Consider using custom BBCode or the Discourse custom styling guide.

Q: Can I add custom BBCode tags?
A: Yes, you can add custom BBCode tags. Refer to the Discourse BBCode plugin for more information.

Additional resources

Last edited by @MarkDoerr 2024-07-11T00:31:08Z

Check documentPerform check on document:
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

2 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]
1 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: