# Code

- Page: <https://kznlabs.github.io/labsUI/components/code>

## Code (`code`, component)

Shiki-highlighted code that follows light and dark through light-dark() token colors, as a block, an inline one-liner or a tabbed file panel. Line numbers (from any start line), tinted lines with an accent bar, <mark>ed words or column ranges, and per-line notes in a tooltip that keyboard users can tab to. Optional Prettier at display time; copy hands out exactly what is shown.

- Install: `npx @kznlabs/labsui add code`
- Docs: <https://kznlabs.github.io/labsUI/components/code>
- Brings: button, button-variants, highlight, list, overflow-focus, platform, tabs, tooltip, use-anchor, use-controllable-state, use-dismiss, use-hover-open, use-indicator, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, prettier@^3.9.10, shiki@^4.5.0, tailwind-merge@^3.7.0

### API

- `<CopyButton>`: Ghost "Copy" button that turns into "Copied" in place. Shared with Terminal.
  - `code: string`: Text written to the clipboard.
  - `label?: string` = `"Copy code"`: Accessible name of the button.
- `<Code>`: Syntax-highlighted code with light/dark themes, line annotations and an in-place copy button.
  - `code: string`: Source to highlight.
  - `format?: boolean`: Run Prettier (default options) before highlighting; copy gets the formatted code too. Line
numbers in `highlight`, `marks` and `notes` refer to the formatted code.
  - `highlight?: LineRange[]`: Lines to tint, with a primary bar on the left.
  - `language?: string` = `"tsx"`: Shiki language id, e.g. "tsx", "bash", "json".
  - `lineNumbers?: number | boolean`: Gutter numbers; a number sets the first line's number (for excerpts).
  - `marks?: CodeMark[]`: Words or ranges inside lines, wrapped in <mark>.
  - `notes?: Record<number, ReactNode>`: Hover/focus note per line number: `{ 4: "Remember to add it to the registry" }`.
  - `tokens?: CodeToken[][]`: Lines from `highlightCode(code, language)`, made on the server or at build time: the code
renders highlighted from the first paint and Shiki never loads. Ignored with `format`.
  - `variant?: "block" | "inline"` = `"block"`: "block": header with language and copy. "inline": one line with a copy button.
- `<CodePanel>`: File panel: one tab per file, copy for the active one. Every file stays in the DOM.
  - `files: CodeFile[]`: One tab per file, each with its own annotations. Switching animates the body.
  - `collapse?: number`: Fold files longer than this many lines (by at least 5) behind a "Show all" button. The body
never scrolls vertically, so the wheel and touch keep scrolling the page.
  - `format?: boolean`: Run Prettier on JS/TS files before highlighting; copy gets the formatted code too.

- `type LineRange = number | [from: number, to: number]`
- `type CodeMark = | string | { text: string; line?: number } | { line: number; start: number; end: number }`
- `type CodeFile = Annotations & { name: string; code: string; tokens?: CodeToken[][]; }`

### Usage

```tsx
<Code code={src} language="ts" lineNumbers highlight={[[8, 13]]} marks={["t.Object"]} notes={{ 2: "Remember to add it: bun add @elysiajs/cors" }} />
```

### Example: server-snippet.tsx

```tsx
import { Code } from "@/components/ui/code";

const server = `import { Elysia, t } from "elysia";
import { cors } from "@elysiajs/cors";

new Elysia()
  .use(cors())
  .post("/clips", ({ body }) => body, {
    body: t.Object({ title: t.String() }),
  })
  .listen(3000);`;

export function ServerSnippet() {
  return (
    <Code
      code={server}
      language="ts"
      lineNumbers
      highlight={[[6, 8]]}
      marks={["t.Object", { line: 9, start: 2, end: 15 }]}
      notes={{ 2: "Remember to add it: bun add @elysiajs/cors" }}
    />
  );
}
```

### Example: excerpt.tsx

```tsx
import { Code } from "@/components/ui/code";

// An excerpt from line 42 of a file: numbers, highlights and notes use the shown numbers.
export function Excerpt({ code }: { code: string }) {
  return <Code code={code} language="ts" lineNumbers={42} highlight={[44]} />;
}
```