# Code Documentation

## Installation

```bash
jsrepo add ui/code
```

## Components

### Root

The root code block component for syntax highlighting.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLDivElement | null | false | true | A reference to the code block element. |
| children | Snippet | - | false | false | The content rendered below the code block. |
| variant | "default" | "secondary" | default | false | false | The visual style of the code block. |
| lang | "bash" | "diff" | "javascript" | "json" | "svelte" | "typescript" | typescript | false | false | The language for syntax highlighting. |
| code | string | - | true | false | The code to display and highlight. |
| class | string | - | false | false | Additional classes to apply to the code block. |
| hideLines | boolean | false | false | false | Whether to hide line numbers. |
| highlight | number | [number, number][] | [] | false | false | Lines or ranges to highlight, e.g. [2, [4,6]]. |

### CopyButton

A button to copy the code block content.

#### Props

| Prop | Type | Default Value | Required | Bindable | Description |
|------|------|--------------|----------|----------|-------------|
| ref | HTMLButtonElement | null | false | true | A reference to the copy button element. |
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | ghost | false | false | The visual style of the button. |
| size | "default" | "sm" | "lg" | "icon" | icon | false | false | The size of the button. |
| icon | Snippet | - | false | false | Custom icon to display in the button. |
| animationDuration | number | - | false | false | Duration of the copy animation in ms. |
| onCopy | (status: UseClipboard["status"]) => void | - | false | false | Callback when copy is triggered. |
| children | Snippet | - | false | false | Slot content for the copy button (e.g., custom label or icon). |