ds
Components
Code block

Code block

Highlighted code with a copy button.

// Group events into sessions with a 30 minute gap.
pub fn sessionize(events: &[Event]) -> Vec<Session> {
    let mut out = Vec::new();
    for e in events {
        match out.last_mut() {
            Some(s) if e.ts - s.end <= GAP => s.push(e),
            _ => out.push(Session::start(e)),
        }
    }
    out
}

Highlighting happens at build time with Shiki, using github-light and github-dark-dimmed, and switches with the theme. No highlighter ships to the browser. The copy button appears on hover, and is always visible on touch screens.

<div class="code">
  <pre>…highlighted HTML…</pre>
  <button class="copy" type="button">Copy</button>
</div>

Inline

Inside .prose, inline code gets a hairline box automatically. Elsewhere use .code-i.

Class	On	What it does
`.code`	div	Wraps a pre and an optional copy button.
`.copy`	button	Top-right copy button. Wire it to the clipboard API.
`.code-i`	code	Inline code outside prose.