Composants Markdown

Si vous devez rendre du Markdown dans notre application React, vous pouvez le faire facilement avec les deux composants fournis.

ClientMarkdown

Ce composant permet d'afficher du Markdown cote client, ce qui signifie qu'il n'est pas rendu cote serveur. Il utilise la bibliotheque markdown-to-jsx pour parser et rendre le Markdown.

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

const markdown = `
# Hello World

This is a paragraph

- Item 1
- Item 2
- Item 3
`;

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

Props

• children: string - Le contenu Markdown a rendre
• className?: string - Classes CSS personnalisees (remplace la classe typography par defaut)
• Toutes les autres props de markdown-to-jsx sont supportees

Style par defaut

Par defaut, ce composant applique la classe typography. Vous pouvez la remplacer en passant une prop className au composant.

ServerMdx

Ce composant permet d'afficher du Markdown cote serveur, ce qui signifie que le HTML est genere serveur et que le client ne recoit que le rendu final.

Pourquoi Mdx ? Parce que ce composant supporte la syntaxe mdx, une extension du markdown qui permet d'ajouter des composants React dans le Markdown.

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

const markdown = `
# Hello World

This is a paragraph

<Alert type="info">
  This is an information message
</Alert>
`;

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

Props

• source: string - Le contenu MDX a rendre
• className?: string - Classes CSS personnalisees (appliquees sur la div wrapper, ajoutees a la classe typography par defaut)

Ajouter des composants React personnalises

Par defaut, aucun composant React n'est supporte. Pour les ajouter, vous devez modifier le fichier src/features/markdown/server-mdx.tsx :

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

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

Exemple complet avec un composant Alert :

# My Document

This is a normal paragraph.

<Alert type="info">This is an information message</Alert>

FAQ

Quand utiliser ServerMdx vs ClientMarkdown ?

• Utilisez ServerMdx quand :

  • Vous devez integrer des composants React personnalises dans votre Markdown
  • Vous voulez que le rendu soit fait cote serveur (meilleur pour les performances)
  • Vous avez besoin de MDX

• Utilisez ClientMarkdown quand :

  • Vous avez du Markdown basique sans composants React
  • Vous rendez du contenu Markdown dynamiquement cote client

Puis-je utiliser des composants React dans ClientMarkdown ?

Non, ClientMarkdown ne supporte que le Markdown basique. Pour integrer des composants React, vous devez utiliser ServerMdx.