code-block

A syntax-highlighted code block with copy-to-clipboard, line numbers, focus mode, diff support, and multi-file tabs. Already used throughout these docs and shipped as a VB dependency, but independently usable on any HTML page.

Where to find it

npm: @profpowell/code-block
GitHub: ProfPowell/code-block
Live demo: profpowell.github.io/code-block
License: MIT

Install

Already in Vanilla Breeze: import is already done by src/doc-extras.js, so any VB-built page can use <code-block> directly without additional setup.

Demo

The block chrome (header, copy button, focus dim) reads VB color and spacing tokens. Theme switching re-skins the chrome; the syntax-highlight palette is governed separately by the highlight.js theme attached on the host.

Quick reference

Feature	Attribute
Multi-file tabs	Wrap blocks in `<code-block-group>`
Line highlighting	`highlight-lines="3,5-7"`
Focus mode (dim non-highlighted lines)	`focus-mode`
Line numbers	`line-numbers`
Filename header	`filename="src/foo.js"`
Lazy highlighting	`lazy`
Diff support	`language="diff"` with `+`/`-` prefixes
Open in CodePen	`codepen` attribute

See the README for the complete attribute and CSS-property reference.

Usage

Wrap a code-block element around the snippet you want to highlight. Pass the language, optional line-numbers, highlight-lines, and focus-mode:

<code-block language="javascript" line-numbers highlight-lines="2-3" focus-mode>
function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}
</code-block>