Component

Codeblock

Published on

Description

The Codeblock component displays a multi-line block of code with syntax highlighting and a copy to clipboard button. Code is rendered inside <pre><code> elements and tokenized with PrismJS. Supported languages: js, css, html, and bash.

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

Example

Open in new tab
View HTML markup 
  <pre is="ds-copy-pre">
  <code is="ds-codeblock" 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".
  • Token colors derive their lightness from the theme so contrast holds in both light and dark mode.
  • Inline format — for short inline code references
  • Icon — used for the copy button glyph

Variables

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