CodeBlock

Syntax-highlighted code surface with native file tabs, diff rows and exact clipboard feedback.

All components · Theme builder · Implementation source

Live preview

Open live code-block preview

Install

netscript ui:add code-block

Usage and examples

The preview runs this JSX with the installed components. Import any composed primitives from your UI directory.

import { useState } from 'preact/hooks';
import { CodeBlock } from '@app/components/ui/code-block.tsx';

export function Example() {
  const [value, setValue] = useState('standard');
  const [open, setOpen] = useState(false);
  const [notice, report] = useState('');
  return (<><div><CodeBlock code={"const order = await orders.get(id);"} lang="typescript" filename="order.ts" /></div><p role="status">{notice}</p></>);
}

Props

Generated from native deno doc --json --private over the shipped implementation. Compound component props retain their owning interface; native attributes pass through where declared.

type CodeLineVariant = "default" | "added" | "removed" | "highlighted"
type CodeSyntax = "keyword" | "function" | "type" | "string" | "number" | "comment" | "punctuation"
CodeBlockProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "children" | "size" | "value" | "defaultValue">
CodeLineProps extends CodeLineData

Keyboard

Tokens

Semantic contract roles: border/subtle, destructive/border, destructive/subtle, destructive/text, marker/default, radius/card, space/stack/gap, success/subtle, success/text, surface/selected, surface/surface, text/fg, text/muted, code/bg, code/syntax/*, scrollbar/thumb, font/mono, type/code/*.

CSS custom properties referenced directly: --ns-border, --ns-border-subtle, --ns-border-width, --ns-code-bg, --ns-code-font, --ns-code-line-height, --ns-code-syntax-comment, --ns-code-syntax-function, --ns-code-syntax-ink, --ns-code-syntax-keyword, --ns-code-syntax-number, --ns-code-syntax-punctuation, --ns-code-syntax-string, --ns-code-syntax-type, --ns-control-gap, --ns-control-height-sm, --ns-control-padding-x, --ns-control-padding-x-sm, --ns-destructive-border, --ns-destructive-subtle, --ns-destructive-text, --ns-fg, --ns-focus-ring-offset, --ns-focus-ring-width, --ns-font-mono, --ns-font-sans, --ns-leading-body, --ns-leading-caption, --ns-leading-code, --ns-marker, --ns-muted, --ns-muted-fg, --ns-prose-code-line, --ns-prose-code-size, --ns-radius-card, --ns-radius-control, --ns-ring, --ns-scrollbar-thumb, --ns-selected, --ns-space-2, --ns-space-3, --ns-stack-gap, --ns-state-disabled-opacity, --ns-success-subtle, --ns-success-text, --ns-text-body, --ns-text-caption, --ns-text-code, --ns-tracking-body, --ns-tracking-caption, --ns-weight-body, --ns-weight-caption.

Contract and compatibility

Accessibility pattern: Tabs APG with native buttons, code and horizontal overflow regions

• Ledger modes single/tabbed/diff and tone replace the old design-only vocabulary; published default/destructive/added/removed/highlighted aliases remain supported.
• Legacy header none/title/tabs aliases remain; header=tabs without files renders a title header. Header=false removes file chrome/copy but never removes essential tab controls.
• Native horizontal scrollbar/thumb and native copy title tooltip are platform internals, not fabricated layout parts.
• Recognized languages use escaped highlight.js common output with whole-source multiline scopes; unknown languages remain escaped text. Explicit Token/row content takes precedence and is never interpreted as highlighter HTML.
• Syntax roles apply directly on code/bg. Tinted diff/highlight rows retain each syntax hue with a contextual 80% syntax/20% text foreground mix; no shared token value changes.
• Clipboard result callbacks are separate from native onCopy. Actual status ignores stale file/text requests; controlled state may render a chosen visual snapshot.

Design contract values marked planned are not implementation props. The props above describe what ships today.