Code block

.slate-code-block is the panel: a bordered, clipped surface in the code palette, an optional header strip, and everything scoped inside it. The syntax map lands on one set of --slate-syn-* tokens, so switching highlighter is never re-picking colours. The three blocks below are the same eight lines of JavaScript, marked up three different ways — Prism's .token.*, highlight.js's .hljs-*, and Shiki's css-variables inline var() references — and should render indistinguishably.

Prism, at .token.*

// Subset a variable face to Latin, keeping the axes intact.
import { subset } from 'fonttools';

export async function build(face) {
  const unicodes = 'U+0020-007E,U+00A0-00FF';
  const zopfli = true;

  return subset(face, { unicodes, zopfli, flavor: 'woff2' });
}

highlight.js, at .hljs-*

// Subset a variable face to Latin, keeping the axes intact.
import { subset } from 'fonttools';

export async function build(face) {
  const unicodes = 'U+0020-007E,U+00A0-00FF';
  const zopfli = true;

  return subset(face, { unicodes, zopfli, flavor: 'woff2' });
}

Shiki, at css-variables

// Subset a variable face to Latin, keeping the axes intact.
import { subset } from 'fonttools';

export async function build(face) {
  const unicodes = 'U+0020-007E,U+00A0-00FF';
  const zopfli = true;

  return subset(face, { unicodes, zopfli, flavor: 'woff2' });
}

The header strip

Optional markup; the panel renders without it. The copy button is styled and does not copy — that is script, and this package ships none.

# Latin + common punctuation, variable axes intact
pyftsubset HankenGrotesk[wght].ttf --unicodes=U+0020-007E,U+00A0-00FF --flavor=woff2 --output-file=hanken-grotesk-variable-normal.woff2

The AA contrast opt-in

Tokyo Night's comment colour measures 2.76:1 light and 2.50:1 dark, both under WCAG AA's 4.5:1. The theme reproduces faithfully by default, and data-contrast="aa" switches the comment colour to --slate-syn-comment-aa (4.94:1 / 4.92:1) per block. The two panels below share one source line, so the shift is the only difference between them.

// Tokyo Night's own comment colour, reproduced.
const faithful = true;

// The remedy, in the theme's own hue.
const faithful = true;

Keyboard interaction

• Each panel's <pre> is its own scroll container (WCAG 1.4.10): a long line scrolls inside the panel rather than being cut off or taking the page's own scrollbar with it.
• The copy button, where present, is reached by Tab like any other button and shows the standard :focus-visible ring, redrawn in --slate-syn-function because the ring's usual accent colour is not asserted against a code panel's ground.
• The copy button does not copy — styled only, since this package ships no script.