Code Box

Display code snippets with syntax highlighting, line numbers, and copy functionality.

Basic Usage

fibonacci.tstypescript

function fibonacci(n: number): number {
	if (n <= 1) return n
	return fibonacci(n - 1) + fibonacci(n - 2)
}

// Example usage
console.log(fibonacci(10)) // 55

Snippet

import { CodeBox } from '@creo-team/buzz-ui/client'

const code = `function fibonacci(n: number): number {
	if (n <= 1) return n
	return fibonacci(n - 1) + fibonacci(n - 2)
}`

export default function Example() {
	return <CodeBox code={code} language="typescript" label="fibonacci.ts" />
}

With Line Numbers

fibonacci.tstypescript

1function fibonacci(n: number): number {
2	if (n <= 1) return n
3	return fibonacci(n - 1) + fibonacci(n - 2)
4}
5
6// Example usage
7console.log(fibonacci(10)) // 55

Snippet

<CodeBox 
	code={code} 
	language="typescript" 
	label="fibonacci.ts" 
	showLineNumbers
/>

Different Languages

index.htmlhtml

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>Hello World</h1>
</body>
</html>

styles.csscss

.container {
	display: flex
	flex-direction: column
	gap: 1rem
	padding: 2rem
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}

Snippet

<CodeBox code={htmlCode} language="html" label="index.html" />
<CodeBox code={cssCode} language="css" label="styles.css" />

Without Copy Button

secret.jsjavascript

const secretKey = 'do-not-copy-this'

Snippet

<CodeBox 
	code="const secretKey = 'do-not-copy-this'" 
	language="javascript" 
	label="secret.js"
	copyable={false}
/>

Without Label

console.log('Hello, World!')

Snippet

<CodeBox 
	code="console.log('Hello, World!')" 
	language="javascript"
	label=""
/>

API Reference

Prop	Type	Default	Description
`code`*	`string`	—	The code to display
`language`	`string`	`'typescript'`	Programming language for syntax highlighting
`label`	`string`	`'Code'`	Label/filename to display above the code
`showLineNumbers`	`boolean`	`false`	Whether to show line numbers
`copyable`	`boolean`	`true`	Whether to show the copy button
`className`	`string`	—	Additional CSS classes