Code Block (Dynamic)

Usage

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 
<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;

This component, different from the MDX CodeBlock component, can be used without MDX. It highlights the code with Shiki and use the default component to render it.

Features:

Can be pre-rendered on server
load languages and themes on browser lazily

Options

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

Usage

import { DynamicCodeBlock } from 'fumadocs-ui/components/dynamic-codeblock';
 
<DynamicCodeBlock lang="ts" code='console.log("Hello World")' />;

This component, different from the MDX CodeBlock component, can be used without MDX. It highlights the code with Shiki and use the default component to render it.

Features:

Can be pre-rendered on server
load languages and themes on browser lazily

Options

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

Usage

Options

Table of Contents

Code Block (Dynamic)

Usage

Options

Table of Contents