laif-ds/dist/agent-docs/components/ShikiHighlighter.md

Design System di Laif con componenti React basati su principi di Atomic Design

# ShikiHighlighter

## Overview

Client-side code highlighter using Shiki tokens. Falls back to plain `<pre><code>` when loading fails or language unsupported.

---

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `string` | Code string to highlight |
| `language` | `string` | Language key supported by Shiki |
| `className` | `string` | Optional classes for `<pre>` |

---

## Example

```tsx
import ShikiHighlighter from "laif-ds/ShikiHighlighter";

export function CodeBlock() {
  return (
    <ShikiHighlighter language="ts" className="rounded-md border p-3 text-sm">
      {`const x: number = 42;`}
    </ShikiHighlighter>
  );
}
```