CodeBlock

A syntax-highlighted code block component powered by Shiki. Supports server pre-rendering, copy button, and line numbers.

Basic Usage

import { CodeBlock } from '@01.software/sdk/ui/code-block'

<CodeBlock code="const x = 1" language="typescript" />

Props

Prop	Type	Default	Description
`code`	`string`	—	Code string to highlight (required)
`language`	`string`	`'typescript'`	Language identifier (e.g. `'typescript'`, `'python'`, `'json'`)
`theme`	`BundledTheme`	`'github-dark'`	Shiki theme
`className`	`string`	—	Wrapper CSS class
`initial`	`JSX.Element`	—	Pre-rendered JSX from server via `highlight()`
`showLineNumbers`	`boolean`	`false`	Show line numbers
`showCopyButton`	`boolean`	`true`	Show copy button

Server Pre-rendering (Next.js)

Pre-render with highlight() in a server component for instant display on the client:

import { CodeBlock, highlight } from '@01.software/sdk/ui/code-block'

// Server Component
async function CodeExample() {
  const code = 'const greeting = "Hello"'
  const initial = await highlight(code, 'typescript')
  return <CodeBlock code={code} language="typescript" initial={initial} />
}

As RichTextContent Block

import { RichTextContent } from '@01.software/sdk/ui/rich-text'
import { CodeBlock } from '@01.software/sdk/ui/code-block'

<RichTextContent
  data={content}
  blocks={{
    Code: ({ node }) => (
      <CodeBlock code={node.fields.code} language={node.fields.language} />
    ),
  }}
/>

Exports

Export	Description
`CodeBlock`	Main component
`CodeBlockProps`	Props type
`highlight(code, lang, theme?)`	Server pre-render function
`BundledTheme`	Shiki theme type

01 Software

CodeBlock

CodeBlock

Basic Usage

Props

Server Pre-rendering (Next.js)

As RichTextContent Block

Exports

On this page