Skip to main content
Usa el componente <MDX> para renderizar sus elementos hijos como MDX. El contenido entre las etiquetas se compila como el resto de tu página: encabezados, bloques de código, tablas y otros componentes funcionan. El componente es más útil dentro de expresiones {...}. El Markdown dentro de una expresión normalmente se renderiza como texto JSX sin formato. Envuélvelo en <MDX> para mantener el renderizado completo de Markdown mientras muestras contenido de forma condicional.

Ejemplo

Muestra diferentes secciones de Markdown según una variable exportada:
Conditional Markdown
Solo la rama activa se renderiza en la página. También puedes usar <MDX> en el nivel superior de una página para agrupar una sección de Markdown en un solo elemento:
Block form
Deja una línea en blanco después de la etiqueta de apertura en la forma de bloque para que el contenido se analice como Markdown a nivel de bloque. Dentro de expresiones, <MDX> elimina la sangría inicial común de su contenido, por lo que puedes sangrarlo para que coincida con el código circundante.
Los encabezados dentro de <MDX> se fusionan en la tabla de contenido de la página en el orden del documento. Esto incluye los encabezados de ramas que nunca se renderizan, como el lado inactivo de un condicional.

Límites

  • Puedes anidar componentes <MDX> hasta 8 niveles de profundidad.
  • Una página puede expandir hasta 500 fragmentos <MDX> dentro de expresiones.
Superar cualquiera de los dos límites hace fallar la compilación.