Skip to content
v1.0
Components

Code block

A code sample on a fixed dark ground, with a copy button and an optional HTTP method and path header.

Samples

$ pnpm --filter @gridd/ui build:tokens ok wrote css/tokens.css - 89 colours, 26 contrast obligations verified
Code 
<GdCodeBlock copy="pnpm --filter @gridd/ui build:tokens">$ pnpm --filter @gridd/ui build:tokens
  ok wrote css/tokens.css - 89 colours, 26 contrast obligations verified</GdCodeBlock>

Press the copy button with this tab in the background and it says copy failed rather than copied. The label returns to rest after two seconds either way.

Endpoints

GET/v1/parcels/{lotplan}
{ "lot_plan": "L14RP80432", "area_m2": 812, "zone": "low_density_residential", "constraints": [{ "type": "flood", "extent_pct": 18 }] }
Code 
<GdCodeBlock
  method="GET"
  path="/v1/parcels/{lotplan}"
  copy="curl https://api.gridd.build/v1/parcels/L14RP80432"
>{
  <span class="tok-key">"lot_plan"</span>: <span class="tok-str">"L14RP80432"</span>,
  <span class="tok-key">"area_m2"</span>: <span class="tok-num">812</span>
}</GdCodeBlock>

API

Props

PropTypeDefault
methodstring—

GET, POST, … — renders the endpoint header with the method as a green mono chip.

pathstring—

The endpoint path beside the method. The header renders whenever any of `method`, `path` or `copy` is set.

copystring—

The raw text the copy button puts on the clipboard. The slot may be marked up; this must not be, or the reader pastes your `<span>`s.

Slots

default

The sample. Wrap identifiers in `.tok-key`, strings in `.tok-str`, numbers in `.tok-num` and comments in `.tok-com` — those four classes and no others.

Usage Guidelines

  • Use GdCodeBlock for anything a reader would copy — a command, a request, a component snippet.
  • Use GdCode for an identifier inside a sentence. A one-token block is a paragraph interrupted.
  • Always pass copy, and pass the plain text — not the marked-up slot content.
  • Pass method and path together when the sample IS an endpoint. Either alone renders a header with half an address in it.
  • Mark up sparingly: the four token classes are the whole palette. Anything else lands unstyled.
  • Do not put a wide sample in a narrow column and expect it to wrap — the block scrolls itself, which is right for code and unhelpful for prose.

Behavior & Anatomy

The dark ground

The header bar is #14151A and the code area is #1B1C22 — in BOTH themes, and that is deliberate. A code block that inverts with the page means a screenshot in the docs stops matching the docs, and syntax colours tuned for a dark ground have to be re-derived for a light one — two palettes to keep honest instead of one. Switch the theme on this page: everything else moves and the code block does not.

The copy button reports the outcome

Copy uses the async clipboard API and reports the outcome. A copy button that always says "Copied!" is lying about the case where the page is not focused or the permission was refused — press it with the tab in the background and watch it say so.

Four token classes, not twelve

.tok-key, .tok-str, .tok-num and .tok-com for comments. A twelve-colour theme in a docs sample competes with the prose around it.

The block scrolls itself rather than making the page scroll sideways, which is the same rule the data table follows.

Navigate

Esc