Qu'est-ce que MDX ?

MDX est un format qui vous permet d'écrire du JSX directement dans des documents Markdown. Il combine la simplicité de Markdown pour la rédaction de contenu avec la puissance des composants React, ce qui le rend populaire pour les sites de documentation, les blogs et les applications à fort contenu construites avec des frameworks comme Next.js, Gatsby et Docusaurus. Un fichier MDX peut contenir une syntaxe Markdown standard aux côtés d'instructions d'importation, de variables exportées et de composants JSX intégrés — le tout dans un seul fichier.

Contrairement au Markdown simple, MDX est compilé en JavaScript, ce qui signifie que les erreurs de syntaxe dans votre JSX ou vos instructions d'importation peuvent faire planter l'intégralité du document. Cela rend la validation et le formatage correct particulièrement importants lorsque vous travaillez avec du contenu MDX.

Description de l'outil

L'éditeur MDX fournit un environnement basé sur le navigateur pour écrire, valider et formater du contenu MDX. Il propose une coloration syntaxique pour Markdown et JSX, un validateur intégré qui vérifie les erreurs de compilation dans votre MDX, ainsi qu'un formateur qui normalise les espaces et la structure pour des documents cohérents et lisibles.

Exemples

Avant le formatage :

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

Après le formatage :

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

Fonctionnalités

  • Coloration syntaxique pour Markdown et JSX dans un seul éditeur
  • Validation MDX qui vérifie les erreurs de compilation en temps réel
  • Formatage automatique qui normalise les lignes vides et les espaces
  • Bouton de réinitialisation pour effacer rapidement l'éditeur
  • Prise en charge de la copie pour un export facile de votre contenu formaté

Fonctionnement

  • Valider : Compile votre contenu MDX à l'aide du compilateur @mdx-js/mdx. Si le document contient des erreurs de syntaxe — telles que du JSX mal formé, des balises non fermées ou des importations invalides — le validateur affiche le message d'erreur afin que vous puissiez le corriger.
  • Formater : Normalise les espaces en réduisant plusieurs lignes vides consécutives en une seule, en garantissant des lignes vides avant les titres et autour des blocs d'importation/exportation, et en supprimant les espaces en fin de ligne. Le résultat est un document propre et structuré de manière cohérente.

Cas d'utilisation

  • Rédaction de documentation pour des projets basés sur React qui utilisent MDX pour les pages de contenu
  • Débogage des erreurs de compilation MDX avant le déploiement d'un site statique
  • Nettoyage de fichiers MDX avec des espaces incohérents contribués par plusieurs auteurs