Cómo embellecer tus publicaciones: Markdown, BBCode y HTML

La importancia de saber dar formato al texto

De todas las habilidades que existen, si hay una que se pueda equiparar a la de escribir bien, esa es sin duda la de escribir bonito. Porque claro, podemos coincidir en que lo más importante es el valor del contenido, pero si se ve como el orto casi nadie se lo va a querer leer.

Seguramente el texto plano sea más que suficiente para respuestas rápidas o chatear, pero cuando toca enfrentarse a la creación de un tema, el texto con formato puede ser de gran utilidad para maquetar el contenido y hacerlo más legible.

Elementos soportados [1]

A continuación están listados visualmente todos los elementos principales que (de momento) soporta Discourse, no así todas sus formas, pues he priorizado la sintaxis de Markdown frente a la de BBCode y HTML (que solo empleo cuando con Markdown no es posible).

Encabezados

Encabezado 1


# Encabezado 1

Encabezado 2


## Encabezado 2

Encabezado 3


### Encabezado 3

Encabezado 4


#### Encabezado 4

Encabezado 5

##### Encabezado 5

Encabezado 6

###### Encabezado 6

Texto

Negrita


**Negrita**
__Negrita__

Cursiva


*Cursiva*
_Cursiva_

Subrayado


[u]Subrayado[/u] [2]
<u>Subrayado</u> [3]

Tachado


~~Tachado~~

Resaltado


<mark>Resaltado</mark> [4]

Superíndice


<sup>Superíndice</sup> [5]

Subíndice


<sub>Subíndice</sub> [6]

Texto preformateado


`Texto preformateado` [7]

Texto preformateado (Bloque)

Texto preformateado (Bloque) [8]

```
Texto preformateado (Bloque)
```

[9]

Ocultar detalles

Ocultar detalles

:ok_hand: has mirao xdd


[details="Ocultar detalles"]
:ok_hand: has mirao xdd
[/details]

[10]

Spoilers

Spoiler


[spoiler]Spoiler[/spoiler] [11] [12]

Líneas horizontales


---

Citas

Cita

Cita anidada


> Cita
>> Cita anidada

[13]

Footnotes

Nota a pie de página [14]


Nota a pie de página ^[O nota oculta, según la configuración del foro.]

Hipervínculos

Esto es un enlace


Esto es un [enlace](https://lascositas.es/)

Esto es un enlace con título


Esto es un [enlace](https://lascositas.es/ "Has mirao xdd") [15]

Esto es un enlace con título para descargar un archivo


Esto es un enlace con título para [descargar un archivo|attachment](upload://qVprsydOG0QfeGPBb9tHyhxCkuS.torrent "El maquinista de La General (1926) [tmdbid-961].torrent")

Imágenes

Imagen con texto alternativo:

Banner de Las Cositas


![Banner de Las Cositas](https://lascositas.es/uploads/default/original/1X/752723069121481bbfaa729220f1295779fdb986.png)

Imagen con texto alternativo y título:

Banner de Las Cositas


![Banner de Las Cositas](https://lascositas.es/uploads/default/original/1X/752723069121481bbfaa729220f1295779fdb986.png "Las Cositas") [16]

Imagen con enlace, texto alternativo y título:

Banner de Las Cositas


[![Banner de Las Cositas](https://lascositas.es/uploads/default/original/1X/752723069121481bbfaa729220f1295779fdb986.png "Las Cositas")](https://lascositas.es) [17]

Listas

Lista numerada:

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento

Lista numerada:
1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Lista con viñetas:

  • Primer elemento
  • Segundo elemento
  • Tercer elemento
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
  • Primer elemento
  • Segundo elemento
  • Tercer elemento

Lista con viñetas:
- Primer elemento
- Segundo elemento
- Tercer elemento
+ Primer elemento
+ Segundo elemento
+ Tercer elemento
* Primer elemento
* Segundo elemento
* Tercer elemento

[18]

Anidando elementos listados:

  1. Elemento uno:
    Elemento anidado sin listar.

  2. Elemento dos:
    2.1. Elemento numerado anidado bajo otro numerado.

  3. Elemento tres:

    • Elemento con viñetas anidado bajo uno numerado.
  • Un elemento con viñetas.
    • Un elemento con viñetas anidado bajo otro con viñetas.
      • Un elemento con viñetas anidado bajo otros dos con viñetas.
        • Etc…

Anidando elementos listados:
1. Elemento uno:
Elemento anidado sin listar.

2. Elemento dos:
2.1. Elemento numerado anidado bajo otro numerado.

3. Elemento tres:
   + Elemento con viñetas anidado bajo uno numerado.

+ Un elemento con viñetas.
   + Un elemento con viñetas anidado bajo otro con viñetas.
     + Un elemento con viñetas anidado bajo otros dos con viñetas.
       + Etc...

Lista de verificación:

  • Sin marcar
  • Marcada y conmutable
  • Rellena y no conmutable
    • Elemento anidado

Lista de verificación:
- [ ] Sin marcar
- [x] Marcada y conmutable
- [X] Rellena y no conmutable
    - [X] Elemento anidado

Tablas

A B C
1 1A 1B 1C
2 2A 2B 2C
3 3A 3B 3C

|        |  A |  B |  C |
| ------ |----|----|----|
| **1**  | 1A | 1B | 1C |
| **2**  | 2A | 2B | 2C |
| **3**  | 3A | 3B | 3C |

[19]


  1. A fecha de 2025-05-14T00:00:00Z ↩︎

  2. BBCode ↩︎

  3. HTML ↩︎

  4. HTML ↩︎

  5. HTML ↩︎

  6. HTML ↩︎

  7. Son tildes invertidas (`); no confundirlas con comillas simples ('). ↩︎

  8. Hay que dejar cuatro espacios o una tabulación al comienzo de cada línea. ↩︎

  9. Son tildes invertidas(```); no confundirlas con comillas simples ('''). ↩︎

  10. BBCode ↩︎

  11. Se pueden utilizar para ocultar cualquier clase de elementos, no solo texto. ↩︎

  12. BBCode ↩︎

  13. Las citas se pueden anidar infinitamente. A parte de texto, también pueden contener imágenes u otros elementos. ↩︎

  14. O nota oculta, según la configuración del foro. ↩︎

  15. Se muestra al poner el cursor encima (hover) del enlace. ↩︎

  16. Se muestra al poner el cursor encima (hover) de la imagen. ↩︎

  17. Básicamente, en vez de enlazar una sselección de texto, lo que se enlaza es todo el bloque de código de la imagen ↩︎

  18. Se pueden utilizar indistintamente guiones -, sumas + o asteriscos * en una misma lista, pero si se mezclan, se generará un espacio entre elementos distintos. Los guiones mejor evitarlos, pues pueden generar conflictos con otros elementos. ↩︎

  19. No es necesario cuadrar las líneas visualmente para que genere la tabla bien. ↩︎

4 Me gusta