The example below loads live from Storybook; you can open the controls there.
With a title
Section titled “With a title”title shows a file name or short title and names the scroll region; language writes the language in the header. lineNumbers adds line numbers.
Highlighted lines
Section titled “Highlighted lines”highlightLines marks the given lines with the selected surface colour.
Without a header
Section titled “Without a header”Without a header, the copy button sits in the top end corner.
Line wrapping
Section titled “Line wrapping”wrap breaks long lines instead of scrolling sideways. Use it for command lines.
Light and dark mode
Section titled “Light and dark mode”CodeBlock takes its colours from the surface and text tokens; neither mode needs extra setup.