Blocco codice

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

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

export default withMDX(config);

Visualizza i blocchi di codice, aggiunti per impostazione predefinita.

• Pulsante Copia
• Titoli e icone personalizzati

Utilizzo

Racchiudi l'elemento pre in <CodeBlock />, che funge da wrapper del blocco di codice.

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>
    ),
  }}
/>;

Vedi Markdown per gli utilizzi.

Mantieni sfondo

Usa il colore di sfondo generato da Shiki (il 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>
    ),
  }}
/>;

Icone

Specifica un'icona personalizzata passando un oggetto icon al componente CodeBlock.

Per impostazione predefinita, l'icona verrà inserita dal trasformatore Shiki personalizzato.

console.log('js');