CodeBlock

Syntax Highlighting (Dracula), Filename Bar, Copy Button, Zero-Padded Gutter

01 Preview

02 Usage

Code sample for blog posts and docs. Zero-padded gutter, hairline bar with filename + language, and lightweight syntax highlighting (regex tokenizer - no external dependency).

<CodeBlock
  filename="pipeline.py"
  lang="py"
  code={`def mine(events):
    return group(events, key=session)`}
/>

Theme defaults to dracula; pass theme="mono" for the on-brand amber-on-ink palette. A COPY button sits at the right of the bar and copies the source to the clipboard; set copyable={false} to drop it. The bar renders whenever a filename, language, or the copy button is present. Comment syntax follows lang (# for py/rb/sh/yaml/etc, // and /* */ otherwise). Set lineNumbers={false} for one-liners.

03 Props

Prop	Type	Default	Notes
code*	`string`	—	Source text. Trailing newline is trimmed. Required — a code block with no code is not a meaningful thing to render, so this is a compile error rather than an empty panel.
lang	`string`	—	Language tag shown in the bar and used to pick comment syntax (e.g. "ts", "py", "rs").
filename	`string`	—	Filename shown at the left of the bar.
lineNumbers	`boolean`	`true`	Show the line-number gutter.
theme	`'dracula' \| 'mono'`	`dracula`	Color theme.
copyable	`boolean`	`true`	Show a copy-to-clipboard button at the right of the bar. When true the bar renders even with no filename or language, so copy is always reachable.

Also accepts every attribute of React.HTMLAttributes<HTMLDivElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { CodeBlock } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';