CodeBlock

Syntax-highlighted code block backed by Shiki with dual-theme support, line numbers, line highlighting, and a copy button.

stable
since v0.1.0
12.0 kB
data-display
code
shiki

Preview

Open

tsx

import { CodeBlock } from '@arshad-shah/cynosure-react/code-block';

const snippet = `// Debounce helper
export const debounce = (fn, wait = 200) => {
  let id;
  return (...args) => {
    clearTimeout(id);
    id = setTimeout(() => fn(...args), wait);
  };
};
`;

export default function Example() {
  return <CodeBlock language="tsx">{snippet}</CodeBlock>;
}

Language

Pass a Shiki language identifier (tsx, bash, json, python, …) to opt into syntax highlighting. The default "text" skips Shiki entirely and renders plain pre-formatted text.

Preview

Open

tsx

import { CodeBlock } from '@arshad-shah/cynosure-react/code-block';

const bash = `pnpm add @arshad-shah/cynosure-react
pnpm add @arshad-shah/cynosure-tokens
`;

export default function Example() {
  return <CodeBlock language="bash">{bash}</CodeBlock>;
}

Line numbers and highlighting

Combine showLineNumbers with highlightLines to draw attention to a specific region of the snippet.

Preview

Open

tsx

import { CodeBlock } from '@arshad-shah/cynosure-react/code-block';

const snippet = `import { Button } from "@arshad-shah/cynosure-react/code-block";

export function SaveButton() {
  return (
    <Button variant="solid" colorScheme="accent">
      Save changes
    </Button>
  );
}
`;

export default function Example() {
  return (
    <CodeBlock language="tsx" showLineNumbers highlightLines={[4, 5, 6]}>
      {snippet}
    </CodeBlock>
  );
}

Copy button

Set copyable to render a copy-to-clipboard button in the header. The label flips to “Copied” with a check icon while the success state is live.

Preview

Open

tsx

import { CodeBlock } from '@arshad-shah/cynosure-react/code-block';

const snippet = `curl -fsSL https://cynosure.dev/install.sh | bash
`;

export default function Example() {
  return (
    <CodeBlock language="bash" copyable>
      {snippet}
    </CodeBlock>
  );
}

With filename

Pass filename (string or any ReactNode) to display a label in the header instead of the language tag.

Preview

Open

tsx

import { CodeBlock } from '@arshad-shah/cynosure-react/code-block';

const snippet = `{
  "name": "my-app",
  "version": "0.1.0",
  "private": true
}
`;

export default function Example() {
  return (
    <CodeBlock language="json" filename="package.json" copyable showLineNumbers>
      {snippet}
    </CodeBlock>
  );
}

API

PropTypeDefaultDescription

children*

string

—

Raw source code. Always required as the canonical content (clipboard copies this verbatim).

language

string

text

Shiki language identifier (e.g. `tsx`, `python`). Set to `text` to skip highlighting entirely.

showLineNumbers

boolean

false

Prefix every line with its 1-based number column.

copyable

boolean

false

Render a copy-to-clipboard button in the header.

highlightLines

number[]

—

1-based line numbers to visually highlight.

maxHeight

string|number

—

Max scrollable height. Adds an internal scroll region above this.

html

string

—

Pre-rendered HTML (from `highlightCode` or Shiki's `codeToHtml`). Bypasses the auto-highlighter.

theme

CodeTheme

—

Shiki theme. A string forces a single theme; a `{ light, dark }` pair emits dual-theme CSS variables that follow Cynosure's `data-theme`.

filename

ReactNode

—

Override the filename shown in the header (falls back to `language`).

Accessibility

Wraps highlighted code in a semantic <pre><code> pair (or Shiki’s pre-rendered HTML when provided).
The copy button is a real <button> with aria-label that flips between “Copy code” and “Copied”.
Theming follows the active data-theme via dual-theme CSS variables — contrast stays WCAG AA in both modes.
Long snippets stay inside an internal scroll region when maxHeight is set, so they never break page layout.
Plain (language="text") blocks remain selectable and readable by line.

Recipes

Pass html directly when you have pre-rendered Shiki output (SSR, MDX, custom highlighters).
Pair showLineNumbers with highlightLines={[3, 4]} to spotlight a fix or diff.
Set maxHeight={320} for long snippets — the block scrolls internally instead of pushing the page.
Override theme with a Shiki { light, dark } pair to match a brand palette.