Code Block

Code Block shows code or terminal output people can read and copy. It is a figure with an optional header and a scrollable pre, plus an optional copy module.

Public web API

A figure, an optional caption with a copy button, and a named, focusable pre.

<figure data-bitsy-code-block>
  <figcaption data-bitsy-code-block-header id="install-cap">
    Terminal
    <button data-bitsy-code-block-copy type="button">Copy code</button>
    <span data-bitsy-code-block-status class="u-visually-hidden" aria-live="polite"></span>
  </figcaption>
  <pre tabindex="0" aria-labelledby="install-cap"><code>npx @bitsyui/cli init</code></pre>
</figure>

<script type="module">
  import { init } from "@bitsyui/bits/code-block/init";
  init();
</script>

data-bitsy-variant="inverted" gives a dark surface in both themes.
The pre needs tabindex="0" and a name so keyboard users can scroll long lines.
Without the script, leave out the copy button and status.

Variants and use

Default with copy

Terminal

npx @bitsyui/cli init

Inverted, no script

Output

✓ Wrote tokens.css
✓ Wrote bits/button/index.css

Long line scrolls

curl --fail --silent --show-error --location https://example.com/releases/download/v1.0.0/bitsy-linux-x64.tar.gz --output bitsy.tar.gz

Foundation versus Bit

The foundation styles plain pre and inline code. data-bitsy-code-block adds the frame, header, copy button, and keyboard scrolling. It does no syntax highlighting.