# blocks/code

> Code block — plain text in a `<pre>`; colours are painted with the CSS Custom Highlight API, so the editable region holds nothing but text and the caret behaves exactly as in plain text.

Code block (F-30) — plain text in a `<pre>`; colours are painted with the CSS Custom Highlight API, so the editable region holds nothing but text and the caret behaves exactly as in plain text. Tokenizers load on first use (F-31); `lang: ''` detects the language (F-32). "\`\`\` " input rule, Tab indents, Enter keeps the indentation, ⌘⏎ leaves the block. Markdown: fenced.

```js
import code from 'verbal-editor/blocks/code';
```

| JS gzip | CSS gzip |
| --- | --- |
| 2.23 KB | 0.51 KB |

See it live on [Code](#/examples/code) — every example page on the landing is editable.

## Contract

|  |  |
| --- | --- |
| Block type | `code` |
| Content | plain text, no marks |
| Props | `lang:  \| plain \| js \| ts \| python \| html \| css \| json \| bash \| sql \| go \| rust` |
| Slash menu | `</> Code` |
| Keywords | `code` `snippet` `pre` |
| Keys | `⏎` `Tab` `⇧Tab` `⌘⏎` |
| Typing rules | ^\`\`\`(\[\\w+#-\]\*)\\s$ |
| Pastes from | `<pre>` `Markdown` |
| Copies as | `Markdown` `HTML` |

## Acceptance

| Feature | Acceptance | Budget |
| --- | --- | --- |
| F-30 · Code block | Caret and selection behave identically to plain text at any position | ≤ 3KB core |
| F-31 · Language tokenizers | Never bundled with core; a language loads on first use | ≤ 0.5KB each |
| F-32 · Language recognition | Correct on the top-10 languages for a ≥3-line sample; falls back to plaintext, never to a wrong guess | ≤ 0.5KB |