Theme
Code
Inline code, or a block of it. A highlighter wraps tokens in Token, whose kinds borrow the status colours.
Examples
Run serre doctor to check the installation.
serre compass shape --concept "verification gaps" \
--json | jq '.rank[0]'// The stage a concept is in.
pub enum Stage { Shaped = 1, Named("draft") }Props
Code
Inline code, or a block of it with `block`.
| Prop | Type | Default | Description |
|---|---|---|---|
block? | boolean | false | |
children | ReactNode | — |
Token
One highlighted token inside a code block. The kinds borrow the status colours, which the contrast tests hold to 4.5:1 on every surface a code block sits on, so a highlighter needs no palette of its own.
| Prop | Type | Default | Description |
|---|---|---|---|
kind | "string" | "number" | "title" | "keyword" | "comment" | — | |
children | ReactNode | — |
Keyboard
| Key | Does |
|---|---|
| Tab | Focuses a code block, which can then scroll with the arrow keys |
Accessibility
- A block is focusable so a keyboard user can scroll it (WCAG 2.1.1).