La Puissance de MDX : Une Démonstration des Fonctionnalités

Bienvenue dans notre guide complet présentant les capacités de MDX ! Cet article démontre comment MDX combine le meilleur de Markdown avec la puissance des composants React.

Qu'est-ce que MDX ?

MDX est un format puissant qui vous permet d'écrire du JSX directement dans vos documents markdown. C'est parfait pour :

• La documentation
• Les blogs
• L'écriture technique
• Le contenu interactif

Composants Interactifs

L'une des meilleures fonctionnalités de MDX est la possibilité d'utiliser des composants React directement dans votre markdown. Voici un exemple :

Blocs de Code avec Coloration Syntaxique

MDX prend en charge les blocs de code avec coloration syntaxique :

interface User {
  id: string;
  name: string;
  email: string;
}
 
const getUser = async (id: string): Promise<User> => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

Voici un exemple d'un composant React avec TypeScript :

import { useState } from 'react'
 
interface CounterProps {
  initialCount: number;
}
 
export const Counter = ({ initialCount }: CounterProps) => {
  const [count, setCount] = useState(initialCount);
 
  return (
    <div className="flex items-center gap-4">
      <button
        onClick={() => setCount(c => c - 1)}
        className="px-4 py-2 bg-red-600 text-white rounded-md"
        aria-label="Diminuer le compteur"
      >
        -
      </button>
      <span className="text-lg font-bold">{count}</span>
      <button
        onClick={() => setCount(c => c + 1)}
        className="px-4 py-2 bg-red-600 text-white rounded-md"
        aria-label="Augmenter le compteur"
      >
        +
      </button>
    </div>
  );
};

Composants Personnalisés avec Props

Vous pouvez passer des props à vos composants personnalisés :

Gestion des Images

MDX prend en charge les images optimisées avec le composant Image de Next.js :

Listes et Mise en Forme du Texte

MDX prend en charge toutes les fonctionnalités markdown standard :

Listes non ordonnées

• Premier élément
• Deuxième élément
  • Élément imbriqué
  • Autre élément imbriqué
• Troisième élément

Listes ordonnées

1. Première étape
2. Deuxième étape
3. Troisième étape

Mise en forme du texte

• Texte en gras pour l'emphase
• Texte en italique pour une emphase subtile
• Texte barré pour le contenu obsolète
• code en ligne pour les termes techniques

Tableaux

Avertissements et Notes

Équations Mathématiques

Vous pouvez inclure des équations mathématiques en utilisant la syntaxe LaTeX. Voici une équation en bloc :

Et voici une équation en ligne : $E = mc^2$ dans votre texte.

Considérations d'Accessibilité

Tous les composants interactifs de cette démonstration suivent les directives WCAG :

• Labels ARIA appropriés
• Support de la navigation au clavier
• Contraste de couleur suffisant
• Compatible avec les lecteurs d'écran

// Exemple d'un composant bouton accessible
const AccessibleButton = ({ children, onClick }) => (
  <button
    onClick={onClick}
    className="px-4 py-2 bg-red-600 text-white rounded-md"
    aria-label="Exemple de bouton interactif"
    role="button"
    tabIndex={0}
  >
    {children}
  </button>
);

Conclusion

MDX offre un moyen puissant de créer du contenu riche et interactif tout en conservant la simplicité du markdown. C'est parfait pour :

• La documentation technique
• Les tutoriels interactifs
• Les articles de blog avec du contenu dynamique
• Le matériel pédagogique