Highlight

Read-only syntax-highlighted code block — the same owned tokenizer as CodeEditor, without the textarea.

Category: display · WCAG 2.1-AA · editor, code, syntax-highlighting, display, read-only

Props

Prop	Type	Default	Description
`value`	`string`	—	Code to render
`language`	`string`	`plaintext`	Grammar name (plaintext/json/javascript/typescript/css/html/markdown/bash)
`lineNumbers`	`boolean`	`false`	Show the line-number gutter
`wrap`	`boolean`	`false`	Soft-wrap long lines
`tabSize`	`number`	`2`	Spaces per tab stop
`ariaLabel`	`string`	—	Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated.
`label`	`string`	—	Accessible label for the code block
`className`	`string`	—	Additional CSS class names merged onto the root element.
`gutterRef`	`Ref<HTMLDivElement>`	—	Ref to the gutter column (used by `CodeEditor` for scroll-sync).
`preRef`	`Ref<HTMLPreElement>`	—	Ref to the scrollable `<pre>` (used by `CodeEditor` for scroll-sync).

Displaying non-editable code or config with syntax colors — docs, snippets, examples
A lightweight highlighter that themes via the cascivo token system

The code must be editable — use CodeEditor
You need copy-to-clipboard chrome around a snippet — pair with a code-snippet surface

import { Highlight } from '@cascivo/editor'
import '@cascivo/editor/styles.css'

<Highlight language="json" value={'{ "ok": true }'} />