Code block

Shows read-only code and data, highlighted and numbered, with one click to copy.

Refined portWildCodeBlock.vueFeedback/Code BlockWCodeBlock

Try it

Copy, wrap and open each example, then try empty.

Responsejson200 OK

{  "serial": "WE-10442",  "name": "Bore 12",  "site": {    "id": "site_2291",    "name": "Emu Park"  },  "firmware": "4.2.1",  "online": true,  "battery_v": 3.62,  "signal_dbm": -87,  "interval_min": 15,  "last_seen": "2026-09-28T05:30:02+13:00",  "channels": [    {      "id": "soil_moisture_10cm",      "unit": "%",      "value": 34.2    },    {      "id": "soil_moisture_30cm",      "unit": "%",      "value": 31.4    },    {      "id": "soil_moisture_60cm",      "unit": "%",      "value": 28.9    },    {      "id": "line_pressure",      "unit": "kPa",      "value": 212.5    }  ],  "alarms": {    "active": 0,    "acknowledged": 1  },  "reseller": null}

Content

Line numbers

Collapsible

Title

<WildCodeBlock
  :code="response"
  language="json"
  title="Response"
  show-line-numbers
  collapsible
  :collapse-threshold="12"
  @copy="onCopied"
>
  <template #meta>
    <WildBadge color="success" size="2xs">200 OK</WildBadge>
  </template>
</WildCodeBlock>

Values carry the colour; keys stay ink. Copy leaves out line numbers.

When to use

Show a payload, export or log someone will read or copy.
Use the single line for an endpoint, key or secret.
Mask secrets on shared screens.

Don’t use it

For a value people edit. Use Text input.
For readings people compare. Use Table.

Anatomy

A header, a grey well, and a footer when there’s more to show.

Webhook payloadjsonalarm.triggered

{  "event": "alarm.triggered",  "id": "evt_01J8Z6Q4M2WQ",  "occurred_at": "2026-09-28T05:42:17+13:00",  "alarm": {    "id": "alm_7731",    "name": "Tank low",    "severity": "high",    "threshold": 20,    "value": 17.8,    "unit": "%"  },  "site": {    "id": "site_3107",    "name": "North Pump"  },  "logger": {    "serial": "WE-10877",    "name": "Tank 3"  },  "acknowledged": false,  "acknowledged_by": null}

Title, language and meta sit left; wrap and Copy sit right, at 32px.

Highlighting

Five JSON roles share the grey well. XML reuses them.

"battery_v"Keys--global-neutral-grey-1300 ·#0A090B

"Emu Park"Strings--global-blue-1100 ·#0C296A

3.62 -87Numbers--global-violet-800 ·#6E23C9

true nulltrue, false, null--global-purple-900 ·#7B238D

{ } [ ] : ,Punctuation--global-neutral-grey-1000 ·#4F4D55

12Line numbers--global-neutral-grey-1000 ·#4F4D55

No green, amber or red in the syntax, because those mean state.

Languages

JSON is re-indented. XML and plain text appear as they arrive.

Weekly exportxml

<?xml version="1.0" encoding="UTF-8"?><export site="Emu Park" from="2026-09-01" to="2026-09-07">  <!-- Daily mean soil moisture, 30 cm probe -->  <logger serial="WE-10442" name="Bore 12">    <reading date="2026-09-01" unit="%">32.1</reading>    <reading date="2026-09-02" unit="%">31.8</reading>    <reading date="2026-09-03" unit="%">30.9</reading>    <reading date="2026-09-04" unit="%">34.6</reading>    <reading date="2026-09-05" unit="%">33.9</reading>    <reading date="2026-09-06" unit="%">33.2</reading>    <reading date="2026-09-07" unit="%">32.4</reading>  </logger></export>

Sync logplain text

05:30:02  Bore 12     Connected over LTE-M, signal -87 dBm05:30:04  Bore 12     Uploaded 96 readings at a 15-minute interval05:30:05  Bore 12     Battery 3.62 V, charging from solar05:31:10  Tank 3      No response, retry 1 of 3 in 60 s05:32:10  Tank 3      Connected over LTE-M, signal -101 dBm05:32:13  Tank 3      Uploaded 12 readings05:32:14  North Pump  Alarm “Tank low” raised: 17.8 % is under the 20 % threshold05:32:15  North Pump  Webhook POST https://hooks.example.com/wildeye/alarms returned 422 Unprocessable Entity after 1.2 s

Plain text is never highlighted, so no log line outranks the next.

Single line

For one value someone will paste elsewhere.

Endpoint

https://hooks.example.com/wildeye/alarms

API key

••••••••••••7c2e hidden, ending 7c2e

Masked shows any prefix and the last four characters. Copy takes the whole value.

Long content

Responsejson

{  "serial": "WE-10442",  "name": "Bore 12",  "site": {    "id": "site_2291",    "name": "Emu Park"  },  "firmware": "4.2.1",  "online": true,  "battery_v": 3.62,  "signal_dbm": -87,  "interval_min": 15,  "last_seen": "2026-09-28T05:30:02+13:00",  "channels": [    {      "id": "soil_moisture_10cm",      "unit": "%",      "value": 34.2    },    {      "id": "soil_moisture_30cm",      "unit": "%",      "value": 31.4    },    {      "id": "soil_moisture_60cm",      "unit": "%",      "value": 28.9    },    {      "id": "line_pressure",      "unit": "kPa",      "value": 212.5    }  ],  "alarms": {    "active": 0,    "acknowledged": 1  },  "reseller": null}

“Show all 41 lines” says how long the block is.

Sync logplain text

