代码块（动态）

使用方法

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={{
    components: {
      // 添加/覆盖组件
    },
    // 或 Shiki 选项
  }}
/>;

使用方法

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={{
    components: {
      // 添加/覆盖组件
    },
    // 或 Shiki 选项
  }}
/>;

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

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

使用方法

选项

目录

代码块（动态）

使用方法

选项

目录