@explainer/mdx

Le paquet @explainer/mdx fournit des surcharges de composants MDX, des composants personnalisés et des plugins remark utilisés par les applications docs et blog.

Surcharges de titres

Le paquet exporte des composants de titres (H1–H6) qui ajoutent automatiquement des liens d’ancrage aux titres :

import { H1, H2, H3, H4, H5, H6 } from '@explainer/mdx'

Chaque titre s’affiche avec une ancre # cliquable qui renvoie vers l’identifiant du titre.

Autres surcharges

Export	Fonction
`Link`	Composant de lien amélioré avec gestion des liens externes
`Code`	Mise en forme du code en ligne
`Paragraph`	Paragraphe avec espacement approprié
`UnorderedList`	Liste non ordonnée stylisée
`OrderedList`	Liste ordonnée stylisée

Composants

Le paquet inclut des composants MDX personnalisés accessibles via la syntaxe directive ou JSX :

Composant	Directive	Description
`Callout`	`:::callout`	Boîtes d’alerte avec variantes
`CardGroup`	`::::card-group`	Dispositions de cartes en grille
`Card`	`:::card`	Carte individuelle dans un groupe
`Steps`	`::::step-group`	Conteneur d’étapes numérotées
`Step`	`:::step`	Étape individuelle
`CodeGroup`	`:::codegroup`	Blocs de code avec onglets
`Preview`	`::::::preview`	Aperçu en direct avec source
`PreviewDemo`	`:::::code-preview`	Panneau de rendu de l’aperçu
`PreviewCode`	`:::::content-preview`	Panneau source de l’aperçu
`Tabs`	JSX uniquement	Panneaux à onglets commutables
`Tab`	JSX uniquement	Panneau d’onglet individuel

Plugins remark

remarkAutoImport

Ajoute automatiquement les instructions d’importation pour les composants MDX utilisés dans un fichier. Vous n’avez pas besoin d’importer manuellement Callout, Steps, Tabs, etc. — ils sont injectés automatiquement.

remarkDirectiveHandler

Transforme la syntaxe directive (:::callout, ::::card-group, etc.) en appels de composants JSX. Le mappage est défini dans le componentMap :

remark-directive-handler.ts
const componentMap = {
  'card-group': 'CardGroup',
  'card': 'Card',
  'callout': 'Callout',
  'step-group': 'Steps',
  'step': 'Step',
  'preview': 'Preview',
  'code-preview': 'PreviewDemo',
  'content-preview': 'PreviewCode',
  'codegroup': 'CodeGroup',
  'code-group': 'CodeGroup',
}

Configuration Shiki

Le paquet exporte la configuration Shiki partagée utilisée pour la coloration syntaxique des blocs de code :

import { shikiConfig } from '@explainer/mdx/shiki'

Consultez Coloration syntaxique pour plus de détails sur les thèmes et les transformeurs.