CodeBlock

CodeBlock supplies the panel chrome, not syntax highlighting. Bring markup from your highlighter, then decide whether people need line numbers or a copy action for the snippet.

Examples

Language and copying

copyLabel and copiedLabel enable the copy button together. The success label is also announced politely, so do not use colour alone to confirm the action.

tsx

export function greet(name: string) {
  return `Hello, ${name}`;
}

Line-number contract

Line numbers count child elements with the line class. Shiki and rehype-pretty-code emit this shape; another highlighter needs to emit it too.

css

.notice {\n color: rebeccapurple;\n}

Copying a canonical value

copyText can differ from the rendered code. Without it, the button copies the rendered text of the <pre>, which is usually the value people expect to paste.

shell

$ pnpm add @lyra-ds/react @lyra-ds/styles

When to use

Use CodeBlock when your product needs a readable, copyable code sample and you already own the highlighting step. Its job is a stable frame around that markup, not choosing a language grammar.

Reach for something else when:

The content is a short inline token — use code, not a panel with its own scroll region.
People must edit the value — use Textarea; a code panel does not expose an editing model.

Accessibility

The copy control is a native button. Provide both copyLabel and copiedLabel so it has a name and a successful copy is announced through its polite status message.
The <pre> keeps native preformatted semantics and has a Tab stop. Once focused, people can scroll overflowing code with the keyboard instead of needing a mouse.
Line numbers are generated with CSS counters from .line elements. Keep them decorative; the code's text, not its visual numbering, is what assistive technology needs to read.
CodeBlock does not highlight or sanitize markup. Your highlighter and any untrusted source remain your responsibility.

Props

Name	Type	Required	Description
`language`	`string`	—	Optional language badge shown in the code panel bar.
`lineNumbers`	`boolean`	—	Draw line numbers beside descendants whose class list includes `line`.
`copyLabel`	`ReactNode`	—	Translated visible label for the copy button. Omit with `copiedLabel` to hide copying.
`copiedLabel`	`ReactNode`	—	Translated visible label and polite announcement shown after a successful copy.
`copyText`	`string`	—	Text copied instead of the rendered text content of this code block's `<pre>`.

Plain HTML

The panel expects your highlighter's markup inside the <pre>. Add line to each line only when you enable the line-number modifier:

html

<div class="lyra-code lyra-code--line-numbers">
  <div class="lyra-code__bar">
    <span class="lyra-code__lang">css</span>
    <button class="lyra-code__copy" type="button">Copy</button>
  </div>
  <pre class="lyra-code__pre" tabindex="0"><code><span class="line">.notice {</span>
<span class="line">  color: rebeccapurple;</span>
<span class="line">}</span></code></pre>
  <span class="lyra-code__status" role="status" aria-live="polite"></span>
</div>