> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# CodeSnippet
A block of code to be read and copied, never edited — reach for `InlineCodeSnippet` when the code belongs inside a sentence, and a real editor when the value is meant to change. Everything beyond the code is composed: a `CodeSnippetHeader` carrying a title or tabs, `CodeSnippetActions` for copy, wrap and fullscreen, `CodeSnippetLineNumbers`, and per-line colour, prefixes and folds — and highlighting happens only inside a `CodeSnippetAdapterProvider`. The snippet sits inside a `display: contents` wrapper that keeps it mounted across fullscreen, so space snippets with their own `className` (for example `mt-16`) or a `gap` on the parent — not `space-*`, `divide-*` or child selectors on the parent.
[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/CodeSnippet) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-codesnippet-codesnippet--overview)
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const Default = () => (
);
```
## Usage
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
```
## Examples
### CodeSnippet
#### With line numbers
`CodeSnippetLineNumbers` is a sibling of the code inside `CodeSnippetContent`, so the
gutter is something you compose in rather than a prop you switch on.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const WithLineNumbers = () => (
);
```
#### Sizes
The three sizes. `sm` is the default at 12px; `md` and `lg` step the code to 14 and
16px for a block meant to be read from further away.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
import { VStack } from '@wallarm-org/design-system/Stack';
export const Sizes = () => (
);
```
#### Line annotations
`lines`, keyed by line number, tints a line and hangs a prefix off it — here a
tooltipped icon on each of the three headers worth calling out.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
import { Info, Skull, TriangleAlert } from '@wallarm-org/design-system/icons';
import { Tooltip, TooltipContent, TooltipTrigger } from '@wallarm-org/design-system/Tooltip';
export const LineAnnotations = () => {
const httpCode = `Host: inventory.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
AppleWebKit/537.36
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Cache-Control: no-cache`;
return (
Tooltip
),
},
5: {
color: 'warning',
prefix: (
Tooltip
),
},
7: {
color: 'info',
prefix: (
Tooltip
),
},
}}
>
);
};
```
#### Line colors
The seven line colours are semantic, so choose by what the line means — `danger` for
the attack, `info` for the aside — not by which tint reads best.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
import { Info } from '@wallarm-org/design-system/icons';
export const LineColors = () => {
const colorsCode = `Line 1: Default (no color)
Line 2: Danger color
Line 3: Warning color
Line 4: Info color
Line 5: Success color
Line 6: Brand color
Line 7: AI color
Line 8: Neutral color`;
return (
);
};
```
#### Line ranges
`ranges` narrows the emphasis to character offsets inside the line — start inclusive,
end exclusive — and once a line has them only the range is coloured, though the
line's own background stays.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const LineRanges = () => {
const httpCode = `GET /api/v2/users HTTP/1.1
Host: inventory.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
X-Forwarded-For: 192.168.1.100
Cache-Control: no-cache`;
return (
);
};
```
#### Text styles
`textStyle` overrides the weight or slant a colour would have chosen, with `className`
and `style` left for the cases the three named styles do not cover.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const TextStyles = () => {
const stylesCode = `Line 1: Default (regular)
Line 2: Medium weight
Line 3: Italic style
Line 4: Danger with italic override
Line 5: Neutral (default italic)
Line 6: Custom className
Line 7: Custom inline style`;
return (
);
};
```
#### Line with prefix
A `+` and `-` prefix over `success` and `danger` lines gives you a diff without a diff
component.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const LineWithPrefix = () => {
const diffCode = `const greeting = "Hello";
console.log("old message");
console.log("new message");
console.log("another new line");
export default greeting;`;
return (
);
};
```
#### Line wrapping
`wrapLines` against the same code unwrapped, in three pairs — what to check is that
prefixes, colour sticks and fold toggles stay on the first visual row of a wrapped line.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, getHttpFolds } from '@wallarm-org/design-system/CodeSnippet';
import { VStack } from '@wallarm-org/design-system/Stack';
export const LineWrapping = () => {
const longCode = `const veryLongVariableName = "This is a very long string that will demonstrate line wrapping behavior when the content exceeds the container width";
console.log(veryLongVariableName);`;
const httpCode = `GET /api/v2/users?page=1&limit=20&filter=active&sort=name&order=asc&include=profile,settings HTTP/1.1
Host: api.wallarm.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0
Content-Type: application/json
Accept: application/json
{
"filter": { "status": "active", "role": "admin" }
}`;
return (
);
};
```
#### With both scrolls
Given a fixed height inside a narrow column, the block scrolls in both directions
rather than pushing its container around.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
import { Skull, TriangleAlert } from '@wallarm-org/design-system/icons';
export const WithBothScrolls = () => (
);
```
#### Custom starting line
`startingLineNumber` renumbers the gutter, for a fragment lifted out of a longer file.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const CustomStartingLine = () => (
);
```
#### JSON with shiki
Shiki, supplied through `CodeSnippetAdapterProvider`, uses VS Code-style grammars.
The adapter lazily initializes its supported languages and github-light theme with
the Oniguruma WASM engine on the first highlight call.
```tsx
import { loadShikiAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const JSONWithShiki = () => (
);
```
#### Typescript with prism
TypeScript highlighted with Prism. Its loader emits only the Prism adapter's
dependencies; unused Shiki and highlight.js loaders are discarded by the consumer.
```tsx
import { loadPrismAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const TypescriptWithPrism = () => (
);
```
#### Bash with prism
A multi-line `curl` under Prism, where the continuation backslashes and the quoted JSON
body are the parts a highlighter usually gets wrong.
```tsx
import { loadPrismAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const BashWithPrism = () => (
);
```
#### HTML with highlight js
HTML highlighted with highlight.js. The adapter loads the library lazily and
exposes the languages listed by its getSupportedLanguages() method.
```tsx
import { loadHighlightJsAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const HTMLWithHighlightJs = () => (
);
```
#### HTTP request with prism
`language='http'` is a grammar in its own right — method, path and version on the first
line, then header names told apart from their values.
```tsx
import { loadPrismAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const HTTPRequestWithPrism = () => (
);
```
#### HTTP response with shiki
The response side, where the JSON body after the headers is highlighted as JSON rather
than as more header text.
```tsx
import { loadShikiAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot } from '@wallarm-org/design-system/CodeSnippet';
export const HTTPResponseWithShiki = () => (
);
```
#### With header
`CodeSnippetHeader` with a `CodeSnippetTitle` names the file the code came from, as a
bar above the block rather than a caption on it.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetHeader, CodeSnippetRoot, CodeSnippetTitle } from '@wallarm-org/design-system/CodeSnippet';
export const WithHeader = () => (
install.sh
);
```
#### With tabs and actions
Tabs in the header swap the `code` the block is given, which is how one command per
package manager is built; the actions sit at the far end of the same bar.
```tsx
import { useState } from 'react';
import { CodeSnippetActions, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetRoot, CodeSnippetTab, CodeSnippetTabs, CodeSnippetWrapButton } from '@wallarm-org/design-system/CodeSnippet';
export const WithTabsAndActions = () => {
const [tab, setTab] = useState('npm');
const code = packageManagerCodes[tab] ?? '';
return (
npmpnpmyarnbun
);
};
```
#### With floating actions
With no header to hold them, `CodeSnippetActions` floats over the top-right of the code
— the shape for a block whose only affordance is copy.
```tsx
import { CodeSnippetActions, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetLineNumbers, CodeSnippetRoot, CodeSnippetWrapButton } from '@wallarm-org/design-system/CodeSnippet';
export const WithFloatingActions = () => (
);
```
#### Show more
`maxLines` clips the block and adds the control itself — but only when it would hide at
least three lines, so the middle snippet stays open; the third passes props to the real
button by rendering `CodeSnippetShowMoreButton` in place of the automatic one.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetRoot, CodeSnippetShowMoreButton } from '@wallarm-org/design-system/CodeSnippet';
export const ShowMore = () => (
);
```
#### HTTP request with folding
`getHttpFolds` reads an HTTP message and returns its fold regions, so the reader opens
the headers or the body rather than scrolling past both.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, getHttpFolds } from '@wallarm-org/design-system/CodeSnippet';
export const HTTPRequestWithFolding = () => (
);
```
#### HTTP response with folding
The same helper on a response, where the body is usually the half worth folding away.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, getHttpFolds } from '@wallarm-org/design-system/CodeSnippet';
export const HTTPResponseWithFolding = () => (
);
```
#### With folding expanded
Folds over coloured lines: a collapsed fold takes its colours and prefixes with it, and
hands them back on expand.
```tsx
import { CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, getHttpFolds } from '@wallarm-org/design-system/CodeSnippet';
export const WithFoldingExpanded = () => (
);
```
#### With folding and show more
Folds, `maxLines` and `startingLineNumber` together — fold line numbers are absolute, so
`getHttpFolds` has to be given the same offset the gutter uses.
```tsx
import { loadShikiAdapter, CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, getHttpFolds } from '@wallarm-org/design-system/CodeSnippet';
export const WithFoldingAndShowMore = () => (
);
```
#### Fullscreen inside drawer
Fullscreen opened from a modal `Drawer` stacks above it as a nested layer: its buttons stay
clickable, and Escape or a backdrop click leaves fullscreen while the drawer stays open.
```tsx
import { Button } from '@wallarm-org/design-system/Button';
import { CodeSnippetActions, CodeSnippetCode, CodeSnippetContent, CodeSnippetCopyButton, CodeSnippetFullscreenButton, CodeSnippetHeader, CodeSnippetRoot, CodeSnippetTitle } from '@wallarm-org/design-system/CodeSnippet';
import { Drawer, DrawerBody, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@wallarm-org/design-system/Drawer';
export const FullscreenInsideDrawer = () => (
Requestpackage.json
);
```
### InlineCodeSnippet
#### Default
One snippet in three sentence sizes: `size='inherit'`, the default, scales the type
and the padding with whatever it sits in, and hovering offers the copy.
```tsx
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
import { VStack } from '@wallarm-org/design-system/Stack';
export const Default = () => (
Small text: Run{' '}
to
install dependencies.
Medium text: Run to install dependencies.
Large text: Run to install dependencies.
);
```
#### Sizes
The three fixed sizes, each beside the text size it pairs with — set one when the
snippet must hold its size regardless of its surroundings.
```tsx
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
import { VStack } from '@wallarm-org/design-system/Stack';
export const Sizes = () => (
To start creating an interface, run{' '}
and then apply the following...
To start creating an interface, run{' '}
and then apply the following...
To start creating an interface, run{' '}
and then apply the following...
);
```
#### Non copyable
`copyable={false}` takes the tooltip and the pointer cursor away with the copy, for a
snippet that is only being named rather than reused.
```tsx
import { InlineCodeSnippet } from '@wallarm-org/design-system/CodeSnippet';
export const NonCopyable = () => (