Composants Markdown

Rendu Markdown côté client ou serveur avec prise en charge de MDX.

Deux composants permettent d’afficher du Markdown dans l’application React.

ClientMarkdown

Ce composant affiche le Markdown côté client avec la bibliothèque markdown-to-jsx.

import { ClientMarkdown } from "@/features/markdown/client-markdown";

const markdown = `
# Bonjour

Ceci est un paragraphe

- Élément 1
- Élément 2
- Élément 3
`;

export default function App() {
  return <ClientMarkdown>{markdown}</ClientMarkdown>;
}

Propriétés

children: string — contenu Markdown à afficher
className?: string — classes CSS personnalisées remplaçant typography
Toutes les autres propriétés de markdown-to-jsx sont acceptées

Style par défaut

Le composant applique la classe typography par défaut. Fournissez className pour la remplacer.

ServerMdx

Ce composant affiche le Markdown côté serveur : le client reçoit directement le HTML final.

MDX étend Markdown et permet d’y intégrer des composants React.

import { ServerMdx } from "@/features/markdown/server-mdx";

const markdown = `
# Bonjour

Ceci est un paragraphe

<Alert type="info">
  Ceci est un message d’information
</Alert>
`;

export default async function Page() {
  return <ServerMdx source={markdown} />;
}

Propriétés

source: string — contenu MDX à afficher
className?: string — classes CSS ajoutées au conteneur et à typography

Ajouter des composants React

Par défaut, aucun composant React n’est enregistré. Pour en ajouter, modifiez src/features/markdown/server-mdx.tsx :

import { Alert } from "@/components/nowts/alert";

const MdxComponent = {
  Alert: Alert,
  // Ajouter les autres composants ici
} satisfies Record<string, React.ComponentType>;

Exemple complet avec un composant Alert :

# Mon document

Ceci est un paragraphe normal.

<Alert type="info">Ceci est un message d’information.</Alert>

FAQ

Quand utiliser ServerMdx ou ClientMarkdown ?

Utilisez ServerMdx lorsque :
- vous intégrez des composants React personnalisés ;
- le rendu doit être effectué côté serveur ;
- vous avez besoin de MDX.
Utilisez ClientMarkdown lorsque :
- le contenu est du Markdown simple sans composants React ;
- le contenu est généré dynamiquement côté client.

Peut-on utiliser des composants React dans ClientMarkdown ?

Non. ClientMarkdown ne prend en charge que le Markdown simple. Utilisez ServerMdx pour intégrer des composants React.

Composants de mise en page Système de journal des modifications