Hanzo
UiComponents

Code Block (Dynamic)

A codeblock that also highlights code

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

Usage

Client Component

import { DynamicCodeBlock } from '@hanzo/docs-ui/components/dynamic-codeblock';

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

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

Unlike the MDX CodeBlock component, this is a client component that can be used without MDX. It highlights the code with Shiki and use the default component to render it.

Features:

  • using React.js 19 Suspense.
  • can be pre-rendered on server.
  • load languages and themes on browser lazily.

Options

import { DynamicCodeBlock } from '@hanzo/docs-ui/components/dynamic-codeblock';

<DynamicCodeBlock
  lang="ts"
  code='console.log("Hello World")'
  options={{
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
    components: {
      // override components (e.g. `pre` and `code`)
    },
    // other Shiki options
  }}
/>;

Server Component

For a server component equivalent, you can use the RSC version:

import { ServerCodeBlock } from '@hanzo/docs-ui/components/codeblock.rsc';

<ServerCodeBlock
  lang="ts"
  code='console.log("Hello World")'
  options={{
    themes: {
      light: 'github-light',
      dark: 'github-dark',
    },
    components: {
      // override components (e.g. `pre` and `code`)
    },
    // other Shiki options
  }}
/>;

How is this guide?

Last updated on

On this page

Usage
Client Component
Options
Server Component