build69
Sign inGet API key
build69  /  Components  /  Data Display  /  CodeBlock

CodeBlock

v1.0.7Updated 27 Aug 2026

Syntax-highlighted code display built on highlight.js with design-token colors that follow the app theme in both light and dark schemes (no hljs stylesheet). Supports explicit language or auto-detect, line numbers, per-l

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedcodesyntaxhighlightsnippet+4

The default, out-of-the-box CodeBlock.

Recommended for+14
  • ✓API documentation panels
  • ✓Webhook / integration setup guides
  • ✓Config and SQL snippets in admin tools
  • ✓Developer settings pages
Tags+6
codesyntaxhighlightsnippetcopydeveloperhljsdefault
Features+4
  • highlight.js coloring mapped to design tokens (light + dark)
  • Explicit language or automatic detection with language tag
  • Optional line-number gutter (sticky on horizontal scroll)
  • highlightLines per-line emphasis (1-based)
  • Soft-wrap toggle button (aria-pressed, controlled or uncontrolled)
  • Copy button with copied feedback + aria-live announcement
  • Filename / label header slot
  • maxHeight collapse with fade hint and expand/collapse footer (aria-expanded)
  • Focusable, labelled scroll region for keyboard users
  • Sizes: sm / md / lg
  • i18n: labels prop overrides header-button arias, copy announcement, expand footer and region labels (DEFAULT_CODE_BLOCK_LABELS)
Not recommended for−2
  • ✕Editable code (use a code editor)
  • ✕Rendering full markdown documents (use Markdown)
  • ✕Side-by-side diffs (use DiffViewer)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "CodeBlock" })

Usage

import { CodeBlock } from '@/components/data-display/code-block';

<CodeBlock
  title="invoice-vat.ts"
  language="typescript"
  code={source}
  showLineNumbers
  highlightLines={[3, 4]}
  maxHeight={240}
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
code

Source code as plain text (never HTML)

stringyes
language

highlight.js language id; auto-detected when omitted or unknown

string—
showLineNumbers

Render a line-number gutter

boolean—
highlightLines

1-based lines to visually emphasise

number[]—
wrap

Controlled soft-wrap state (defaultWrap / onWrapChange for uncontrolled)

boolean—
title

Filename / label header slot

ReactNode—
maxHeight

Collapse height (px) with expand/collapse footer

number—
expanded

Controlled expanded state (defaultExpanded / onExpandedChange for uncontrolled)

boolean—
size

Code text size

'sm' | 'md' | 'lg'—
labels

Override built-in UI strings (wrap/copy aria-labels, copied live-region, 'Show all {count} lines' footer, code-region labels) for i18n; English defaults exported as DEFAULT_CODE_BLOCK_LABELS. Line counts format via LocaleProvider

Partial<CodeBlockLabels>—

Related

Platform docsAll componentsSource files