MDX es una extensión de Markdown que permite enriquecerlo con componentes interactivos y expresiones JavaScript.
MDX (Markdown extended) es un formato de texto que combina Markdown y JSX, permitiendo escribir texto formateado y componentes interactivos de JavaScript en un mismo documento. Es ideal para crear contenido enriquecido y es ampliamente usado en la documentación de proyectos basados en React, Vue, Svelte, etc.
MDX funciona configurando un preprocesador dentro del framework de frontend que elijas. Esto permite convertir fácilmente tus archivos MDX en archivos HTML/JavaScript simples que pueden ser mostrados por tu aplicación.
Los archivos MDX generalmente se preprocesan en HTML/JavaScript durante el tiempo de build (antes de que tu aplicación sea desplegada), lo que significa que la conversión desde MDX no afecta el rendimiento de tu aplicación.
Permite incrustar componentes de React directamente en los archivos MDX usando la sintaxis JSX, lo que facilita la creación de interfaces interactivas.
Se pueden incluir expresiones de JavaScript dentro del contenido mediante llaves {}
, permitiendo lógica y personalización avanzada. Por ejemplo:
{ 1 + 1 }
evaluará la operación y mostrará 2.
Es posible definir y reutilizar componentes personalizados para enriquecer el contenido y mantener una estructura consistente en los documentos. Por ejemplo, puedes redefinir componentes HTML estandar y asignarles otro componente personalizado:
components={{p: CustomParagraph}}
Admite toda la sintaxis estándar de Markdown (encabezados, listas, enlaces, etc.), combinando simplicidad y familiaridad con funcionalidades avanzadas.
Soporta el uso de plugins para agregar funcionalidades adicionales, como procesadores para optimización de imágenes, análisis de contenido o gráficos interactivos como ChartJS.
MDX es ideal para ser usado en páginas de contenido tipo blogs, documentación, noticias, etc. Y sobre todo si necesitas más interactividad que la que puede ofrecer Markdown solamente.
Como hemos mencionado anteriormente, MDX puede usarse en muchísimos frameworks diferentes, desde generadores de sitios estáticos como Gatsby, frameworks como React, Vue, etc. Sólo hay que buscar un adaptador o librería específico para cada uno. Veamos algunos:
Para añadir metadata en tus archivos MDX puedes usar el método Frontmatter, que consiste en añadir un encabezado en el archivo MDX con un formato YAML encapsulado entre tres guiones ---
, por ejemplo:
---titulo: Página de ejemplodescripción: Ejemplo de MDX---Contenido de la página
Como el resultado final de un archivo no deja de ser HTML, se pueden estilizar los elementos normalmente como ser haría con Markdown. Excepto los componentes personalizados en los que podemos definir clase, el resto de componentes no tendrán una, por lo que es una buena práctica definir una clase que englobe los estilos:
.post h1 { font-size: 32px;}.post h2 { font-size: 24px;}
MDX es una muy buena opción para extender documentos Markdown y añadir elementos interactivos a tus páginas de contenido estático. Si deseas obtener más detalles puedes visitar la documentación en la página oficial de MDX.