CodeBlock

A code block with a header (the title, or the language), a copy button, optional line numbers and optional collapsing. Without highlighter the code is plain text; pass any function that returns token lines, or adapt a shiki instance you created with createShikiHighlighter, which uses a light and a dark theme so colors follow the color scheme. Results are cached, and async highlighters render plain text until tokens arrive. collapsedLines hides the rest behind Show N more lines only when at least 5 lines would be hidden; streaming pauses collapsing so new lines stay visible. Long lines scroll horizontally, or wrap with wrapLines, which reads better in narrow widgets. Markdown uses CodeBlock for fenced code, and AgentChat passes its highlighter prop down. Related helpers: countCodeLines, getCollapsedLineCount, highlightCode, useHighlightedLines, clearHighlightCache.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
Line numbers and collapsing
Narrow: scroll or wrap
API reference
Prop
Type
Required
code
string
Yes
Source code
language
string
No
Language passed to the highlighter and shown in the header, `text` by default
title
React.ReactNode
No
Header text shown instead of the language, for example a file name
highlighter
SyntaxHighlighter
No
Syntax highlighter, the code stays plain when omitted or when it returns `null`
withLineNumbers
boolean
No
Shows line numbers
startLineNumber
number
No
Number of the first line, `1` by default
wrapLines
boolean
No
Wraps long lines instead of scrolling horizontally, `false` by default
withCopy
boolean
No
Shows the copy button, `true` by default
collapsedLines
number | false
No
Collapses long code behind "Show N more lines" after this many lines, `false` by default
streaming
boolean
No
Code is still arriving: highlighting and collapsing wait until it is complete
labels
Partial<CodeBlockLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element