# CodeBlock

> A titled code card for documentation: the file it belongs to (with an icon for its kind) or "Terminal", highlighted, added and removed lines, optional line numbers, and a copy button that copies what a reader should paste — no `$` prompts, no output lines.

```ts
import { CodeBlock } from "@sdxc/ui/docs";
```

Renders the card: a header naming the file (or the language) with the copy button, and
the code, which scrolls sideways inside the card. Marked lines tint across the full
scroll width with a 2px bar whose width comes out of the line's padding, so no text moves.

## Examples

```tsx
<CodeBlock title="vite.config.ts" language="ts" code={source} highlight={[4, 5]} labels={{ copy: t("copy"), copied: t("copied") }} />
```

```tsx
<CodeBlock title="Terminal" language="sh" code={"$ npm add @sdxc/ui\n$ npm run dev"} labels={labels} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `code` | `string` | The source as written; a single trailing newline is dropped. |
| `language?` | `string` | Language the code highlights as, named the way a fence names it (`ts`, `sh`). |
| `tokens?` | `readonly Token[]` | Runs already painted for `code`, which skip highlighting here. |
| `title?` | `string` | What the header reads as: a file path draws an icon for its kind, and anything else (such as "Terminal") reads as written. Without one the header names the language, and a block with neither floats its copy button over the code. |
| `highlight?` | `readonly number[]` |  |
| `add?` | `readonly number[]` |  |
| `remove?` | `readonly number[]` | Lines a diff removes; they stay on screen and stay off the clipboard. |
| `lineNumbers?` | `boolean` | Numbers each line in a gutter, for long listings prose refers to by line. |
| `labels` | `Labels` |  |
| `codeId?` | `string` | The `id` of the `<code>` element the copy button targets. Defaults to one derived from the code, which stays the same on every render of the same block. |

Also accepts everything in `Omit<TagProps<"figure">, "title" | "children">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Mark` | `"highlight" \| "add" \| "remove"` | How a line is marked: a changed line to look at, or a line a diff adds or removes. |