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> sont fusionnés dans la table des matières de la page dans l’ordre du document. Cela inclut les titres des branches qui ne s’affichent jamais, comme le côté inactif d’une condition.

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.