Code snippet

A code snippet shows a few lines of code in a monospace block, with highlighting and a button to copy them.

Also called: code block
Platforms: Web
In the gallery: 50 web designs

Code snippets from the Kombai gallery: a video API's request dialog, an AI assistant's answer with a Python test suite and an analytics tool's install guide.

What is a code snippet?

A code snippet is a read-only block of code set in a monospace font, with colors that pick out keywords, strings and comments. It keeps the code exactly as written, line breaks and indentation included, so people can read it or paste it somewhere else. Most snippets have a copy button, and many offer the same code in several languages.

Code keeps its exact spacing and line breaks, and long lines scroll instead of wrapping.
A copy button sits in the corner and confirms when the code is copied.

Code snippets show up across code editor, chat, dialog and settings screens.

When to use a code snippet

Install and setup stepsCommands and config people need to paste exactly as shown.
API examplesA first request in cURL, JavaScript or Python, with keys filled in where possible.
Embed codesAn iframe or script tag that puts a widget on someone else's site.

When not to use one

Code people will editUse a code editor or a text area when the code is meant to change.
Single valuesAn API key or a link fits a read-only text field with a copy button.
Non-technical readersIf people only need the result, offer a button or a setting instead of code.

Anatomy of a code snippet

This one works. Switch languages with the tabs or the arrow keys, then copy the code.

Send a message

# Send your first messagecurl https://api.example.com/v1/messages \  -H "Authorization: Bearer $API_KEY" \  -H "Content-Type: application/json" \  -d '{"to": "maya@northwind.com", "text": "Hello"}'

Default
Keyboard focus
Copied

HeaderNames the file or request
Language tabsThe same code, other languages
Copy buttonCopies the whole block
Line numbersHelp people refer to a line
CodeMonospace, highlighted
StatesDefault, focus, copied

Code snippet variants

We sorted the code snippet designs in the Kombai gallery into five patterns. Browse all 50 web designs.

1. Snippets with language tabs

The same request in cURL, JavaScript, Python or TypeScript, with tabs above the block to switch between them.

2. Install commands

A one-line command, like npm install or git clone, in a slim block with a copy button at the end.

3. Embed codes

An iframe or script tag to paste into a website, often with options above it that change the code.

4. Code in AI answers

Code blocks inside a chat reply, labeled with the language and paired with Copy and Edit buttons.

5. Export code dialogs

A dialog that turns what people set up in a playground or console into code they can run themselves.

Where code snippets show up

Developer docs

Usage examples between paragraphs of a guide, with a file name above each block.

API onboarding

A first request shown right after people create a key, so they can make a call in a minute.

Deploy and setup commands

Terminal commands for deploying or running a project, sometimes with tabs for Bash, Zsh and Fish.

Code snippet vs similar components

Property	Code snippet	Text area	Text field
Holds	Read-only code	Editable text over many lines	One editable line
People	Read and copy it	Type and change it	Type a short value
Best for	Commands, examples and embeds	Messages, notes and raw markup	Names, keys and links

Build notes

Put code in <pre><code>, so spacing and line breaks survive and the markup says it is code.
Let long lines scroll sideways, and give the scrolling <pre> tabindex="0" so keyboard users can scroll it.
Make the copy button a real <button> with a label like "Copy code", and announce "Copied" in a live region.
Copy with navigator.clipboard.writeText, and copy the code only, without line numbers or prompts.
Build language tabs as a tablist, so the arrow keys switch languages, and remember the choice across the page.
Keep highlight colors at 4.5:1 contrast against the block background, in both light and dark themes.

FAQ

Should code snippets have line numbers?

Use them for longer blocks that the text refers to, like "see line 12". Skip them for one-line commands. Either way, keep them out of the copied text and out of the text selection.

Should long lines wrap or scroll?

Scroll, for most code. Wrapping can make a line look like two and breaks the indentation that shows structure. Wrap only prose-like content, like a long URL in a short command, and make it obvious.

Dark or light code blocks?

Either works. A dark block on a light page makes code easy to spot, while a block that matches the page feels calmer in long docs. Whatever you pick, check the highlight colors for contrast in both themes.

Where should the copy button go?

In the top right corner of the block, always visible. Buttons that appear only on hover are missed on touch screens and by keyboard users. After a click, swap the icon or label to "Copied" for a moment.

Related terms

All glossary terms · Browse 50 web code snippet designs