代码块（动态）

console.log("This is pre-rendered")

console.log("This is pre-rendered")

使用

客户端组件

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';

<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;

与 MDX 的 CodeBlock 组件不同，这是一个可以在不使用 MDX 的情况下使用的客户端组件。它使用 Shiki 高亮代码并使用默认组件渲染它。

特性：

可以在服务器上预渲染
在浏览器上懒加载语言和主题

选项

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';

<DynamicCodeBlock
  lang="ts"
  code='console.log("Hello World")'
  options={{
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
    components: {
      // override components (e.g. `pre` and `code`)
    },
    // other Shiki options
  }}
/>;

服务器组件

对于服务器组件等价物，您可以使用核心的内置实用工具：

import * as Base from 'fumadocs-ui/components/codeblock';
import { highlight } from 'fumadocs-core/highlight';
import { type HTMLAttributes } from 'react';

export async function CodeBlock({
  code,
  lang,
  ...rest
}: HTMLAttributes<HTMLElement> & {
  code: string;
  lang: string;
}) {
  const rendered = await highlight(code, {
    lang,
    components: {
      pre: (props) => <Base.Pre {...props} />,
    },
    // other Shiki options
  });

  return <Base.CodeBlock {...rest}>{rendered}</Base.CodeBlock>;
}

使用

客户端组件

选项

服务器组件

On this page