Composants MDX & callouts : Markdown avec des superpouvoirs

Utilisez des composants Astro à l'intérieur de Markdown — le composant <Callout> intégré, les expressions JS, les slots, et un livre de recettes pour vos propres composants MDX.

25 avril 2026 Tutoriels 2 min de lecture

Quand la frontière entre données et présentation s’estompe, MDX est votre allié. Vous pouvez mélanger des composants au goût JSX dans du Markdown sans quitter le flux d’écriture.

Cet article est lui-même un fichier .mdx. Ouvrez src/content/posts/fr/mdx-components-and-callouts.mdx pour voir comment les démos ci-dessous sont écrites.

Utilisez `.md` quand…	Utilisez `.mdx` quand…
Markdown standard suffit.	Vous voulez importer un composant Astro.
Vous voulez rester portable.	Vous avez besoin de `{new Date()}`.
Vous écrivez beaucoup de `{}` en clair.	Vous composez des widgets avec mise en page.

Les deux formats coexistent dans le dossier posts/ — le build les trouve via **/*.{md,mdx}.

Le thème embarque un petit composant Callout accessible, importable dans tout article MDX :

---
title: Exemple
---

import Callout from '../../../components/Callout.astro';

<Callout type="info" title="Attention">
  Ceci est un callout d'information.
</Callout>

Il gère quatre variantes sémantiques — elles partagent les tokens sémantiques de daisyUI, donc restent lisibles dans les deux thèmes.

MDX évalue { ... } comme du JavaScript à la compilation. Aujourd’hui nous sommes le Mon May 11 2026 selon le serveur de build, et 2 + 2 vaut 4.

Les variables définies en haut du fichier sont aussi accessibles :

export const release = 'v6.0.0';

La dernière version est **{release}**.

Vous n’êtes pas limité à Callout. Tout composant Astro peut être importé avec un chemin relatif. Depuis un article à src/content/posts/fr/foo.mdx, le chemin vers un composant est ../../../components/Foo.astro :

import Panel from '../../../components/Panel.astro';

<Panel>
  <p>Contenu Panel intégré ici.</p>
</Panel>

Les composants Astro acceptent des slots par défaut dans MDX. Tout ce qui se trouve entre balise ouvrante et fermante est passé via <slot /> :

<Callout type="success">
  **N'importe quoi** peut aller ici — _Markdown_, [liens](/fr/), même des composants imbriqués.
</Callout>

Les slots nommés fonctionnent aussi si votre composant les déclare :

<MonWidget>
  <Fragment slot="header">Un titre</Fragment>
  Le corps va dans le slot par défaut.
</MonWidget>

Envie d’un raccourci <Tip> ? Glissez un petit wrapper dans src/components/Tip.astro :

---
import Callout from './Callout.astro';
---

<Callout type="info" title="Astuce">
  <slot />
</Callout>

…puis utilisez-le depuis tout fichier MDX :

import Tip from '../../../components/Tip.astro';

<Tip>Redémarrez `bun run dev` après modification de `astro.config.mjs`.</Tip>

Dans MDX, les tableaux GFM, notes de bas de page et listes de tâches continuent de fonctionner :

Fonctionnalité	Statut
TOC	✓
Coloration	✓
Pagefind	✓
Giscus	✓

Cet article met comments: true pour démontrer ce drapeau. Pour désactiver les commentaires sur un article unique, mettez plutôt comments: false — voir la référence du frontmatter et l’article Giscus pour le détail complet.