THEME
MOTION
HAPTIC
SOUND
CODEBLOCK
Multi-line code sample with optional language label and copy button. Pass `html` for pre-highlighted code (Shiki/Highlight.js).
Live demo
Import
import { CodeBlock } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
code | string | — | — | Plain-text code. Ignored when `html` is passed. |
html | string | — | — | Pre-rendered highlighted HTML. |
language | string | — | — | |
showCopy | boolean | true | — | |
maxHeight | number | — | — |
Examples
ts
<CodeBlock language="ts" code={"const x = 1;"} />Accessibility
Role: region
- pre is focusable (tabindex=0) for keyboard scroll
Feedback
| Haptic | none |
| Sound | none |