COMPONENT

Code block

A block of code, framed and scrollable, anywhere you like — not only inside an article.

A snippet

npm link @pipejesus/higreg-ds

HTML

<pre class="code-block"><code>npm link @pipejesus/higreg-ds</code></pre>

On a sunk surface, one that scrolls, and one that wraps

Drag the second one sideways. The third is code-block-wrap, for a narrow column: it breaks the line to fit instead, and select-and-copy still hands you the original.

@import "tailwindcss";
@import "@pipejesus/higreg-ds";

/* A long line with nowhere to break scrolls on its own axis rather than making the page scroll. Drag it. */

chmod +x flatty_0.9.0_linux_amd64.AppImage && ./flatty_0.9.0_linux_amd64.AppImage

HTML

<pre class="code-block code-block-sunk"><code>@import "tailwindcss";
@import "@pipejesus/higreg-ds";</code></pre>
<pre class="code-block"><code>/* A long line with nowhere to break scrolls on its own axis rather than making the page scroll. Drag it. */</code></pre>
<pre class="code-block code-block-wrap"><code>chmod +x flatty_0.9.0_linux_amd64.AppImage &amp;&amp; ./flatty_0.9.0_linux_amd64.AppImage</code></pre>

Reference

Read from components/code-block.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.code-block.prose.code-block-wrap.code-block-sunk

SETTINGSSet the first on one element; a theme sets the second for all of them.--code-shadow — falls back to --ds-shadow-well

READS--ds-focus-ring--ds-font-display--ds-font-features--ds-ground--ds-hairline--ds-ink-read--ds-pad-card--ds-radius-field--ds-rule--ds-sunk--ds-text-ui

Notes

A SOFT WRAP IS NOT A BROKEN COMMAND

This page used to say code cannot wrap, because "a wrapped shell command is a command that will not run". That is true of a break you TYPE and false of one the browser draws, and the difference matters because it is the whole reason code-block-wrap is safe.

Measured rather than argued. An 84-character command in a 240px box drew over eight lines; selecting it and reading the selection back gave the source string byte for byte, with zero newlines in it. pre-wrap keeps the newlines that are in the text and adds none of its own.

So the default stays a scroll, because at the reading measure a line that scrolls is easier to follow than one that folds. Reach for the wrap where the column is narrow and every line is a path — a download card, where the alternative is dragging a box to read a filename you were about to type.

ONE RULE, TWO ENTRY POINTS

This existed as .prose pre and nowhere else, so the only way to show a snippet was to wrap it in an article. Everything outside long-form prose had to invent its own — and this book's own Install page duly did, with the text touching the frame.

.code-block and :where(.prose) pre are now the same declaration rather than two copies of it. An author writing an article still uses a plain <pre> and should not have to remember a class; a caller outside prose names the component.

TWO THINGS TO KNOW

IT SCROLLS, ON PURPOSEone of two places in the system that may

IN A FLEX OR GRID ITEMthat item needs min-inline-size: 0

overflow-x: auto only clips against a definite width. Without that floor the item sizes to the code and takes the page sideways with it.