Code

code, kbd, samp and pre use the monospace font stack, a tinted background and a slightly smaller size.

<p>
  Use <code>display: grid</code> for layout, press <kbd>Alt</kbd> + <kbd>Tab</kbd> to switch
  windows and expect <samp>Build finished in 1.2s</samp> at the end.
</p>

Code blocks#

Put <code> inside <pre> for a block. The block scrolls sideways when a line is too long, and the inner code drops its own background and uses the block padding.

<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("world"));</code></pre>

samp works the same way inside pre, and a kbd in pre gives you a command line.

<pre><kbd>npm run build</kbd>
<samp>Done.</samp></pre>

Syntax highlighting#

Pico Reforged ships no highlighter. Use any library that adds classes or inline styles inside pre code and style the tokens yourself.

Accessibility#

A pre that scrolls horizontally should be reachable by keyboard. Add tabindex="0" to it if your target browsers do not make scrollable regions focusable. kbd is drawn with the text color as background and the page color as text, so it stays readable in light and dark mode.

Customization#

--pico-font-family-monospace

ui-monospace, "Cascadia Code", "SF Mono", ...

Monospace font stack.

--pico-code-background-color

light-dark(#f3f4f6, #18191d)

Background of code, samp and pre.

--pico-code-color

light-dark(#393d45, #babec4)

Text color of code, samp and pre.

--pico-code-kbd-background-color

var(--pico-color)

Background of kbd.

--pico-code-kbd-color

var(--pico-background-color)

Text color of kbd.

See also Misc for other inline elements.