¿Quieres que tus archivos Markdown hagan más que mostrar texto plano? Con MDX en Astro puedes inyectar variables, ejecutar JavaScript y combinar HTML dentro del mismo documento, ideal para quienes construyen blogs, portafolios o páginas de contenido dinámico.

La idea central es sencilla: MDX es una extensión que permite usar JSX (la sintaxis de llaves de React) dentro de archivos Markdown. Eso significa que puedes declarar una constante, llamarla con {variable} y renderizarla junto a tu contenido editorial.

¿Qué es MDX y por qué integrarlo en Astro?

MDX es un formato que mezcla Markdown con bloques de JavaScript usando JSX. En Astro funciona como una integración oficial que amplía lo que ya hacías con archivos .md, pero ahora con la posibilidad de exportar variables, importar componentes y mostrar datos calculados al vuelo [00:11].

¿Qué diferencia hay entre MD y MDX? Los archivos .md solo renderizan texto y HTML básico. Los .mdx permiten además declarar variables JavaScript, importar componentes y usar llaves {} para insertar valores dinámicos en el contenido.

¿Cómo instalar la integración MDX en un proyecto Astro?

Antes de tocar código, detén el servidor de desarrollo en tu terminal. Luego ejecuta el comando de instalación que añade el soporte oficial al proyecto [00:32].

• Detén el entorno local con Ctrl + C.
• Ejecuta npm install @astrojs/mdx en la versión 0.16.0.
• Espera a que npm registre la dependencia en tu package.json.

Una vez instalado, el siguiente paso es activar la integración dentro del archivo de configuración para que Astro reconozca los nuevos archivos.

¿Dónde se configura MDX dentro de Astro?

Abre el archivo astro.config en tu editor. Ahí debes importar el paquete y agregarlo al arreglo de integraciones [00:55].

js import mdx from '@astrojs/mdx';

export default { integrations: [mdx()], };

Al guardar, Astro empieza a procesar cualquier archivo con extensión .mdx como un documento híbrido entre Markdown y JavaScript.

¿Cómo crear un archivo MDX con variables y bloques de código?

Dentro de la carpeta pages crea un nuevo archivo llamado contact.mdx. El editor lo reconocerá automáticamente como Markdown potenciado [01:20].

La estructura inicial usa el mismo frontmatter que ya conoces de Markdown, donde defines metadatos como el título. Esto te permite seguir aprovechando la API de contenido de Astro para extraer y popular información donde la necesites.

mdx

title: Contact

export const date = new Date('2024-05-07');

Hello World

Hola, esto es un texto.

Hora de publicación: {date}

Fíjate en la línea export const date: estás declarando una constante de JavaScript dentro de un archivo de contenido. Luego la invocas con {date} justo donde quieres mostrarla [02:08].

¿Para qué sirve export const en un archivo MDX? Sirve para declarar variables que puedes usar dentro del mismo documento con llaves {}, o exportarlas para que otras páginas Astro las consuman como metadatos.

¿Cómo mostrar bloques de código sin ejecutarlos?

MDX respeta los fenced code blocks de Markdown. Si envuelves tu código entre tres backticks y especificas el lenguaje, Astro lo renderiza como un snippet con resaltado de sintaxis, sin ejecutarlo [02:48].

js const date = new Date();

Esto es perfecto cuando escribes tutoriales o tips: el código se ve como en un editor profesional, pero permanece inerte para el navegador. Puedes incluso mezclar HTML dentro del documento, como un <h1>Hello World</h1> que sí se renderiza como elemento real.

¿Cómo se ve el resultado final en el navegador?

Guarda los cambios y entra a /contact en tu navegador. Vas a encontrar tres cosas funcionando juntas [03:45]:

1. El título declarado en el frontmatter.
2. La fecha calculada con new Date() impresa como variable.
3. El bloque de código JavaScript mostrado como snippet visual sin ejecutarse.

Y al final, tu <h1> con el clásico Hello World renderizado como HTML normal. Toda esta mezcla ocurre sin necesidad de montar un sistema de plantillas pesado ni traer un framework completo solo para inyectar variables.

¿Puedo seguir usando layouts de Markdown con MDX?

Sí. Los archivos .mdx aceptan la propiedad layout en el frontmatter igual que los .md. Eso significa que puedes reutilizar las plantillas que ya construiste para tu blog y solo cambiar el contenido por uno enriquecido con JavaScript.

Un buen ejercicio es crear una nueva página MDX, asignarle un layout existente, agregar una variable dinámica y tomarle un screenshot al resultado para compartirlo en los comentarios. ¿Qué variable se te ocurre exportar primero en tu próximo MDX?