Code
Inline code and keys, and a block with a filename header and a copy action.
Examples
Inline
Press ⌘ K to search, set --ae-hue, or highlight anything.
Block
--ae-phi: 1.618034;
--ae-space-5: round(calc(var(--ae-unit) * var(--ae-phi)), 1px);Anatomy
code | Inline code on a small tinted fill. |
kbd | One key or one shortcut per element; a bottom hairline makes it read as a keycap. |
mark | Highlighted text on a warning tint. |
figure.code | Block with a header. A bare <pre> works too, without the header. |
> figcaption | Filename, monospace and muted, with an optional copy button at the end. |
> pre > code | The code. Scrolls sideways when lines are long. |
API
| Attribute | Values | Description |
|---|---|---|
data-copy | <selector> | On a button: aequitas.js copies the text of the element the selector names. Bare, it copies the <pre> of the closest .code. |
Behaviour
Clicking a [data-copy] button writes the text to the clipboard and shows "Copied" on the button for a moment. Without aequitas.js the button renders but does nothing.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- The "Copied" label swap is not reliably announced. Pair it with a toast when the confirmation matters.
- A
<pre>that scrolls sideways needstabindex="0"in browsers that don't make scroll containers focusable, so keyboard users can reach the overflow. - Symbols such as
⌘are read inconsistently. Name the key in the surrounding text when it matters. <mark>is not announced by most screen readers. Say why the text is highlighted when that is the point.