# llumi-highlighter

Syntax-highlighted code block (Prism via `refractor`), with 4 themes, an optional
copy button, and line-range dimming. Renders in **shadow DOM** (theme/token CSS is
encapsulated).

## Usage

Load the design-system base stylesheet once (for the document), then the component:

```html
<link rel="stylesheet" href="@llumi/design-system/base.css" />
<script type="module" src="@llumi/design-system/highlighter"></script>

<!-- code via the `code` property (recommended) -->
<llumi-highlighter language="typescript"></llumi-highlighter>
<script>
  document.querySelector("llumi-highlighter").code =
    "const greet = (name) => console.log(name);";
</script>

<!-- or as text content -->
<llumi-highlighter language="rust">fn main() { println!("hi"); }</llumi-highlighter>
```

## Properties / attributes

| Name | Attr | Type | Default | Description |
|------|------|------|---------|-------------|
| `language` | `language` | `string` | `""` | Prism language id (e.g. `typescript`, `python`). Aliases: `ts`, `js`, `py`, `rs`, `sh`, `md`, `html`. Unsupported → plain text + a console warning. |
| `theme` | `theme` | `ghcolors \| oneLight \| oneDark \| dracula` | `ghcolors` | Color theme. |
| `code` | `code` | `string` | `""` | Code source; falls back to the element's text content. |
| `highlight` | — (property) | `[number, number][]` | — | 1-based line ranges. When set, line numbers show and other lines dim to 30% opacity. |
| `copyButton` | `copy-button` | `boolean` | `true` | Show the copy button. Disable with `copy-button="false"`. |

## Events

The embedded copy button emits (bubbling, composed — they cross the shadow boundary):
`llumi-copy` `{ detail: { text } }` and `llumi-copy-error` `{ detail: { error } }`.

## Supported languages

`markup`/`html`/`xml`, `css`, `javascript`/`js`, `jsx`, `typescript`/`ts`, `tsx`,
`json`, `bash`/`sh`/`shell`, `python`/`py`, `rust`/`rs`, `go`, `java`, `yaml`,
`markdown`/`md`, `sql`, `diff`. (Grammars load lazily on first use.)