Section 12 · Components

Code surfaces.

Half the UI is code: payload bodies, response previews, Groovy hooks, raw HTTP. Treat code blocks as a first-class surface, not a styled <pre>.

Inline code

Use code tags for any monospace token in body text. --vp-color-neon on --vp-color-bg-2. Sparingly.

csscode {
  font: 500 0.9em var(--vp-font-mono);
  background: var(--vp-color-bg-2);
  color: var(--vp-color-neon);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--vp-color-line);
}

Code block

POST /v1/auth/login · application/json

{
  "username": "alice@foobar.beer",
  "password": "{{password}}"
}

Header strip: method · path · content-type on the left; copy on the right.
Body: monospace 12.5/1.7. Two-space indent. No line numbers unless > 25 lines.
Syntax tokens: keys → IMAP green, strings → neon, punctuation → fg-mute, numbers → warn.

Diff

- Authorization: Bearer abc123+ Authorization: Bearer xyz789  Content-Type: application/json

Hex / wire dump

For raw protocol bytes — SMTP wire log, MITM packet capture. Three columns: offset · hex · ASCII.

0000  45 48 4c 4f 20 6d 61 69 6c 2e 65 78 61 6d 70 6c   EHLO mail.exampl
0010  65 2e 63 6f 6d 0d 0a 32 35 30 2d 6d 78 31 2e 65   e.com..250-mx1.e
0020  78 61 6d 70 6c 65 2e 63 6f 6d 20 48 65 6c 6c 6f   xample.com Hello

Don't

Don't centre code. Always left-aligned. Always.
Don't use serif fonts in code surfaces. Even labels inside the block are mono.
Don't render raw JSON without a header strip. The user needs to know what they're looking at.