Code snippet

A block of code with its language and a Copy button, for anything people should paste. Inline code and keyboard keys are styled too.

CSS: css/components/code.css
JS: js/components/code.js

01 — Variants

Block

The Copy button says “Copied” for two seconds, and screen readers hear it too. Every example on this site uses it.

HTML

<link rel="stylesheet" href="css/jewel.css">
<script src="js/jewel.js" defer></script>

Wrapped

.code--wrap wraps long lines instead of scrolling. .code--tall scrolls past about 20 lines.

Shell

git clone https://github.com/willchambers/jewel-design-system.git && cd jewel-design-system && python3 -m http.server

Inline

Inline <code> and <kbd> in running text.

Link css/jewel.css, then press / to search.

02 — Usage

Use it for

Anything people should copy exactly.
Escaping <, > and & in the markup.

Avoid

Syntax colors outside the text tokens. If you add a highlighter, map it to default, muted and accent only.

03 — Accessibility

Notes

tabindex="0" on the <pre> lets keyboard users scroll a long line.
On plain http pages, copying falls back to a selection copy.

04 — Without Jewel’s JS

What the script does

The script copies the code’s text when Copy is pressed and confirms it for two seconds, on screen and for screen readers. The CSS reads only the markup below, so a framework can do the copy itself and leave out code.js and data-component.

State	Set this	Notes
Copied	`data-state="copied"` on `.code__copy`, with the label “Copied”	Accent color. After two seconds the script removes it and puts the old label back.
Failed	`data-state="failed"`, with the label “Press Ctrl+C to copy”	Error color.
Announced	A visually hidden `<span aria-live="polite">` in `.code`, set to the same text	Screen readers hear it. Empty it when the label goes back.
What to copy	The text of the `<code>`, without its last line break	Use `navigator.clipboard.writeText()`.

Events and keyboard

Where the Clipboard API is blocked (plain http pages), the script copies from a hidden, selected textarea with document.execCommand("copy") instead.
jewel:copy doesn’t fire without the script. Run your own code once the copy succeeds.