> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# MDX

> Utilisez le composant MDX pour afficher du Markdown dans des expressions et conditions JSX et compiler titres, code et tableaux comme votre page.

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
</div>

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

````mdx Conditional Markdown theme={null}
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 Block form theme={null}
<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
</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 Placeholders in fragment code theme={null}
{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
</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.


## Related topics

- [Extension Mintlify MDX](/docs/fr/cli/mdx-extension.md)
- [Bouton Publish désactivé à cause d'un MDX non valide](/docs/fr/help-center/publish-button-disabled-invalid-mdx.md)
- [Migrer les pages d’API MDX vers la navigation OpenAPI](/docs/fr/guides/migrating-from-mdx.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.