05:30:02  Bore 12     Connected over LTE-M, signal -87 dBm05:30:04  Bore 12     Uploaded 96 readings at a 15-minute interval05:30:05  Bore 12     Battery 3.62 V, charging from solar05:31:10  Tank 3      No response, retry 1 of 3 in 60 s05:32:10  Tank 3      Connected over LTE-M, signal -101 dBm05:32:13  Tank 3      Uploaded 12 readings05:32:14  North Pump  Alarm “Tank low” raised: 17.8 % is under the 20 % threshold05:32:15  North Pump  Webhook POST https://hooks.example.com/wildeye/alarms returned 422 Unprocessable Entity after 1.2 s

wrapped

Sync logplain text

05:30:02  Bore 12     Connected over LTE-M, signal -87 dBm05:30:04  Bore 12     Uploaded 96 readings at a 15-minute interval05:30:05  Bore 12     Battery 3.62 V, charging from solar05:31:10  Tank 3      No response, retry 1 of 3 in 60 s05:32:10  Tank 3      Connected over LTE-M, signal -101 dBm05:32:13  Tank 3      Uploaded 12 readings05:32:14  North Pump  Alarm “Tank low” raised: 17.8 % is under the 20 % threshold05:32:15  North Pump  Webhook POST https://hooks.example.com/wildeye/alarms returned 422 Unprocessable Entity after 1.2 s

scrolling

Wrapped lines continue two characters in. Unwrapped, line numbers stay pinned.

States

Responsejson

No response yetThe body appears here after the first delivery.

empty

Request bodyjson

{  "id": "alm_7731",  "name": "Tank low",  "severity": "high",  "threshold": 20,  "value": 17.8,  "unit": "%"}

error line

Empty keeps its header and disables Copy. An error line takes a red tint and bar.

In context

Delivery failed422

Tank low · North Pump · 28 Sep 2026, 05:42 · attempt 2

Request bodyjson

{  "event": "alarm.triggered",  "id": "evt_01J8Z6Q4M2WQ",  "occurred_at": "2026-09-28T05:42:17+13:00",  "alarm": {    "id": "alm_7731",    "name": "Tank low",    "severity": "high",    "threshold": 20,    "value": 17.8,    "unit": "%"  },  "site": {    "id": "site_3107",    "name": "North Pump"  },  "logger": {    "serial": "WE-10877",    "name": "Tank 3"  },  "acknowledged": false,  "acknowledged_by": null}

Responsejson422

{  "error": "invalid_payload",  "field": "alarm.value",  "message": "Expected an integer, got 17.8",  "request_id": "req_5KX2P9"}

The 422 names alarm.value and the body marks that line. Retry swaps the response to 200.

API access

Credentials for your integrations.

API key

••••••••••••7c2e hidden, ending 7c2e

Webhook password

••••••••••••yH1d hidden, ending yH1d

Accessibility

Copy announces “Copied to clipboard”. A masked key reads as “hidden, ending 7c2e”.

Key	What it does
Tab	Wrap, Copy, the code if it scrolls, then Show all.
Enter / Space	Runs the focused button. Copy then reads Copied.
Arrow keys	Scroll the focused code.
Ctrl / ⌘ + A	Selects only the code.
Ctrl / ⌘ + C	Copies the block when nothing is selected.
Escape	Hides a tooltip.

Props

Prop	Type	Default	Description
code	string \| object \| array \| null	—	Objects and arrays print as JSON.
language	'json' \| 'xml' \| 'text'	'text'	Picks the highlighter.
title	string	—	Names the block.
aria-label	string	—	Names the block when there is no title.
#meta	slot	—	A badge beside the title.
show-line-numbers	boolean	false	Pinned gutter, never copied.
highlight-lines	number[]	—	Lines to mark, from 1.
highlight-tone	'accent' \| 'error'	'accent'	Blue or red mark.
max-height	number \| null	400	Scrolls past this height.
collapsible	boolean	false	Collapses above the threshold.
initially-collapsed	boolean	true	Ignored if a marked line would hide.
collapse-threshold	number	10	Lines shown while collapsed.
v-model:wrap	boolean	false	Wraps long lines, keeping indent.
wrap-toggle	boolean	true	Shows the wrap button.
copyable	boolean	true	Shows Copy.
variant	'block' \| 'inline'	'block'	Inline is one line.
masked	boolean	false	Inline only. Shows any prefix and last four.
reveal-label	string	'Show value'	Inline only. Names the reveal toggle.
empty-text	string	'Nothing to show yet'	Empty state title.
empty-description	string	—	Empty state detail.
@copy	(text) => void	—	Fires with the copied text.

Tokens

Token	Value	Where it lands
--global-neutral-grey-200	#F5F5F5	The well.
--global-neutral-grey-500	#E6E6E6	Outline.
--global-neutral-grey-400	#ECECED	Header and footer rules.
--global-neutral-grey-1300	#0A090B	Keys, plain text.
--global-blue-1100	#0C296A	Strings, hovered footer label.
--global-violet-800	#6E23C9	Numbers, XML attributes.
--global-purple-900	#7B238D	Literals, XML tags.
--global-neutral-grey-1000	#4F4D55	Punctuation, comments, line numbers.
--global-blue-1000	#1877F2	Focus, footer label, highlight bar.
--global-blue-100	#EBFAFF	Highlighted line, pressed toggle, footer hover.
--global-blue-200	#D6F4FF	Text selection.
--global-red-100	#FEEBEB	Error line tint.
--global-red-800	#E12121	Error line bar.
--radius-lg	8px	Corners.
--font-family-mono	JetBrains Mono	Code, 13/20.