程式碼區塊（Dynamic）

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

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

使用方式

用戶端元件

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

export function MyComp() {
  const code = `console.log("Hello World")`;

  return <DynamicCodeBlock lang="ts" code={code} />;
}

與 MDX 的 CodeBlock 元件不同，這是一個用戶端元件，不需要 MDX 也能使用。它會使用 Shiki 對程式碼進行語法突顯，並透過預設元件進行算繪。

特色：

採用 React.js 19 Suspense。
可在伺服器端預先算繪。
在瀏覽器中延遲載入語言與主題。

選項

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: {
      // 覆寫元件（例如 `pre` 和 `code`）
    },
    // 其他 Shiki 選項
  }}
/>;

伺服器元件

若需要伺服器元件的等效版本，您可以使用 RSC 版本：

import { ServerCodeBlock } from 'fumadocs-ui/components/codeblock.rsc';

<ServerCodeBlock
  lang="ts"
  code='console.log("Hello World")'
  themes={{
    light: 'github-light',
    dark: 'github-dark',
  }}
  components={
    {
      // 覆寫元件（例如 `pre` 與 `code`）
    }
  }
  // 其他 Shiki 選項
/>;

若要改用您自己的語法突顯器，請參閱語法突顯器。

程式碼區塊（Dynamic）

使用方式複製錨點連結

用戶端元件複製錨點連結

選項複製錨點連結

伺服器元件複製錨點連結

本頁目錄

使用方式

用戶端元件

選項

伺服器元件