Code Block

Display syntax-highlighted code snippets using Shiki.

Shiki Reference Themes

Examples

File Title

Use CodeBlockTitle to display a filename header on the code block

@chatcn/codeblock-title

Code Block Basics

@chatcn/codeblock

Line Selection Highlight

Use highlight property for the line-selection highlight

@chatcn/codeblock-selection

Installation

pnpm dlx shadcn@latest add https://chatcn.me/c/codeblock

Show Line Numbers

To show line numbers in your code block, add the following styles to your global.css:

code {
counter-reset: step;
counter-increment: step 0;
margin: 0;
width: 100%;
}

code .line::before {
content: counter(step);
counter-increment: step;
width: 1rem;
margin-right: 1.5rem;
display: inline-block;
text-align: right;
color: gray;
}

Props

CodeBlock

Prop	Type	Default	Description
`children`	`string` or `ReactNode`	-	Code content (string) or compound components like CodeBlockTitle
`code`	`string`	-	The code content to display (use this when using compound children)
`lang`	`BundledLanguage`	-	Programming language for syntax highlighting (e.g., tsx, css, python)
`height`	`string`	`"600"`	Maximum height of the code block in pixels
`className`	`string`	-	Additional CSS classes to apply
`highlight`	`object`	-	Line range to highlight (start and end properties)
`theme`	`string`	`"github-dark-default"`	Shiki theme name for syntax highlighting

CodeBlockTitle

Prop	Type	Default	Description
`children`	`string`	-	The filename to display
`lang`	`string`	-	Devicon language name for file icon (e.g., typescript, python, rust)
`className`	`string`	-	Additional CSS classes to apply

Search Documentation