> ## Documentation Index
> Fetch the complete documentation index at: https://smithers.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# CodeBlock

> Render token-themed code with copy, wrapping, line numbers, and a highlighter seam.

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

```tsx theme={"theme":{"light":"github-light","dark":"github-dark"}}
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, 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.          |