Skip to main content
Frontend Glossary

UI components · Data display

Code Block

Also called: Code snippet, Syntax highlighting, Fenced code block, Pre block

An area that shows code in a monospace font with syntax highlighting, usually with a language label, line numbers, and a one-click copy button.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Style code blocks on the docs page with a dark gray background, a monospace font at 14px, and syntax highlighting for JavaScript and Bash. Show the file name in the top-left corner and a "Copy" button in the top-right corner that changes to "Copied" for 2 seconds after clicking. Show line numbers on the left, and let long lines scroll sideways instead of wrapping.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Code Block is what you need.

Use Code Block when

  • Tech docs, blogs, or tutorials need to show several lines of code or commands
  • Users need to copy the code into their own project and run it
  • Showing text that must keep its formatting, like config files or JSON returned by an API

Pick something else when

  • A sentence only mentions one function name or command; use inline code

  • Users need to edit and run code on the page; use an online code editor

  • Showing regular long paragraphs, since a monospace font slows down reading

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    No copy button, so users selecting by hand keep missing the first or last characters

  2. 02

    Long lines of code wrap automatically, scrambling the indentation so the structure is hard to see

  3. 03

    Putting a screenshot of code on the page, so it can't be copied or searched

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A monospace text area with a background color, optionally with a file name or language label and a copy button at the top, and line numbers on the left.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Code blocks show code in docs, blogs, and tutorials: a light gray or dark background, a monospace font, indentation and line breaks kept, and keywords, strings, and comments in different colors. A complete code block usually also has a "Copy" button in the top-right corner, a language or file name label in the top-left corner, and line numbers on the left, and it can highlight specific lines. In HTML it's written as <pre><code>, and syntax highlighting is usually done with libraries like Shiki, Prism, or highlight.js.

Don't confuse it with inline code: a function name or command in the middle of a sentence (like npm install) uses inline code, with just a light gray background. Only multi-line code gets a code block. Don't wrap long lines of code automatically, since that breaks the indentation; let the code block scroll sideways instead. Online code editors you can edit and run code in (like Monaco or CodeMirror) are far more complex than a code block and aren't the same thing.

Developer info
Term ID
component-code-block
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • pre:has(> code)
  • pre[class*="language-"]
  • pre.shiki
  • div[class*="language-"]:has(> pre)
  • .highlight:has(pre)
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026