Guía Rápida de Markdown

¡Gracias por visitar!

Esta guía rápida de Markdown proporciona una descripción general de todos los elementos de sintaxis de Markdown. No cubre todos los casos particulares, por lo que si necesitas más información sobre alguno de estos elementos, consulta las guías de referencia para sintaxis básica y sintaxis extendida.

Sintaxis Básica

Estos son los elementos descritos en el documento de diseño original de John Gruber. Todas las aplicaciones de Markdown admiten estos elementos.

Títulos (Cabeceras)

H1

H2

H3

Negrita

texto en negrita

Cursiva

texto en cursiva

Cita

cita en bloque

Lista Ordenada

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

Lista Desordenada

  • Primer elemento
  • Segundo elemento
  • Tercer elemento

Código

código

Línea Horizontal

Enlace

La Guía de Markdown

Imagen

Soy Tux

Sintaxis Extendida

Estos elementos extienden la sintaxis básica agregando características adicionales. No todas las aplicaciones de Markdown admiten estos elementos.

Tabla

Sintaxis Descripción
Cabecera Título
Párrafo Texto

Bloque de Código Delimitado

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Nota al Pie

Aquí hay una frase con una nota al pie. 1

ID de Título

Mi Gran Título

Lista de Definición

término
definición

Tachado

El mundo es plano.

Lista de Tareas

  • Escribir la nota de prensa
  • Actualizar el sitio web
  • Contactar con los medios

Emoji

¡Eso es muy divertido! 😂

(Consulta también lista emojis)

Resaltado

Necesito resaltar estas palabras muy importantes.

Subíndice

H2O

Superíndice

X2

Matemáticas (KaTeX)

Para fórmulas matemáticas en línea (inline), puedes escribir el código rodeado de un símbolo de dólar:

$E = mc^2$

Que se renderizará de la siguiente forma: $E = mc^2$ en mitad del párrafo.

Para fórmulas matemáticas en bloque (centradas y destacadas), puedes escribir el código LaTeX dentro de doble símbolo de dólar:

$$\int_{a}^{b} x^2 \,dx = \frac{b^3 - a^3}{3}$$

Que se renderiza como:

$$\int_{a}^{b} x^2 \,dx = \frac{b^3 - a^3}{3}$$

Otro ejemplo de ecuación compleja:

$$f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

Que se renderiza como:

$$f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$

Diagrams (Mermaid.js)

1. Diagrama de Flujo (Flowchart)

Código fuente en Markdown:

```mermaid
graph TD
    A[Inicio] --> B{¿Funciona?}
    B -- Sí --> C[¡Perfecto!]
    B -- No --> D[Míralo bien]
    D --> B
```

Renderizado final en la web:

graph TD
    A[Inicio] --> B{¿Funciona?}
    B -- Sí --> C[¡Perfecto!]
    B -- No --> D[Míralo bien]
    D --> B

2. Diagrama de Secuencia

Código fuente en Markdown:

```mermaid
sequenceDiagram
    Autobús->>Usuario: Llega a la parada
    Usuario->>Autobús: Sube y paga billete
    Autobús-->>Usuario: Confirma pago
```

Renderizado final en la web:

sequenceDiagram
    Autobús->>Usuario: Llega a la parada
    Usuario->>Autobús: Sube y paga billete
    Autobús-->>Usuario: Confirma pago

3. Cronograma (Gantt Chart)

Código fuente en Markdown:

```mermaid
gantt
    title Planificación del Proyecto
    dateFormat  YYYY-MM-DD
    section Diseño
    Planificación :done,    des1, 2026-05-26,2026-05-28
    Maquetación   :active,  des2, 2026-05-28, 3d
    section Desarrollo
    Pruebas unitarias      :         des3, after des2, 5d
```

Renderizado final en la web:

gantt
    title Planificación del Proyecto
    dateFormat  YYYY-MM-DD
    section Diseño
    Planificación :done,    des1, 2026-05-26,2026-05-28
    Maquetación   :active,  des2, 2026-05-28, 3d
    section Desarrollo
    Pruebas unitarias      :         des3, after des2, 5d

4. Gráfico de Tarta (Pie Chart)

Código fuente en Markdown:

```mermaid
pie title Uso de Navegadores en 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Firefox" : 4.6
    "Otros" : 12.7
```

Renderizado final en la web:

pie title Uso de Navegadores en 2026
    "Chrome" : 64.2
    "Safari" : 18.5
    "Firefox" : 4.6
    "Otros" : 12.7

5. Gráfico de Barras (XY Chart)

Código fuente en Markdown:

```mermaid
xychart-beta
    title "Ventas Mensuales"
    x-axis [Ene, Feb, Mar, Abr, May, Jun]
    y-axis "Euros" 0 --> 5000
    bar [1200, 2000, 3100, 1800, 4200, 3900]
```

Renderizado final en la web:

xychart-beta
    title "Ventas Mensuales"
    x-axis [Ene, Feb, Mar, Abr, May, Jun]
    y-axis "Euros" 0 --> 5000
    bar [1200, 2000, 3100, 1800, 4200, 3900]

  1. Esta es la nota al pie. ↩