Code block

Code on this site is monochrome, and that is a decision rather than an omission. Every syntax theme we measured puts comments and punctuation below 4.5:1 on our surfaces — a documentation site that fails its own contrast floor in the one place people copy from is worse than one that renders code in a single readable colour.

Anatomy

<script src="https://widgets.sportingscouter.com/v1/embed.js"
        data-event="maratona-de-lisboa-2026"
        data-variant="score" defer></script>

A copy button, a hairline, a muted surface, and nothing else. No filename chrome, no window dots, no language badge unless the language is genuinely ambiguous on the page.

Specification

Copy behaviour

The button is the only interactive part, and it has one job it must do without lying about it. Try it on any block on this site.

• Label changes to COPIED for 2 seconds, then reverts. The button is inside an aria-live="polite" region so the change is announced.
• Copies the raw text, never the rendered HTML — no entity escaping, no stray  , no line numbers.
• Failure is visible. If the clipboard API is unavailable or refused, the label reads SELECT AND COPY and the block's text is selected. A button that silently does nothing is the worst outcome.
• Never auto-selects on click of the block itself. People double-click inside code to select a word; hijacking that costs more than it saves.

Inline code

Inline code such as --color-primary is the same family at --text-meta, tinted with no background fill. A filled inline chip inside a paragraph breaks the line rhythm, and at our line-height the fill boxes collide on wrap.

Structure

<figure class="code-block">
  <button class="code-block__copy" type="button">COPY</button>
  <pre><code>npm install @ss/ui</code></pre>
</figure>

<!-- With a caption, when the block needs a name -->
<figure class="code-block">
  <figcaption class="eyebrow">packages/config/tailwind/theme.css</figcaption>
  <button class="code-block__copy" type="button">COPY</button>
  <pre><code>@theme { --color-primary: #0f6fa8; }</code></pre>
</figure>

A named block is a <figure> with a <figcaption> — the caption is the file path, styled as an eyebrow, and it belongs to the block rather than floating above it as a loose heading.

Rules

• Code in a code block must run. No ..., no // your code here, no pseudo-imports. A snippet that cannot be pasted and executed is a diagram, and should be written as prose instead.
• Comments carry the reasoning, not a restatement of the line below. // Indeterminate has no HTML attribute earns its place; // set the value does not.
• Never put a token value in a snippet by hand. Reference the token. Hard-coded hexes in documentation are how two files start disagreeing.
• One block, one idea. If a snippet needs three headings to explain, it needs to be three snippets.
• No horizontal scroll under 80 characters. If a line is longer than that, break it at an argument boundary — the scroll exists for the exceptions, not the norm.