Formateur MDX

Formatez vos fichiers MDX : Markdown enrichi de composants JSX.

MDX Source

Formatage

Options

MDX Formaté

Guide MDX

Qu'est-ce que MDX

MDX = Markdown + JSX. Il permet d'inclure des composants React directement dans du Markdown. Parfait pour la documentation interactive : exemples de code live, composants interactifs, design systems. Docusaurus, Next.js, Gatsby supportent MDX nativement.

Syntaxe MDX

Imports

import Button from './Button' en haut du fichier pour utiliser des composants.

JSX inline

<Button variant="primary">Cliquez</Button> directement dans le texte.

Export

export const meta = {} pour exporter des métadonnées.

Frontmatter

--- yaml --- pour les métadonnées en haut du fichier.

Cas d'usage

  • Documentation : Docs interactives avec exemples live
  • Blog technique : Articles avec démos intégrées
  • Design system : Showcase de composants avec props
  • Tutoriels : Code interactif pour l'apprentissage

Questions fréquentes

MDX vs Markdown : quand utiliser MDX ?

Utilisez MDX quand vous avez besoin d'interactivité ou de composants custom. Pour du contenu statique simple, Markdown classique suffit. MDX ajoute de la complexité (build, dépendances) : n'utilisez-le que si la valeur ajoutée le justifie.

Comment utiliser MDX avec Next.js ?

Installez @next/mdx et @mdx-js/loader. Configurez next.config.js avec withMDX(). Les fichiers .mdx deviennent des pages ou composants. Avec App Router, utilisez @next/mdx v14+. MDX Remote pour du contenu distant/CMS.

Peut-on utiliser MDX avec Vue ou Svelte ?

MDX est spécifique à React/JSX. Pour Vue, regardez VitePress ou vite-plugin-md. Pour Svelte, mdsvex offre une expérience similaire. Ces alternatives permettent d'embarquer des composants dans du Markdown pour leurs frameworks respectifs.

Comment styler le contenu MDX ?

Utilisez MDXProvider pour remplacer les éléments Markdown par vos composants custom. Tailwind Typography (@tailwindcss/typography) pour un style prose automatique. Ou CSS classique ciblant les éléments générés (h1, p, code, etc.).