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. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com