Code

Presents source text in a themed monospace surface with deterministic syntax highlighting. Code wraps by default. Set wrap="false" to preserve logical lines inside one horizontal scroll region, and opt into logical line numbers with line-numbers.

HTML-family highlighting understands HTML, XML, SVG, JSX, and TSX structure: element or component tags, attributes, strings, comments, numbers, and JavaScript/TypeScript expressions receive distinct theme-token colors.

A JSX code sample with syntax highlighting and line numbers (light theme) — JSX tags, attributes, strings, expressions, and an unwrapped horizontal viewport

A JSX code sample with syntax highlighting and line numbers (dark theme) — JSX tags, attributes, strings, expressions, and an unwrapped horizontal viewport

Markup

<code
  source="{component_source}"
  language="tsx"
  line-numbers
  wrap="false"
  width="480"
  label="Accordion example"
/>

source is required and must be one {binding} producing text. language is a literal lexer name; unknown names are validation errors. Line numbers are off by default and remain decorative, so selecting and copying a numbered block returns only the source text. Numbered presentation is limited to 128 logical lines; longer sources keep all code and omit the gutter.

Programmatic construction (Zig)

ui.code(.{
    .language = .html,
    .line_numbers = true,
    .wrap = false,
    .width = 480,
    .semantics = .{ .label = "Accordion example" },
}, model.component_source)

The public lexer model is native_sdk.canvas.code. languageFromName resolves markup spellings, languageFromFence reads a Markdown info string, and highlight produces the same bounded, theme-colored span runs both renderers use.

Languages

Zig; JavaScript and TypeScript; JSX and TSX; JSON; shell; Python; Rust; C, C++, C#, Java, Kotlin, and Swift; Go; HTML, XML, and SVG; CSS, SCSS, and Less; and SQL. An omitted language renders plain monospace.

Attributes

Attribute	Description
`source`	code: one required {binding} producing source text (a []const u8 field or fn; arena fns work).
`language`	code: literal lexer name. Supports Zig, JavaScript/TypeScript, JSX/TSX, JSON, shell, Python, Rust, C-family, Go, HTML/XML/SVG, CSS-family, and SQL; unknown names are a validation error.
`line-numbers`	code: opt into muted logical line numbers. Off by default; a wrapped logical line stays paired with its number.
`wrap`	code: true by default. false preserves logical lines and puts the highlighted content in one horizontal scroll region.
`width`	Definite width (plain number).
`height`	code: definite height (plain number). Overflow scrolls vertically; with wrap=false the region scrolls on both axes.
`min-width`	Width floor without a definite maximum.
`grow`	Flex grow factor.
`key`	Sibling-scoped identity key.
`global-key`	Parent-independent identity: ids survive reparenting between containers.
`label`	Accessible name for the code group.