Skip to main content Guide Components Icons Utilities Layouts
Button Call to Action Theme Toggle Checkbox Combobox File Input Input Group Radio Input Range Select Input Switch Text Input Textarea Avatar Billboard Icon Breadcrumbs Header Pagination Series Nav Sidenav Subnav Tabs Table of Contents Dialog Disclosure Dropdown Menu Accordion Alert Badge Calendar Tile Callout Card Code Block CTA Band Datum Empty State Footer Grid Hero Link Hub List Loading Indicator Prose Quote Record List Sponsor Stat Step Indicator Table Timeline

Code Block

<vox-code-block> is a syntax-highlighted code block with a copy button. Highlighting is built in — no Prism, highlight.js, or Shiki to set up.

It recognizes bash/sh/shell/zsh, yaml/yml, json, javascript/js, typescript/ts, css, html/xml, ruby/rb, and puppet/pp. Any other (or omitted) language renders as plain, unhighlighted text.

class profile::base ( String $version = '1.0', ) { package { 'openssl': ensure => installed, } file { '/etc/motd': ensure => file, content => "Managed by Puppet ${version}", } }
<vox-code-block language="puppet" filename="profile/base.pp"> class profile::base ( String $version = '1.0', ) { package { 'openssl': ensure => installed, } } </vox-code-block>

The code is the element’s default slot content, taken as plain text — escape < and & the way you would inside any <code> block. A shared leading indent (from formatting the HTML source itself) is stripped automatically, so the snippet renders flush left regardless of how it’s indented in your markup.

Line numbers

Add line-numbers for a numbered gutter — useful when prose elsewhere on the page refers to “line 3.”

Facter.add(:os_release) do setcode do if File.exist?('/etc/os-release') File.read('/etc/os-release') end end end
<vox-code-block language="ruby" line-numbers> Facter.add(:os_release) do setcode { File.read('/etc/os-release') } end </vox-code-block>

Without a copy button

echo "read-only example output"
<vox-code-block language="bash" no-copy> echo "read-only example output" </vox-code-block>

Without a header or border

Add no-header to drop the whole header bar — filename, language label, and copy button — and no-border to drop the outer edge too, for dense contexts like a table cell, where a full header and border per row would take up more space than the code itself.

{ "version": "1.14.1" }
<vox-code-block language="json" no-header no-border> { "version": "1.14.1" } </vox-code-block>
FactValue
clientversion 8.28.1
augeas { "version": "1.14.1" }

Right-to-left pages

The listing always renders left-to-right, even under dir="rtl", because source code reads left-to-right regardless of the surrounding language. Letting the bidi algorithm reorder leading indentation, operators and bracket pairs would make the code unreadable and, worse, misleading.

That exemption covers the code and its line-number gutter, which stays on the left with the code it numbers. The header around it — filename, language label and copy button — mirrors with the page as normal. Nothing to configure; see Internationalization.

API

Attribute Type Default Description
language string '' One of the recognized language ids above, or any other string to label the block without highlighting it
filename string '' Shown at the start of the header, e.g. profile/base.pp
line-numbers boolean false Adds a numbered gutter
no-copy boolean false Hides the copy-to-clipboard button
no-header boolean false Hides the whole header bar, including the copy button
no-border boolean false Drops the outer border (the background surface stays)
copy-label string Copy code Accessible name for the copy button
copied-label string Copied Accessible name for the copy button after copying
copied-message string Copied to clipboard Announced in the live region after copying

The copy button copies the raw, un-highlighted code via the Clipboard API (falling back to execCommand where unavailable) and announces success to screen readers through a live region. The block itself is keyboard-scrollable (tabindex="0") when its content overflows horizontally.