Codeblock

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

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

export default withMDX(config);

Codeblöcke anzeigen, standardmäßig hinzugefügt.

• Kopieren-Schaltfläche
• Benutzerdefinierte Titel und Symbole

Verwendung

Wickeln Sie das pre-Element in <CodeBlock /> ein, das als Wrapper des Codeblocks fungiert.

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

Weitere Informationen zur Verwendung finden Sie unter Markdown.

Hintergrund beibehalten

Verwenden Sie die von Shiki (dem Rehype Code-Plugin) generierte Hintergrundfarbe.

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

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

Symbole

Geben Sie ein benutzerdefiniertes Symbol an, indem Sie eine icon-Requisite an die CodeBlock-Komponente übergeben.

Standardmäßig wird das Symbol vom benutzerdefinierten Shiki-Transformator eingefügt.

console.log('js');