Skip to main content
Utilisez le composant <MDX> pour afficher ses éléments enfants en tant que MDX. Le contenu entre les balises se compile comme le reste de votre page : les titres, les blocs de code, les tableaux et les autres composants fonctionnent tous. Le composant est particulièrement utile dans les expressions {...}. Le Markdown à l’intérieur d’une expression s’affiche normalement comme du texte JSX brut. Enveloppez-le dans <MDX> pour conserver le rendu Markdown complet tout en affichant le contenu de manière conditionnelle.

Exemple

Affichez différentes sections Markdown selon une variable exportée :
Conditional Markdown
Seule la branche active s’affiche sur la page. Vous pouvez également utiliser <MDX> au niveau supérieur d’une page pour regrouper une section Markdown en un seul élément :
Block form
Laissez une ligne vide après la balise ouvrante dans la forme bloc pour que le contenu soit analysé comme du Markdown au niveau bloc. Dans les expressions, <MDX> supprime l’indentation initiale commune de son contenu, vous pouvez donc l’indenter pour l’aligner sur le code environnant.
Les titres à l’intérieur de <MDX> n’apparaissent pas dans la table des matières de la page.

Limites

  • Vous pouvez imbriquer des composants <MDX> jusqu’à 8 niveaux de profondeur.
  • Une page peut développer jusqu’à 500 fragments <MDX> dans des expressions.
Le dépassement de l’une ou l’autre limite fait échouer la compilation.