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 |
label | string | — | Accessible label for the code block |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-editor-bg--cascivo-editor-fg--cascivo-editor-gutter-bg--cascivo-editor-gutter-fg--cascivo-editor-border
When to use
- Displaying non-editable code or config with syntax colors — docs, snippets, examples
- A lightweight highlighter that themes via the cascivo token system
When not to use
- The code must be editable — use CodeEditor
- You need copy-to-clipboard chrome around a snippet — pair with a code-snippet surface
Examples
Read-only snippet
import { Highlight } from '@cascivo/editor'
import '@cascivo/editor/styles.css'
<Highlight language="json" value={'{ "ok": true }'} />Related components
- CodeEditor — The editable surface sharing the same tokenizer