Guía sobre el formato de texto MDX

MDX es una extensión de Markdown que permite enriquecerlo con componentes interactivos y expresiones JavaScript.

guia-formato-texto-mdx

¿Qué es MDX?

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.

¿Cómo funciona MDX?

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.

Características de MDX

Componentes JSX

Permite incrustar componentes de React directamente en los archivos MDX usando la sintaxis JSX, lo que facilita la creación de interfaces interactivas.

Expresiones JavaScript

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.

Elementos personalizados

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}}

Elementos Markdown

Admite toda la sintaxis estándar de Markdown (encabezados, listas, enlaces, etc.), combinando simplicidad y familiaridad con funcionalidades avanzadas.

Plugins externos

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.

¿Cuándo usar MDX?

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.

Cómo configurar MDX

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:

Frontmatter

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 ejemplo
descripción: Ejemplo de MDX
---
Contenido de la página

CSS en MDX

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;
}

Conclusión

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.