CodeBlock

CodeBlock, the base fenced-code surface from smthrs/ui, uses the shared --code-bg and --code-text theme tokens and ships no syntax-highlighting dependency.

import { CodeBlock } from "smthrs/ui";

<CodeBlock
  code={source}
  language="typescript"
  showLineNumbers
  onCopyCode={(code) => copyThroughYourHost(code)}
  highlight={(code, language) => tokenAdapter(code, language)}
/>

The copy button uses onCopyCode when provided, else falls back to navigator.clipboard, and hides when neither is available. A highlighter returns readonly { text, color? } token lines; returning null or throwing renders escaped plain text.

Props

Prop	Type	Default	Description
`code`	`string`	required	Source text to render and copy.
`language`	`string`	none	Optional language label and adapter input.
`showLineNumbers`	`boolean`	`false`	Adds an `aria-hidden` line-number gutter.
`wrap`, `defaultWrap`, `onWrapChange`	controlled trio	`false`	Controls line wrapping.
`showCopy`	`boolean`	`true`	Shows the copy affordance when a copy path exists.
`onCopyCode`	`(code: string) => void`	clipboard fallback	Host-owned copy seam.
`copiedDurationMs`	`number`	`2000`	How long the copied state remains visible.
`highlight`	`CodeBlockHighlighter`	none	Converts source into colored token lines.

Overview

Core API

Runtime

Types & errors

Gateway RPC

Props

​Props

Props