Code

Inline code, pre blocks, keyboard input, sample output and variables.

Code uses a system monospace stack (--font-mono). Inline code scales down to the surrounding paragraph size so it never balloons in headings; block-level code uses its own fluid size, --font-size-code.

Inline code

Use const for values that don't rebind, and wrap long paths like /engine/styles/components/alerts.css so they break at sensible points.

<p>Use <code>const</code> for values that don't rebind.</p>

Pre-formatted block

function greet(name) {
  if (!name) throw new Error("name required");
  return `Hello, ${name}!`;
}

Keyboard input

The <kbd> element styles as a 3D key with a bottom shadow that matches the press-down pattern.

Press ⌘+K to open search, or Esc to dismiss.

<p>Press <kbd>⌘</kbd>+<kbd>K</kbd> to open search.</p>

Sample output

<samp> represents program output — rendered in the monospace stack at the secondary-text colour.

Running the build prints: built 47 files in 820ms

Variable

<var> is used for placeholders inside prose — e.g. inside a command signature.

Run eleventy --input=dir --output=dir with the directory of your choice.

Long lines

Block code scrolls horizontally when lines exceed the content width. Inline code wraps at word boundaries, with overflow-wrap: anywhere as a last resort for long identifiers.