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")' />;

特徴:

サーバー上でプリレンダリング可能
ブラウザ上で言語とテーマを遅延ロードします

オプション

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

<DynamicCodeBlock
  lang="ts"
  code='console.log("Hello World")'
  options={{
    components: {
      // add/override components
    },
    // or Shiki options
  }}
/>;

コードブロック(動的)

使用状況

オプション

目次

コードブロック(動的)

使用状況

オプション

目次