6 Pure CSS2 with JSPublished 2026-10-04Free · no sign-up
Eight ways to present code: a block with a Copy button, CSS-counter line numbers, highlighted and diff lines, tabbed snippets, a terminal window, inline code with keyboard keys, before and after panels and a collapsible long sample.
A code block with a language label and a Copy button in its header. The button copies the text with the Clipboard API and confirms with a status message, the pre is focusable so keyboard users can scroll it, and long lines scroll sideways.
Line numbers made with CSS counters on spans, so they are never copied with the code and are not read aloud. The gutter is a pseudo-element on each line, and a light theme keeps it readable in documentation pages.
A code block that draws attention to the important lines with a tinted background and a coloured edge, marked with a class on each line. Inserted and deleted lines get plus and minus markers in text, so the change is clear without colour.
The same example in several languages with tabs for HTML, CSS and JavaScript, following the ARIA tabs pattern. Arrow keys switch tabs, only the active snippet is shown, and each panel is a focusable pre labelled by its tab.
const tabs = [...document.querySelectorAll('.ct [role=tab]')];
function pick(t) { tabs.forEach(x => { const on = x === t; x.setAttribute('aria-selected', on); x.tabIndex = on ? 0 : -1; document.getElementById(x.getAttribute('aria-controls')).hidden = !on; }); t.focus(); }
tabs.forEach((t, i) => { t.addEventListener('click', () => pick(t)); t.addEventListener('keydown', e => { const d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0; if (d) pick(tabs[(i + d + tabs.length) % tabs.length]); }); });
05. Terminal Window
TerminalShell
A terminal-style block with window dots, a prompt symbol and output lines in a muted colour. The prompt is added with CSS so it is not copied with the command, which lets people paste commands straight into their own terminal.
View code
<figure class="term">
<div class="bar" aria-hidden="true"><i></i><i></i><i></i><span>bash</span></div>
<pre tabindex="0"><code><span class="cmd">npm install</span>
<span class="out">added 214 packages in 6s</span>
<span class="cmd">npm run build</span>
<span class="out">Build finished in 1.8s</span></code></pre>
</figure>
Styles for code inside running text: inline code with a subtle tint and kbd elements for keyboard shortcuts with a raised bottom edge. Both keep the line height steady so paragraphs do not get uneven gaps around them.
View code
<p class="inl">Set <code>display: grid</code> on the parent, then press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save. The <code>gap</code> property spaces the items.</p>
Two code panels side by side labelled Before and After, which stack on narrow screens. Each panel is a figure with a caption, so the labels are associated with the code, and both panels scroll independently when lines are long.
A long code sample shown with only the first lines visible and a Show full code toggle. It uses a details element, so the expand control is native and accessible, and a fade at the bottom hints that more code is hidden.
View code
<details class="lc">
<summary>Show full code (5 lines)</summary>
<pre tabindex="0"><code>const cart = [];
function add(item) { cart.push(item); render(); }
function remove(id) { cart.splice(cart.findIndex(i => i.id === id), 1); render(); }
function total() { return cart.reduce((s, i) => s + i.price, 0); }
function render() { document.querySelector('#total').textContent = total(); }</code></pre>
</details>
Long lines should scroll sideways rather than wrap or break the layout. Give the <pre>tabindex="0" so keyboard users can focus and scroll it.
Numbers that do not copy
Line numbers and terminal prompts added with CSS pseudo-elements are not copied with the code, so readers can paste commands straight into their editor or terminal.
Changes without colour alone
For diffs, add plus and minus markers in text next to the green and red backgrounds, so the change is clear in high contrast mode and to colour blind readers.
Copy buttons
Use the Clipboard API and confirm with a status message that screen readers announce, then reset the button label after a moment.
Frequently asked questions
Do these include syntax highlighting?
No. They are layout styles; add a highlighter such as Prism or Shiki if you need token colours.
Which demos need JavaScript?
The copy button and the tabbed snippets.
How do I stop line numbers being copied?
Generate them with CSS counters on pseudo-elements and add user-select: none.