CodeBlock

CodeBlock is the base fenced-code surface from smithers-orchestrator/ui. It uses the shared --code-bg and --code-text theme tokens and does not ship a syntax-highlighting dependency.

import { CodeBlock } from "smithers-orchestrator/ui";

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

The copy button uses onCopyCode when provided and otherwise falls back to navigator.clipboard. It is hidden when neither path is available. A highlighter returns readonly lines of { text, color? } tokens; 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`	Enables 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.

Start

Articles

Learn

Build Workflows

Run and Operate

Workflow Pack

Components

Integrations

Agent Support

Examples

Contributing

Props

​Props

Props