The source. Line breaks may be \n, \r\n or \r; the block uses \n
language
string
tsx, json, bash, an alias, or a language-* class. Names the block and picks the grammar
label
LocalizedMessage
required
Accessible name of the figure and of its scroll area
showCopy
true | false
true
false removes the copy control and the three labels below
copyLabel
LocalizedMessage
required with the copy control
Name of the control at rest, and its tooltip
copiedLabel
LocalizedMessage
required with the copy control
Name once the code is on the clipboard; announced
copyErrorLabel
LocalizedMessage
required with the copy control
Name when the clipboard refused; announced
className
string
Appended after the generated classes
The props are a union on showCopy: the three labels are required unless showCopy is false, and they are rejected when it is.
Exports
CodeBlock and the types CodeBlockProps, CodeBlockWithCopyProps and CodeBlockWithoutCopyProps.
Dependencies
shiki 3.6.0, loaded only through dynamic import(). See packages/ui/docs/decisions/0008-package-build.md.
Props
Name
Type
Default
Description
code
string
—
The source code to show. Data, not copy, so it is a plain string.
label
LocalizedMessage
—
Accessible name of the code region and its scroll area, for example "Code".
className
string
—
@deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern.
copiedLabel
LocalizedMessage
—
Name of the copy control once the code is on the clipboard. Announced when it appears.
Absent without a copy control.
copyErrorLabel
LocalizedMessage
—
Name of the copy control when the clipboard refused the code. Announced when it appears.
Absent without a copy control.
copyLabel
LocalizedMessage
—
Accessible name of the copy control at rest.
Absent without a copy control.
language
string
—
Language of the code, such as tsx, json or bash. It names the block in its header and picks the grammar that
highlights it. A language- prefix is accepted. A language the highlighter does not carry, or none, leaves the code
plain.
showCopy
boolean
true
Shows the copy control.
Hides the copy control.
Storybook
Interactive examples and edge cases for this component are in Storybook.