On this page
Overview
Show code, HighlightedSource.tsx
Code: a command, a value or a file name inside a sentence.
Show code, InlineCode.tsx
Variants
Long lines
A block keeps the source's layout and scrolls long lines sideways, or wraps them where it holds prose.
Long lines scroll, or wrap: copying keeps the source's own line breaks.
Show code, WrapLongLines.tsx
- Scroll
A block whose layout matters. The default.
- Wrap
A block of prose, such as text in a JSON setting.
Anatomy
Block
Label
Copy button
Source
Show code, CodeBlockAnatomy.tsx
Behaviour
Highlighting
Code takes its colors from the app theme, light or dark, and stronger ones under high contrast, so every colored word stays readable.
- Inline code sits in a sentence on a faint fill of its own, so a command or a file name stands apart from the words around it.
- Blocks and diffs sit on a faint layer of their own that stands apart from the page, a pane, a card or a popup alike.
- A block shows its plain source first and colors it once the highlighter loads.
Without a language, the source stays plain text.
Show code, PlainOutput.tsx
Diffs
CodeDiff shows what changed between two versions of a file, with the same colors as a block.
- Its added and removed lines are faintly tinted.
- The counts of added and removed lines can feed a DiffStat.
Show code, SettingsDiff.tsx
Adapting to width
A diff shows the two versions side by side where it is wide, and in one column in a narrow pane.
- Side by side
Most diffs, in one column when narrow. The default.
- One column
A diff read top to bottom at any width.
Show code, DiffColumns.tsx
Rules
Show code exactly as people use it, and keep blocks short.
Use it when
- A command, a value or a file name in a sentenceCode
- Source, commands or output to read or copyCodeBlock
- The changes between two versions of a fileCodeDiff
Show code, CommandToCopy.tsx
Show code, CommandWithPrompt.tsx
Length
Keep blocks short, and link to the whole file.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to a block's copy button, then its source. |
| ←, →, ↑, ↓ | Scroll the focused source. |
| Enter, Space | Copies the source, on Copy code. |