Code block

CodeBlock is a component that displays code with syntax highlighting and optional line numbers, copy functionality, and line wrapping. It’s perfect for documentation, tutorials, and code examples.

Example

SELECT *
FROM table
WHERE condition = true
ORDER BY column ASC

1SELECT *
2FROM table
3WHERE condition = true

Props

Prop	Type	Default value	Description
Prop language	Type string	Default value "text"	Description Programming language for syntax highlighting (e.g., "javascript", "typescript", "sql", "bash")
Prop children	Type string	Default value undefined	Description Code content to display in the code block
Prop theme	Type "light" \| "dark"	Default value "light"	Description Color theme for syntax highlighting
Prop showLineNumbers	Type boolean	Default value false	Description Whether to display line numbers on the left side of the code
Prop showWrapButton	Type boolean	Default value false	Description Whether to show a button to toggle line wrapping
Prop wrapLines	Type boolean	Default value false	Description Whether long lines should wrap instead of creating horizontal scroll
Prop ariaLabel	Type string	Default value undefined	Description Accessible name for the scrollable code region. Defaults to the language plus "code block", or "Code block" when no language is set. Override to localise it or distinguish several blocks on a page.
Prop onCopy	Type (value: string) => void \| Promise<void>	Default value undefined	Description Callback function called when code is successfully copied to clipboard. Receives the copied text.
Prop onCopyError	Type (error: string) => void \| Promise<void>	Default value undefined	Description Callback function called when copy operation fails. Receives the error message.

Quick start

import { CodeBlock } from '@clickhouse/click-ui'

function MyCodeBlock() {
return (
  <CodeBlock
    language="sql"
    children={`SELECT *
FROM users
WHERE active = true`}
  />
)
}

Text: For displaying code-related text content.
Panel: Often used to contain code blocks.
Container: For organizing multiple code blocks.

Common use cases

Code example

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

greet('World')

import { CodeBlock } from '@clickhouse/click-ui'

function CodeExample() {
return (
  <CodeBlock
    language="typescript"
    children={`function greet(name: string) {
return `Hello, ${name}!`
}`}
  />
)
}

Syntax highlighting

SELECT * FROM users

#!/bin/bash
echo "Hello World"

{"key": "value"}

import { CodeBlock, Container } from '@clickhouse/click-ui'

function SyntaxHighlighting() {
return (
  <Container orientation='vertical' gap='md'>
    <CodeBlock language="sql" children={`SELECT * FROM users`} />
    <CodeBlock language="bash" children={`echo "Hello"`} />
    <CodeBlock language="json" children={`{"key": "value"}`} />
  </Container>
)
}

With line numbers

1SELECT 
2  id,
3  name,
4  email
5FROM users
6WHERE active = true
7ORDER BY name ASC

import { CodeBlock } from '@clickhouse/click-ui'

function CodeBlockWithLineNumbers() {
return (
  <CodeBlock
    language="sql"
    showLineNumbers
    children={`SELECT * FROM users`}
  />
)
}

Big stat Progress bar

Code block

Example

Props

Quick start

Related components

Common use cases

Code example

Syntax highlighting

With line numbers