代码块

config.js

import createMDX from 'fumadocs-mdx/config';

const withMDX = createMDX();

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

export default withMDX(config);

Install to your codebase

Easier customisation & control.

这是一个 MDX 组件，旨在与 Rehype Code 一起使用，以显示高亮的代码块。

支持的功能：

复制按钮
自定义标题和图标

如果您正在寻找具有运行时语法高亮的等效组件，请参阅动态代码块。

使用

将 pre 元素包装在 <CodeBlock /> 中，它充当代码块的包装器。

mdx-components.tsx

import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    // HTML `ref` attribute conflicts with `forwardRef`
    pre: ({ ref: _ref, ...props }) => (
      <CodeBlock {...props}>
        <Pre>{props.children}</Pre>
      </CodeBlock>
    ),
    ...components,
  };
}

有关用法，请参阅 Markdown。

保持背景

使用 Shiki 生成的背景颜色。

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

<CodeBlock keepBackground {...props}>
  <Pre>{props.children}</Pre>
</CodeBlock>;

图标

通过将 icon 属性传递给 CodeBlock 组件来指定自定义图标。

默认情况下，图标将由自定义 Shiki 转换器注入。

config.js

console.log('js');

使用

保持背景

图标

On this page