Component

Codeblock

Published on

Description

The Codeblock component displays a multi-line block of code with syntax highlighting, a download link, and a copy to clipboard button. Code is rendered inside <pre><code> elements and tokenized with PrismJS. One file per language is loaded on demand, named for what a call site writes in language: js, ts, css, html, xml, json, yaml, ini, properties, sh, sql, rust, php, python, ruby, graphql, nginx, apache, docker, csv, uri, regex, dns and http.

dns and http read a record or a header value on its own, with no owner name or header name in front of it, which is the form a DNS provider's field or a scan report shows. Both colour the names, numbers and quoted values, and leave a bare value plain, because a grammar that does not know the spec cannot vouch for it.

Each record and header that defines a fixed set of values has a variant that knows it, dns-dmarc, dns-spf, dns-dkim, dns-mta-sts, dns-tls-rpt, dns-bimi, dns-caa, http-csp, http-hsts, http-hpkp, http-coop, http-coep, http-corp, http-dip, http-referrer, http-frame-options, http-content-type-options, http-cross-domain-policies, http-download-options and http-integrity-policy. A value the spec defines is coloured as a keyword; anything else stays plain, so a typo or a value borrowed from another spec shows up as unhighlighted rather than passing for correct.

Use it for standalone code samples and snippets. For a short code reference within a sentence, use the inline <code> element instead.

Both controls float to the inline end, copy in the corner and download beside it. The file saved is code.txt; pass filename to name it something else, filename="app.js".

Example

Open in new tab
View HTML markup 
<pre is="ds-codeblock-actions" data-filename=""><code is="ds-codeblock-highlight" data-lang="js">function greet(name) {
	return `Hello, ${name}!`;
}
greet("world");</code></pre>

Accessibility

  • Code is rendered in <pre><code> elements, preserving whitespace and line breaks for screen readers.
  • The copy control is a native <button> with a visually hidden label that switches from Copy to Copied and is announced via aria-live="polite".
  • The download control is a native <button> with its own visually hidden label, reachable by keyboard on the same terms as the copy button.
  • Token colors derive their lightness from the theme so contrast holds in both light and dark mode.

Variables

  • --code-comment
  • --code-punctuation
  • --code-deleted
  • --code-inserted
  • --code-number
  • --code-operator
  • --code-keyword
  • --code-function
  • --code-variable
  • --lightness-code