代碼塊（動態）

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={{
    components: {
      // 添加/覆蓋組件
    },
    // 或 Shiki 選項
  }}
/>;

代碼塊（動態）

也能高亮代碼的代碼塊

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={{
    components: {
      // 添加/覆蓋組件
    },
    // 或 Shiki 選項
  }}
/>;

使用方法

選項

目錄

代碼塊（動態）

使用方法

選項

目錄