Markdown y MDX en Astro

Gestiona contenido técnico y editorial combinando simplicidad de Markdown con potencia de componentes MDX.

Markdown es ideal para contenido rápido y legible; MDX añade componentes cuando necesitas expresividad adicional.

La combinación te permite escribir documentación o blog técnico sin perder capacidad de diseño y reutilización.

En proyectos reales, esta mezcla acelera publicación sin sacrificar consistencia visual.

Aprender cuándo usar .md y cuándo .mdx es una decisión de arquitectura de contenido.

  • No todo necesita MDX.
  • Primero contenido, luego mejora progresiva con componentes.
  • Empieza con Markdown puro.
  • Migra a MDX solo en páginas que lo necesiten.
  • Mantén librería de componentes de contenido reutilizable.

Cuándo usar cada formato

No todo necesita MDX.

Patrón práctico de uso

Primero contenido, luego mejora progresiva con componentes.

  • Empieza con Markdown puro.
  • Migra a MDX solo en páginas que lo necesiten.
  • Mantén librería de componentes de contenido reutilizable.
Astro
10

Markdown y MDX en Astro

Gestiona contenido técnico y editorial combinando simplicidad de Markdown con potencia de componentes MDX.

Código del tema: const posts = await getCollection("blog");

📘 Teoría

Cuándo usar cada formato

No todo necesita MDX.

1

Markdown (.md)

Perfecto para posts textuales, changelogs y notas técnicas.

  • Más simple de editar.
  • Menos acoplamiento a componentes.
2

MDX (.mdx)

Ideal cuando necesitas componentes embebidos en contenido.

  • Callouts, tabs, demos y bloques enriquecidos.
  • Más flexible para docs avanzadas.

Patrón práctico de uso

Primero contenido, luego mejora progresiva con componentes.

  • Empieza con Markdown puro.
  • Migra a MDX solo en páginas que lo necesiten.
  • Mantén librería de componentes de contenido reutilizable.

🧪 Aprende probando

Ejemplo Bloque Markdown básico Estructura típica de un artículo técnico.

🏁 Retos

Reto Reto: justificar uso de MDX Indica por qué usarías MDX en una página concreta.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .