Search for a command to run...
Syntax-highlighted code rendering backed by a shared Shiki highlighter. Light and dark token palettes are baked into every render as CSS variables, so theme switches are instant — no client re-highlight, no flash. Reach for it anywhere the product displays source code — file contents, config snippets, diffs, generated output.
Highlighting resolves through a module-singleton Shiki highlighter shared by every CodeBlock on the page. While it resolves (and for unknown languages) the raw code renders as plain text with identical typography, so content never jumps. An unknown language falls back to plain text — it never throws.
const greet = (name: string) => {
return `Hello, ${name}!`;
};export async function fetchProfile(handle: string) {
const response = await fetch(`/api/profiles/${handle}`);
if (!response.ok) {
throw new Error("Profile not found");
}
return response.json();
}pnpm add @delphi/ui
pnpm dev --filter=web{
"name": "weather-lookup",
"triggers": ["message.received"]
}{
"schedule": "0 9 * * 1",
"timezone": "America/Los_Angeles"
}| Prop | Type | Default | Description |
|---|---|---|---|
code | string | — | The source text to highlight. A single trailing newline is trimmed so blocks don't end with an empty line. |
language | string | "text" | Shiki language id or alias (ts, tsx, js, json, bash, yaml, md, css, diff). Unknown values render as plain text. |
showLineNumbers | boolean | false | Renders a CSS-counter gutter before each line. Numbers are unselectable, so copied code stays clean. |
variant | "default" | "plain" | "default" | default ships its own chrome (secondary surface, hairline border, rounded corners). plain is chrome-free for composing inside an existing frame. |
size | "default" | "sm" | "default" | default is text-sm with comfortable padding. sm drops to text-xs for dense surfaces — diff rows, inline panes. |
className | string | — | Classes applied to the outer wrapper. |
Use variant="plain" when a parent surface already owns the frame — a file pane with a path
header, a diff row, a card. The default chrome is for standalone blocks.
Pass the file's real language whenever you know it. Aliases work (ts, js, sh, yml), and
anything unrecognized degrades to readable plain text.
Drop to size="sm" only on genuinely dense surfaces. The default size is the reading size.
Use CodeBlock for fenced code inside streamed chat markdown — Streamdown already owns
highlighting there. CodeBlock is for surfaces that control their own code rendering.
Paint token colors or backgrounds over the output. Both theme palettes are already encoded per token; restyling one mode breaks the other.
Reach for it as an editor. It renders static text — for editable code, compose a real input and
render CodeBlock as the preview.
const greet = (name: string) => {
return `Hello, ${name}!`;
};export async function fetchProfile(handle: string) {
const response = await fetch(`/api/profiles/${handle}`);
if (!response.ok) {
throw new Error("Profile not found");
}
return response.json();
}pnpm add @delphi/ui
pnpm dev --filter=web{
"name": "weather-lookup",
"triggers": ["message.received"]
}{
"schedule": "0 9 * * 1",
"timezone": "America/Los_Angeles"
}