Utiliser React
Docusaurus a un support intégré pour MDX, ceci vous permet d'écrire du JSX dans vos fichiers Markdown et de les rendre sous forme de composants React.
remarque
Bien que les fichiers .md
et .mdx
soient analysés à l'aide de MDX, certaines syntaxes sont traitées de manière légèrement différente. Pour une analyse syntaxique plus précise et un meilleur support des éditeurs, nous recommandons d'utiliser l'extension .mdx
pour les fichiers contenant de la syntaxe MDX.
Essayez ce bloc ici :
export const Highlight = ({children, color}) => ( <span style={{ backgroundColor: color, borderRadius: '2px', color: '#fff', padding: '0.2rem', }}> {children} </span>);
<Highlight color="#25c2a0">Docusaurus en vert</Highlight> et <Highlight color="#1877F2">Facebook en bleu</Highlight> sont mes couleurs préférées.
Je peux écrire en **Markdown** a côté de mon _JSX_ !
Remarquez comment il rend à la fois le balisage de votre composant React et la syntaxe Markdown :
Je peux écrire en Markdown a côté de mon JSX !
Vous pouvez également importer vos propres composants définis dans d'autres fichiers ou composants tiers installés via npm ! Consultez les docs MDX pour voir ce que vous pouvez faire avec MDX.
attention
Comme tous les fichiers doc sont analysés à l'aide de MDX, tout HTML est interprété comme du JSX. Par conséquent, si vous devez donner un style en ligne à un composant, suivez le modèle JSX et fournissez des objets de style. Ce comportement est différent de Docusaurus 1. Consulter aussi la Migration de v1 vers v2.