Una introducción a MDXJS | Programar Plus

Markdown ha sido tradicionalmente el formato favorito de los programadores para escribir documentación. Es lo suficientemente simple para que casi todos aprendan y se adapten, al tiempo que facilita el formateo y el estilo del contenido. Fue tan popular que los comandos de Markdown se han utilizado en aplicaciones de chat como Slack y Whatsapp como aplicaciones de documentos, como Dropbox Paper y Notion. Cuando GitHub introdujo la compatibilidad con Markdown para la documentación README, también generaron contenido HTML a partir de ella, por lo que, por ejemplo, podríamos colocar algunos elementos de enlace e imagen y se procesarían perfectamente.

Aunque Markdown no se rompe por ningún tramo de la imaginación, siempre hay espacio para mejorar. Aquí es donde entra Markdown Extended (MDX).

¿Cuándo consideraríamos MDX sobre Markdown? Una cosa sobre MDX es que JavaScript se puede integrar en los casos en los que se usa Markdown normal. Aquí hay algunos ejemplos que ilustran lo útil que es:

  • Frontend Armory usa MDX en su patio de juegos educativo, Demoboard. El patio de recreo es compatible con MDX de forma nativa para crear páginas que sirvan como demostración y documentación, lo cual es súper ideal para demostrar los conceptos y componentes de React.
  • Brent Jackson tiene una nueva forma de crear sitios web combinando MDX y Styled System. Cada página está escrita en MDX y Styled System diseña los bloques. Actualmente está en desarrollo, pero puede encontrar más detalles en el sitio web.
  • El uso de mdx-deck o Spectacle podría hacer que su próxima presentación sea más interesante. ¡Puede mostrar demostraciones directamente en su plataforma sin cambiar de pantalla!
  • MDX Go, ok-mdx y Docz proporcionan herramientas para documentar bibliotecas de componentes en MDX. Puede colocar componentes directamente en la documentación con Markdown y simplemente funcionará™.
  • Algunos sitios, incluidos Zeit Now y Prisma docs, usan MDX para escribir contenido.

MDX brilla en los casos en los que desea mantener un blog basado en React. Usarlo significa que ya no tiene que crear páginas de componentes React personalizadas cuando quiere hacer algo imposible en Markdown (o crear un complemento). Lo he estado usando en mi blog durante más de un año y me ha encantado la experiencia Uno de mis proyectos favoritos hasta ahora es un componente de React al que llamo Playground que se puede usar para hacer demostraciones de pequeños fragmentos de HTML/CSS/JavaScript mientras permite que los usuarios editen el código. Claro, podría haber usado algún servicio de terceros e incrustar demostraciones con él, pero de esta manera no tengo que cargar scripts de terceros en absoluto.

Hablando de incrustación, MDX hace que sea muy fácil incrustar iFrames creados por servicios de terceros, por ejemplo, YouTube, Vimeo, Giphy, etc.

Úselo junto con Markdown

Sabrá que un archivo está escrito en MDX porque tiene un .mdx extensión en el nombre del archivo. Pero veamos cómo se ve realmente escribir algo en MDX.

import InteractiveChart from "../path/interactive-chart";


# Hello - I'm a Markdown heading


This is just markdown text


<InteractiveChart />

¿Mira eso? Todavía es posible usar Markdown y podemos escribirlo junto con los componentes de React cuando queremos visualizaciones o estilos interactivos. Aquí hay un ejemplo de mi cartera:

Otro beneficio de MDX es que, al igual que los componentes, los archivos se pueden componer. Esto significa que las páginas pueden dividirse en varios fragmentos y reutilizarse, renderizándolas todas a la vez.

import Header from "./path/Header.mdx"
import Footer from "./path/Footer.mdx"

<Header />

# Here goes the actual content.

Some random content goes [here](link text)

<Footer />

Implementación de MDX en aplicaciones

Hay complementos MDX para la mayoría de las plataformas de integración comunes basadas en React, como Gatsby y Next.

Para integrarlo en un proyecto de crear-reaccionar-aplicación, MDX proporciona una macro de Babel que se puede importar a la aplicación:

import { importMDX } from './mdx.macro'
 
const MyDocument = React.lazy(() => importMDX('./my-document.mdx'))
 
ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <MyDocument />
  </React.Suspense>,
  document.getElementById('root')
);

También puede probar MDX en el área de juegos que crearon para él.

Los colaboradores de MDX están trabajando muy activamente para brindar soporte para Vue. Ya hay una muestra disponible en GitHub. Sin embargo, esto está en Alpha y no está listo para la producción.

Soporte del editor

El resaltado de sintaxis y el autocompletado han aumentado la compatibilidad con VS Code, Vim y Sublime Text. Sin embargo, en uso, estos tienen algunos bordes afilados y son difíciles de navegar. Muchos de estos provienen de la incapacidad de predecir si estamos optando por JavaScript o Markdown dentro del contexto de una página. Eso es algo que sin duda se puede mejorar.

Complementos y extensiones MDX

Una ventaja clave de MDX es que forma parte del consorcio unificado de contenido que organiza el contenido de comentarios. Esto significa que MDX puede respaldar directamente el vasto ecosistema de complementos de comentarios y complementos de renovación; no hay necesidad de reinventar la rueda. Algunos de estos complementos, incluidos remark-images y remark-redact, son notables, por decir lo menos. Para usar un complemento con MDX, puede agregarlo a su cargador o complemento correspondiente. Incluso puede escribir sus propios complementos MDX consultando la Guía MDX para crear complementos.

MDX tiene solo unos pocos años, pero su influencia ha ido creciendo en el espacio de contenido. Desde escribir publicaciones de blog y visualizar datos hasta crear demostraciones y presentaciones interactivas, MDX es ideal para muchos usos, mucho más allá de lo que hemos cubierto aquí en esta introducción.

(Visited 6 times, 1 visits today)