X (Twitter)

代码块（动态）

还突出显示代码的代码块

用法

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: {
      // add/override components
    },
    // or Shiki options
  }}
/>;

代码块（动态）

还突出显示代码的代码块

用法

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: {
      // add/override components
    },
    // or Shiki options
  }}
/>;

代码块（动态）

用法

选项

目录

代码块（动态）

用法

选项

目录