Code

Three elements carry code styling and all three take the mono slot documented on the Typography page: <code> for a reference inside a sentence, <pre> wrapping a <code> for a block, and <kbd> for a key. None of them needs a class.

Inline code

<p>Use <code>var(--text-primary)</code> for body text.</p>

Inline code sits on a 5 % mix of the text colour — not --background-faded, which is a different value — with small padding and a 4px radius. It is set white-space: nowrap, so a long token will not wrap and will overflow a narrow column.

Code blocks

.article-card {
  background-color: var(--background-plain);
  color: var(--text-primary);
  border-radius: var(--radius-m);
}

<pre><code>.article-card {
  background-color: var(--background-plain);
}</code></pre>

A block is always <pre> with a nested <code>. The inner element resets the inline ground, padding and radius so the two treatments do not stack into a box inside a box.

Keyboard keys

<p>Press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>.</p>

<kbd> renders as a key cap, with a border and a shadow doing the work. Chain them with a literal + between, outside the elements.

Rules

• Keep inline code short. It cannot wrap, so a long path or selector will push out of its column — anything that long belongs in a block.
• Use <code> for a thing you could type — a token, a class, a filename, a function. Not for emphasis; that is <strong> or <em>.
• Never write a <pre> without a nested <code>. The reset that stops the two styles compounding lives on the inner element.
• Do not expect syntax colouring. highlight.js runs and stamps its classes, but no theme stylesheet is loaded, so blocks render monochrome and follow the theme like any other text. If one is ever added it has to be themed twice, light and dark.