20 CSS Code Blocks

Q: How do I add syntax highlighting to a CSS code block without Prism.js or highlight.js?

Wrap each token in a span with a semantic class: <span class="tok-keyword">const</span> , <span class="tok-string">'hello'</span> , <span class="tok-comment">// note</span> . Then color each class with a Prism / One Dark palette convention (keyword violet, string green, comment gray, function blue, variable amber, number pink). No JavaScript, no library — the tokens ship in the HTML you paste. The Syntax Highlighting demo (#01) shows the full color scheme with a real JS snippet + light-mode variant, and stays Prism-compatible so you can swap in real Prism markup later without changing the CSS.

Q: How do I build multi-file tab switcher code blocks in pure CSS?

Use radio inputs + the :checked sibling combinator. Hide <input type="radio" name="cbk-02-tabs"> for each tab (clip-path visually-hidden pattern, never display: none which breaks tab order), then style the sibling <label> elements as tabs. Each code panel uses :has() or general-sibling ~ selectors to show only when its radio is checked. No JavaScript needed for the switching. The Multi-File Tabs demo (#02) ships this pattern with VS Code chrome (filename tabs, close-X icons, syntax-highlighted content) and includes an @supports not selector(:has(*)) fallback for older browsers.

Q: How do I add diff highlighting (green added / red removed) to code blocks?

Give each line a data-diff attribute — data-diff="add" , data-diff="remove" , or data-diff="context" — and style with attribute selectors. Added lines get green background tint + + gutter marker via a ::before pseudo-element; removed lines get red background + - marker + optional strikethrough. Context lines stay plain. GitHub PR / GitLab MR aesthetic without any diff library. The Diff Code Block demo (#03) shows a 12-line function refactor with all three states + a subtle gutter treatment that keeps line numbers readable alongside the diff markers.

Q: How do I make a copy button work inside an iframe-sandboxed environment?

Use navigator.clipboard.writeText(codeEl.textContent) inside a try / catch . Clipboard API works in sandbox="allow-scripts" iframes without needing allow-forms or any other permission. On success, toggle a .is-copied class + aria-live="polite" announcement region for the "Copied!" state, then setTimeout a class removal after 1.6 seconds to reset. On failure, catch the promise rejection and show an error state with a fallback selection-based instruction. The Copy to Clipboard demo (#11) is the reference implementation — under 25 lines JS, handles clipboard API permission failures, and works inside our /try/ playground iframe.

Q: How do I add line numbers via counter-increment vs <ol> — accessibility trade-offs?

Two viable approaches with different trade-offs. (1) counter-increment : set counter-reset: line on <pre> , then each <span class="row"> gets ::before { counter-increment: line; content: counter(line) } . Numbers are CSS-generated so they don't get copied with triple-click — but screen readers may or may not announce them depending on speak: never support. (2) <ol> markup: <ol><li>code line</li></ol> . Screen readers announce each line as an ordered list item — accessible by default — but selection may include the numbers depending on browser. The Line Numbers demo (#12) uses counter-increment (more common pattern) and documents the trade-off in the gotchas panel so you can swap to <ol> if you need list-semantic announcement.

Q: Are these CSS code blocks accessible to screen readers?

Yes. Every code sample uses semantic <pre><code class="language-xyz"> markup (never styled <div> s), so assistive tech announces them as preformatted code. Icon-only buttons (Copy, Run, Reset) carry aria-label describing the action. Multi-file tabs implement the WAI-ARIA tablist pattern ( role="tablist" , role="tab" , aria-selected , aria-controls , role="tabpanel" ). Diff blocks announce line status via aria-label on gutter markers ("added line" / "removed line"). Every continuous animation is wrapped in @media (prefers-reduced-motion: reduce) and either disabled or reduced to a snap transition. Focus rings are visible on every interactive element (2px minimum, high-contrast per WCAG 2.4.13).

20 copy-paste CSS code blocks for developer documentation, tutorials, and marketing sites — syntax highlighting, multi-file tab switchers, diff blocks, editor hero mockups, terminal commands, Docusaurus / Mintlify docs blocks, interactive runnable blocks, highlighted line ranges, Mac terminal windows, glassmorphism, neon, neumorphic, split-pane with live preview, and expandable wrappers. Scoped under .cbk-NN, prefers-reduced-motion guarded, framework-agnostic.

14 pure CSS6 light JSPublished Jun 3, 20268 new designs · Updated on Aug 13, 2026

01 / 20Pure CSSNEW

Code Block with Syntax Highlighting (Prism-Style Token Colors)

Syntax highlighting is just CSS — the highlighter's only job is to wrap tokens in spans. This block hand-wraps a real ES2024 module in <span class="tok-keyword">, tok-string, tok-comment, tok-function, tok-variable, tok-number and tok-punct, then colours them from one oklch() token scale that follows the Prism / One Dark convention. Drop real Prism, Shiki or highlight.js output in later and the same rules light it up.

PublishedAug 13, 2026

02 / 20Light JSNEW

Multi-File Code Block with Tab Switcher (VS Code Style)

The tabbed file switcher every framework doc ships — VS Code chrome with an active-tab underline, muted inactive tabs, a hover close-X, and a panel swap in under 30 lines of vanilla JS. Wired as a real role="tablist" with roving tabindex, so arrow keys, Home/End and screen readers all behave the way the ARIA Authoring Practices say a tab set should.

PublishedAug 13, 2026

03 / 20Pure CSSNEW

Diff Code Block with Added and Removed Line Highlighting

A GitHub pull-request diff rebuilt as pure CSS: every line carries data-diff="add", "remove" or "context" and attribute selectors do the rest — tinted row, +/- gutter, old/new line numbers from two counters, and an inline-end accent rail. The gutter markers are real role="img" elements with labels, so a screen reader announces "added line" instead of skipping the most important information on screen.

PublishedAug 13, 2026

04 / 20Pure CSSNEW

Code Editor Hero Mockup with Filename and Traffic Lights

The centrepiece every developer-tool landing page needs: a full editor window mockup at hero scale — macOS traffic lights, an active filename tab, a line-number gutter, a status bar with branch and cursor position, a blinking caret and a slow @property conic-gradient border that breathes light around the frame. Pure CSS, no screenshot, so it stays crisp at any resolution and re-themes with your brand in one variable.

PublishedAug 13, 2026

05 / 20Light JSNEW

Terminal Command Block with Copy Only Command Button

The install block from every good docs site: a terminal shell with a muted $ prompt, npm / pnpm / yarn / bun tabs, and a copy button that copies only the command — never the prompt character. That one detail is the difference between a reader pasting pnpm add framer-motion and pasting $ pnpm add framer-motion straight into a syntax error.

PublishedAug 13, 2026

06 / 20Light JSNEW

Documentation Code Block with Language Badge and Copy Button

The workhorse of every documentation site — language badge left, filename centre, copy button right — rebuilt with the polish Docusaurus, Mintlify, Nextra and VitePress all converge on. The badge is colour-coded per language from a single data-lang attribute, and it is real text, so screen readers and search crawlers both know this block is TSX.

PublishedAug 13, 2026

07 / 20Light JSNEW

Interactive Runnable Code Block with Run and Reset Buttons

The pattern Astro Docs, MDX playgrounds and Sandpack all use: a code block with Run and Reset in the chrome and an output console that slides in underneath. This demo simulates the run (a 420ms pending state, then staggered output lines with a real exit code) so you can drop it into docs today and wire it to a worker, a WASM sandbox or a remote runner later — the UI contract does not change.

PublishedAug 13, 2026

08 / 20Pure CSSNEW

Code Block with Highlighted Line Range (Focus Callout)

Tutorial writing lives or dies on "look at these lines". This block marks a range with data-hl, washes those rows in accent tint with an inline-start rail, dims the rest to 55% so the eye lands where you point, and pins a side annotation to the range — the Docusaurus {4-6} highlight, done in CSS with the range stated as text in the header so it is never colour-only.

PublishedAug 13, 2026

09 / 20Pure CSS

Minimalist Dark Mode CSS Code Block

The default of this collection: no chrome, no buttons, no decoration — a hairline border, a deep neutral surface, honest monospace type and a comment colour that recedes without disappearing. Everything else in the set is this block plus one idea, which is exactly how a real design system should treat its code display.