Code Block

API and Development

Import CodeBlock from @prepared911/ui/code-block.

Prop	Type	Default	Notes
`code`	`string`	required	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`	—	Classes appended after the generated classes. Put overrides in `@layer chroma.overrides`.
`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.

On this page