# MDX (/fr/components/mdx)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 685 · updated: 2026-09-23 -->
Related: [Accordion](/fr/components/accordions.md), [Badge](/fr/components/badge.md), [Bannière](/fr/components/banner.md), [Encarts](/fr/components/callouts.md), [Cartes](/fr/components/cards.md), [Groupes de code](/fr/components/code-groups.md)

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.

<div id="example">
  ## Exemple [#exemple]
</div>

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

````mdx title="Conditional Markdown"
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 title="Block form"
<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.

<Note>
  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.
</Note>

<div id="code-in-fragments">
  ## Code dans les fragments [#code-dans-les-fragments]
</div>

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 :

````mdx title="Placeholders in fragment code"
{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. `&lt;` s'affiche comme `<`. Pour afficher un `&lt;` littéral, écrivez `&amp;lt;`.

<div id="limits">
  ## Limites [#limites]
</div>

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