Bloc de code

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true, 
}; 

export default withMDX(config);

Afficher les blocs de code, ajoutés par défaut.

• Bouton Copier
• Titres et icônes personnalisés

Utilisation

Enveloppez l'élément pre dans <CodeBlock />, qui fait office de wrapper du bloc de code.

import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

<MDX
  components={{
    // HTML `ref` attribute conflicts with `forwardRef`
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock {...props}>
        <Pre>{props.children}</Pre> {}
      </CodeBlock>
    ),
  }}
/>;

Voir Markdown pour les utilisations.

Conserver l'arrière-plan

Utilisez la couleur d'arrière-plan générée par Shiki (le plugin Rehype Code).

import { Pre, CodeBlock } from 'fumadocs-ui/components/codeblock';

<MDX
  components={{
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock keepBackground {...props}>
        <Pre>{props.children}</Pre>
      </CodeBlock>
    ),
  }}
/>;

Icônes

Spécifiez une icône personnalisée en transmettant un accessoire icon au composant CodeBlock.

Par défaut, l'icône sera injectée par le transformateur Shiki personnalisé.

console.log('js');