Code Block

Use <code-block> to display source that readers can select, copy, and scroll with the keyboard.

Examples

HTML source · HTML

<button type="button" class="save">Save</button>

CSS source · CSS

button.save { color: #173760; }

JavaScript source · JavaScript

const label = 'Save';

Shell source · Shell

printf '%s' Ready

Use Code Block

Put escaped source inside <pre><code>. Give the <pre> a label and tabindex="0" so keyboard users can scroll long lines.

Code Block markup · HTML

<code-block language="html">
	<pre tabindex="0" aria-label="Button source"><code>&lt;button type="button"&gt;Save&lt;/button&gt;</code></pre>
</code-block>

language defaults to html. Use css, javascript, or bash for the other grammars. An unknown language displays as plain text. Changing the attribute highlights the current text with the new grammar.

These examples ship with colors in their HTML, so they work with JavaScript disabled. For blocks created in the browser, load the stylesheet, register the module, and insert each block with its source already in place. See the README for the file layout and import map.

Component README · ES module · Stylesheet · Custom Elements Manifest