Code view

A block of code with its language named in the caption, numbers down the side and a Copy button. data-lang picks the colouring and data-mark picks the lines to call out.

With a caption and a note

[build]
out = "_site"
watch = true
drafts = false

[links]
check = true
ignore = ["mailto:", "tel:"]

<figure>
  <figcaption>atlas.toml</figcaption>
  <pre data-lang="toml" data-mark="3"><code>[build]
out = "_site"
watch = true
drafts = false

[links]
check = true
ignore = ["mailto:", "tel:"]</code></pre>
  <p>Watch mode rebuilds on save. Drafts stay out of the output until the flag flips.</p>
</figure>

The <figcaption> carries the file name; s72.js adds the language chip and the Copy button beside it. A <p> after the <pre> becomes the note under the block.

On its own

# rebuild on every save
$ atlas build --watch
182 pages, 1.94 s, 1 warning

<pre data-lang="sh"><code># rebuild on every save
$ atlas build --watch
182 pages, 1.94 s, 1 warning</code></pre>

A loose <pre> is wrapped in a <figure> for you, so it gets the same caption and button. In sh, comment lines are left out of what the button copies.

Notes

• The coloured languages are sh, js, html, css, rust, toml and json. Any other value still builds the view; the text just stays one colour.
• data-mark="3" marks one line and data-mark="2,5-7" marks a line and a range. A marked line takes a tinted background and a highlighted number.
• s72.js numbers the lines, writes the caption chip and wires the button. Without it the code shows as plain preformatted text.
• The <pre> takes keyboard focus, because a long line scrolls it sideways and a scroll region has to be reachable without a mouse.
• style="--s72-accent:var(--s72-go);--s72-accent-fg:var(--s72-go-fg)" on the <figure> recolours the rule across the top and the language chip.