コードブロック（動的）

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 オプション
/>;

独自のハイライターでハイライトする場合は、Highlighter を参照してください。

コードブロック（動的）

使い方アンカーリンクをコピー

クライアントコンポーネントアンカーリンクをコピー

オプションアンカーリンクをコピー

サーバーコンポーネントアンカーリンクをコピー

このページの内容

使い方

クライアントコンポーネント

オプション

サーバーコンポーネント