MDX

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.

Affichez différentes sections Markdown selon une variable exportée :

export const platform = "ios";

{platform === "ios" ? (
  <MDX>
    ## Install on iOS

    Download the SDK, then run:

    ```bash
    pod install
    ```
  </MDX>
) : (
  <MDX>
    ## Install on Android

    Add the SDK to your Gradle dependencies.
  </MDX>
)}

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 :

<MDX>

  # Hello

  This heading and paragraph compile as Markdown.
</MDX>

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 blocs de code et le code en ligne à l’intérieur de <MDX> se compilent comme le code à la racine de la page. Les caractères <, >, { et } non échappés fonctionnent :

{platform === "linux" && (
  <MDX>
    Clone the repository into `<project-root>`:

    ```bash
    git clone <repository-url> <project-root>
    ```
  </MDX>
)}

Les références de caractères dans le code d’un fragment sont décodées en leurs caractères, comme le code ailleurs sur la page. < s’affiche comme <. Pour afficher un < littéral, écrivez <.

• 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.