Code Block

Multi-line code with lightweight syntax highlighting, line numbers, line emphasis and copy.

Import

import { CodeBlock } from '@marbleui/ui'

Props

<CodeBlock>

Prop	Type	Default	Description
code *required	`string`	`—`
className	`string`	`—`
copyable	`boolean`	`true`
filename	`string`	`—`	Shown in the header (also used as a label).
highlightLines	`number[]`	`[]`	1-based line numbers to emphasise.
language	`string`	`—`
showLineNumbers	`boolean`	`true`
variant	`'surface' \| 'dark'`	`'surface'`

Usage notes

Multi-line code with syntax highlighting, line numbers and a copy button. For a short inline snippet use Code.

<CodeBlock code={sample} filename="save.tsx" language="tsx" highlightLines={[6, 7]} />
<CodeBlock code="bun add @marbleui/ui" showLineNumbers={false} variant="dark" />

code is a string. Highlighting is lightweight and not driven by language, which is only a header label.
highlightLines takes 1-based line numbers; showLineNumbers and copyable default to true. variant is surface (default) or dark.
The header (filename, language, copy button) appears if filename is set or copyable is true.
Line numbers are hidden from assistive tech and from selection.

Example source · show

import { CodeBlock } from './code-block'

const sample = `import { Button } from '@marbleui/ui'

export function Save({ pending }: { pending: boolean }) {
  // React Aria handles press, focus and pending states
  return (
    <Button variant="solid" isPending={pending}>
      Save changes
    </Button>
  )
}`

export const styles = {
  Surface: () => <CodeBlock code={sample} filename="save.tsx" language="tsx" highlightLines={[6, 7, 8]} className="w-[34rem]" />,
  Dark: () => <CodeBlock code={sample} filename="save.tsx" variant="dark" className="w-[34rem]" />,
  Minimal: () => <CodeBlock code={`bun add @marbleui/ui @marbleui/tokens`} showLineNumbers={false} className="w-96" />,
}

Source: packages/ui/src/code-block/code-block.tsx

Catalog