Guía Rápida de Markdown

¡Gracias por visitar La Guía de Markdown!

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

Citas y Bloques de Alerta (Callouts)

Cita por defecto (estilo base del tema con tono morado sutil).

Nota informativa: Esta es una caja NOTE o INFO para detalles y contexto.

Consejo útil: Usa la clase TIP o SUCCESS para recomendaciones y buenas prácticas.

Atención: Usa la clase WARNING para avisos importantes que requieren precaución.

Peligro: Usa la clase DANGER o ERROR para advertencias críticas o errores graves.

Importante: Usa la clase IMPORTANT para destacar información esencial con el color corporativo.

Neutral / Precaución: Usa la clase CAUTION o NEUTRAL para notas secundarias.

"Esta es una cita clásica de autor con tipografía en cursiva."

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 y Descarga de Archivos (Servidor de Assets)

• La Guía de Markdown (Enlace externo)
• 📄 Descargar Guía de Referencia Nokia ONT (PDF local)

Imagen Local (Servidor de Assets)

Imagen Remota Externa

Sintaxis Extendida

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

Tabla con Alineación y Formatos de Texto

Puedes alinear las columnas usando dos puntos (:) en la fila separadora (:--- izquierda, :---: centro, ---: derecha) y combinar cualquier estilo de texto en su interior:

Tip de alineación de tablas:

• :--- : Alinea el texto a la izquierda (por defecto).
• :---: : Alinea el texto al centro.
• ---: : Alinea el texto a la derecha (ideal para números, precios o cantidades).

Bloque de Código Delimitado

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

Nota al Pie

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

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 Copiar y pegar emojis)

Resaltado

Necesito resaltar estas palabras muy importantes.

Subíndice

H₂O

Superíndice

X²

---

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]

---

Vídeo Embebido (YouTube & Vimeo)

1. Vídeo de YouTube con <iframe>:

2. Vídeo de Vimeo con <iframe>:

3. Auto-embed (sólo pegando la URL en una línea aislada):

---

Spoilers y Contenido Plegable (Details)

1. Spoiler en línea (Sintaxis ++texto++)

Para ocultar una solución o sorpresa:

Spoiler

Este es un texto secreto que requiere interacción para verse

.

2. Bloque Plegable / Acordeón HTML nativo (<details>)

👉 Haz clic aquí para ver información técnica avanzada

Este es un bloque plegable nativo en HTML/Markdown. Es perfecto para preguntas frecuentes (FAQ), soluciones de ejercicios o código secundario extenso.