CodeBlock nativelite

Source code in a mono block with built-in syntax colouring, optional line numbers and a copy button.

Children: none

Preview

Loading the renderer…

coderequired

language

title

lineNumbers

wrap

copyable

maxLines

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "CodeBlock",
          "code": "const answer = 42 // the answer",
          "language": "ts",
          "lineNumbers": true
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

CodeBlock rendered by the React renderer on Web — **Web** React

CodeBlock rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

CodeBlock rendered by the Compose renderer on Android — **Android** Compose

CodeBlock rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-code-block, painted by each native renderer.

Variants

wrap

Props

Prop	Type	Default	Description
`code`requiredbind	`string`	–	The source text.
`language`	`plain \| json \| js \| ts \| tsx \| rust \| swift \| kotlin \| python \| bash \| html \| css \| sql \| yaml \| markdown`	`"plain"`	The syntax colouring.
`title`	`string`	–	A header line (a file name).
`lineNumbers`	`boolean`	`false`	Shows a line-number gutter.
`wrap`	`boolean`	`false`	Wraps long lines instead of scrolling sideways.
`copyable`	`boolean`	`true`	Shows the copy-to-clipboard button.
`highlight`	`[number]`	–	1-based line numbers to emphasise.
`maxLines`	`number`	–	Lines shown before the block scrolls.

Events and slots

No events, no slots. Children: none.

Accessibility

Role: region
Semantics: region (code), copy = button

Keys	Action
`Tab reaches the copy button; EnterSpace`	copy and announce `copied`

Theming

Recipe parts: CodeBlock/rootCodeBlock/headerCodeBlock/titleCodeBlock/copyCodeBlock/gutterCodeBlock/lineCodeBlock/lineNumberCodeBlock/tokenCodeBlock/bodyCodeBlock/code
Keyed by: lineNumberswrapkind:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme