CodeBlock – Once UI

The CodeBlock component provides a way to display code snippets with syntax highlighting, interactive tabs for multiple code examples, and optional live previews. It supports various customization options including copy buttons, fullscreen mode, and line numbers.

CodeBlock

Click me

<CodeBlock
  copyButton
  preview={
    <Button size="s" weight="default" prefixIcon="sparkle">
      Click me
    </Button>
  }
  codes={[
    {
      language: "javascript",
      label: "Example",
      code: "const greeting = 'Hello, world!';"
    }
  ]}
/>

Preview

<CodeBlock
	copyButton
	previewPadding="0"
	preview={
		<Row fillWidth center padding="16">
			<Background
				background="neutral-alpha-weak"
				lines={{display: true, color: "neutral-alpha-weak"}}
				shadow="m"
				fillWidth
				radius="m"
				height={12}
				border="neutral-alpha-medium"
			/>
		</Row>
	}
	codes={[
		{
			language: "tsx",
			label: "Preview",
			code: "..."
		}
	]}
/>

Multiple code

The CodeBlock can display multiple code examples with tabs for easy navigation.

Multiple code

// JavaScript
const button = document.createElement('button');
button.textContent = 'Example Button';
button.classList.add('secondary');
document.body.appendChild(button);

<CodeBlock
  copyButton={false}
  codes={[
    {
      language: "javascript",
      label: "JavaScript",
      code:
"// JavaScript
const button = document.createElement('button');
button.textContent = 'Example Button';
button.classList.add('secondary');
document.body.appendChild(button);",
    },
    {
      language: "html",
      label: "HTML",
      code:
"<!-- HTML -->
<button class="secondary">
  Example Button
</button>"
  },
  {
      language: "css",
      label: "CSS",
      code:
"/* CSS */
button.secondary {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 16px;
}"
    }
  ]}
/>

Compact mode

Use the compact prop for a more condensed display.

Compact

console.log('Compact mode example');

<CodeBlock
	compact
	copyButton={false}
	codes={[
		{
			code: "console.log('Compact mode example');",
			language: "javascript",
			label: "Compact"
		}
	]}
/>

Line numbers

Use the lineNumbers prop to display line numbers for better code readability and reference.

Line numbers

function greet() {
	console.log('Hello!')
	return 'Greeting sent'
}

<CodeBlock
	lineNumbers
	compact
	codes={[
  {
    language: "tsx",
    label: "Line numbers",
    code:
"function greet() {
	console.log('Hello!')
	return 'Greeting sent'
}"
  }
]}
/>

Highlight

Use the highlight prop to highlight specific lines of code. The value should be a string with line numbers or ranges (e.g., "1,3-5").

Highlight

<CodeBlock
	codes={[
		{
			language: "tsx",
			highlight: "2,4-6",
			label: "Highlight",
			code:
"function calculateTotal(items) {
let total = 0;

for (let i = 0; i < items.length; i++) {
	const item = items[i];
	total += item.price * item.quantity;
}

return total;
}"
		}
	]}
/>

Code Diff

Display Git-style diffs by setting the language to "diff". Numbering can be used from coordinates, also specified manually by setting the startLineNumber parameter. Numbering prioritizes as follows: coordinates > startLineNumber > 0 (fallback)

Code Diff

Diff

<CodeBlock
codes={[
  {
    language: "diff",
    label: "Diff",
    startLineNumber: 1,
    code:
"diff --git a/src/utils/math.ts b/src/utils/math.ts
index 1a2b3c4..5d6e7f8 100644
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -10,7 +10,10 @@
 export function add(a: number, b: number): number {
  return a + b;
}

-export function multiply(a: number, b: number): number {
-  return a * b;
-}
+export function multiply(a: number, b: number): number {
+  if (a === 0 || b === 0) {
+    return 0;
+  }
+  return a * b;
+}

 export function subtract(a: number, b: number): number {
  return a - b;
}",
  }
]}
/>

You can enable syntax highlighting by specifying a similar array as the language parameter: [ “diff”, “typescript” ]

Code Diff

Diff

<CodeBlock
codes={[
  {
    language:  [ "diff", "typescript" ],
    label: "Diff",
    startLineNumber: 1,
    code:
"diff --git a/src/utils/math.ts b/src/utils/math.ts
index 1a2b3c4..5d6e7f8 100644
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -10,7 +10,10 @@
 export function add(a: number, b: number): number {
  return a + b;
}

-export function multiply(a: number, b: number): number {
-  return a * b;
-}
+export function multiply(a: number, b: number): number {
+  if (a === 0 || b === 0) {
+    return 0;
+  }
+  return a * b;
+}

 export function subtract(a: number, b: number): number {
  return a - b;
}",
  }
]}
/>

Extras

The CodeBlock component supports additional features like fullscreen mode and style customization.

Extras

<CodeBlock
	fullscreenButton
	styleButton
	reloadButton
	codes={[
		{
			language: "javascript",
			label: "Extras",
			code:
"const data = fetchData();
console.log('Processing data...');
renderResults(data);"
		}
	]}
/>

Collapsible

Use maxLines to limit code height and show a "View code" overlay for expandable code blocks. isCollapsible must be enabled for the overlay to appear.

Collapsible

function greet(name: string) {
  return `Hello, ${name}!`;
}

function farewell(name: string) {
  return `Goodbye, ${name}!`;
}

const result = greet('World');
console.log(result);

<CodeBlock
  isCollapsible
  maxLines={3}
  codes={[
    {
      language: "tsx",
      label: "Collapsible",
      code: "function greet(name) {
  return `Hello, ${name}!`;
}"
    }
  ]}
/>

Custom background

Use the background prop to change the CodeBlock's outer background. Combine with alpha tokens for transparency effects.

Custom background

<CodeBlock
  background="brand-alpha-weak"
  codes={[
    {
      language: "tsx",
      label: "Custom background",
      code: "console.log('Styled code block');"
    }
  ]}
/>

Custom colors

Pass any color via style.backgroundColor — the button wrappers automatically pick it up.

Magenta (50%)

<CodeBlock
  style={{ backgroundColor: "rgba(255, 0, 128, 0.2)" }}
  codes={[
    {
      language: "tsx",
      label: "Magenta",
      code: "console.log('magenta');"
    }
  ]}
/>

Pink (50%)

<CodeBlock
  style={{ backgroundColor: "rgba(255, 192, 203, 0.2)" }}
  codes={[
    {
      language: "tsx",
      label: "Pink",
      code: "console.log('pink');"
    }
  ]}
/>

Cyan (50%)

<CodeBlock
  style={{ backgroundColor: "rgba(0, 188, 212, 0.2)" }}
  codes={[
    {
      language: "tsx",
      label: "Cyan",
      code: "console.log('cyan');"
    }
  ]}
/>

API reference

Prop	Type	Default
codes	CodeInstance[]	[]
preview	ReactNode	—
copyButton	boolean	true
styleButton	boolean	false
reloadButton	boolean	false
fullscreenButton	boolean	false
compact	boolean	false
isCollapsible	boolean	false
lineNumbers	boolean	false
codeHeight	number	—
maxLines	number	—
fillHeight	boolean	false
previewPadding	SpacingToken	'l'
background	Colors \| 'surface' \| 'overlay' \| 'page' \| 'transparent'	'surface'
onInstanceChange	(index: number) => void	—
hideCode Render only the preview, without the code panel.	boolean	false
…and every FlexProps prop	inherited	—

Prop	Type	Default
code	string{ content: string; error: string \| null }	—
language	Language[ "diff" , Language ]	—
label	string	—
highlight	string	—
prefixIcon	string	—
startLineNumber	number	0