### Install react-shiki

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Install the package via npm.

```bash
npm i react-shiki
```

--------------------------------

### Core Bundle Setup and Usage

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/migration-guide.md

The Core bundle requires manual initialization of the highlighter instance and explicit imports for themes and languages.

```typescript
import ShikiHighlighter from 'react-shiki';

<ShikiHighlighter language="typescript" theme="github-dark">
  {code}
</ShikiHighlighter>
```

```typescript
import {
  useShikiHighlighter,
  createHighlighterCore,
  createOnigurumaEngine,
} from 'react-shiki/core';

// Create once (typically at app initialization or in a Context)
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/github-dark')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createOnigurumaEngine(import('shiki/wasm')),
});

// Use with hook
const highlighted = useShikiHighlighter(code, 'typescript', 'github-dark', {
  highlighter,
});

// Or with component
import { ShikiHighlighter } from 'react-shiki/core';

<ShikiHighlighter
  highlighter={highlighter}
  language="typescript"
  theme="github-dark"
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Usage Example with ShikiHighlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/transformers.md

Demonstrates how to integrate line highlighting within a React component using the ShikiHighlighter.

```typescript
import ShikiHighlighter from 'react-shiki';

function CodeBlock({ code }) {
  return (
    <ShikiHighlighter
      language="typescript"
      theme="github-dark"
      showLineNumbers
      startingLineNumber={1}
      highlightLineNumbers={[2, 4]}
    >
      {code}
    </ShikiHighlighter>
  );
}
```

--------------------------------

### Implement Multi-Theme Configurations

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Examples of defining theme maps using standard strings or custom theme objects.

```typescript
// Dual theme
const themes: Themes = {
  light: 'github-light',
  dark: 'github-dark'
};

// Multiple themes
const themes: Themes = {
  light: 'github-light',
  dark: 'github-dark',
  dim: 'github-dark-dimmed',
  highContrast: 'dracula'
};

// Custom theme objects
const themes: Themes = {
  light: customLightTheme,
  dark: customDarkTheme
};
```

--------------------------------

### Implement Multi-Bundle Setup

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Demonstrates importing the web bundle for standard pages and the core bundle for specialized, language-heavy pages to optimize performance.

```typescript
// Use web bundle for most pages
import ShikiHighlighter from 'react-shiki/web';

// Use core bundle for heavy-language pages
import {
  useShikiHighlighter,
  createHighlighterCore,
  createOnigurumaEngine
} from 'react-shiki/core';

// In a Rust/Go heavy page
const heavyHighlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/github-dark')],
  langs: [
    import('@shikijs/langs/rust'),
    import('@shikijs/langs/go'),
    import('@shikijs/langs/cpp')
  ],
  engine: createOnigurumaEngine(import('shiki/wasm'))
});

// In typical web pages, use web bundle
<ShikiHighlighter language="typescript" theme="github-dark">
  {code}
</ShikiHighlighter>
```

--------------------------------

### Example usage of useShikiHighlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/utilities.md

Demonstrates passing a theme object structure that benefits from value stabilization.

```typescript
useShikiHighlighter(code, 'typescript', { light: 'github-light', dark: 'github-dark' })
```

--------------------------------

### Theme Usage Examples

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Demonstrates assigning built-in theme strings or custom theme objects to the Theme type.

```typescript
// Built-in theme
const theme: Theme = 'github-dark';

// Custom theme object
const theme: Theme = {
  name: 'my-theme',
  type: 'dark',
  colors: {
    'editor.background': '#1e1e1e',
    'editor.foreground': '#d4d4d4',
  },
  tokenColors: [
    {
      scope: ['keyword'],
      settings: { foreground: '#569cd6' }
    }
  ]
};
```

--------------------------------

### Implement full syntax highlighting with inline detection

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/plugins.md

A comprehensive example combining syntax highlighting, language detection, and inline code handling.

```typescript
import ReactMarkdown from 'react-markdown';
import ShikiHighlighter, { 
  isInlineCode, 
  rehypeInlineCodeProperty 
} from 'react-shiki';

interface CodeHighlightProps {
  inline?: boolean;
  className?: string;
  children: string;
  node?: any;
}

function CodeHighlight({ 
  inline, 
  className, 
  children, 
  node, 
  ...props 
}: CodeHighlightProps) {
  const code = String(children).trim();
  const match = className?.match(/language-(\w+)/);
  const language = match ? match[1] : undefined;

  // Determine if inline (fallback to isInlineCode if inline prop not set)
  const isCodeInline = inline ?? (node ? isInlineCode(node) : false);

  return !isCodeInline ? (
    <ShikiHighlighter 
      language={language} 
      theme="github-dark"
      showLanguage={true}
      {...props}
    >
      {code}
    </ShikiHighlighter>
  ) : (
    <code className={className} {...props}>
      {code}
    </code>
  );
}

export default function DocumentationPage({ markdown }) {
  return (
    <ReactMarkdown
      rehypePlugins={[rehypeInlineCodeProperty]}
      components={{
        code: CodeHighlight,
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}
```

--------------------------------

### Stabilize hook dependencies

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/utilities.md

Example of stabilizing multiple inputs before passing them to useMemo.

```typescript
const stableLang = useStableValue(lang);
const stableTheme = useStableValue(themeInput);
const stableOpts = useStableValue(options);

const resolved = useMemo(() => {
  // ...
}, [stableLang, stableTheme, stableOpts]);
```

--------------------------------

### Configure ShikiHighlighter with delay

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/utilities.md

Example of passing a delay prop to the ShikiHighlighter component to enable throttling.

```jsx
<ShikiHighlighter delay={150}>
  {realTimeCode}
</ShikiHighlighter>
```

--------------------------------

### Configuring Starting Line Numbers

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/transformers.md

Adjust the starting index for line numbering using the startingLineNumber prop.

```typescript
// Start numbering from 0
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  showLineNumbers
  startingLineNumber={0}
  highlightLineNumbers={[0, 2]}
>
  {code}
</ShikiHighlighter>
```

```typescript
// Start numbering from 10
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  showLineNumbers
  startingLineNumber={10}
  highlightLineNumbers={[10, 11, 13]}
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Access Theme CSS Variables

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Example of applying theme-generated CSS variables to a container element.

```css
.code-block {
  background: var(--shiki-background);
  color: var(--shiki-foreground);
  border: 1px solid var(--shiki-color-3);
}
```

--------------------------------

### Language Usage Examples

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Demonstrates assigning string identifiers, custom grammar objects, or undefined to the Language type.

```typescript
// String identifier
const lang: Language = 'typescript';

// Custom grammar object
const lang: Language = {
  name: 'mcfunction',
  scopeName: 'source.mcfunction',
  // ... other grammar properties
};

// Undefined
const lang: Language = undefined;
```

--------------------------------

### Access Custom Theme CSS Variables

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Example of using custom-prefixed CSS variables in a stylesheet.

```css
background: var(--my-code-background);
color: var(--my-code-foreground);
```

--------------------------------

### Set Custom Theme CSS Variable Prefix

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Example of configuring a custom prefix to avoid CSS variable naming conflicts.

```typescript
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  cssVariablePrefix="--my-code"
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Set Default Theme CSS Variable Prefix

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Example of using the default CSS variable prefix for theme colors in the ShikiHighlighter component.

```typescript
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  cssVariablePrefix="--shiki"  // Default
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Initialize Minimal Bundle with Custom Highlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Use createHighlighterCore to define specific themes and languages for a lightweight bundle. Requires importing the engine and language/theme modules.

```typescript
import { useShikiHighlighter, createHighlighterCore, createJavaScriptRegexEngine } from 'react-shiki/core';

const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript'), import('@shikijs/langs/javascript')],
  engine: createJavaScriptRegexEngine()
});

const highlighted = useShikiHighlighter(code, 'typescript', 'nord', {
  highlighter,
  showLineNumbers: true
});
```

--------------------------------

### Configure Minimal Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/INDEX.md

Initialize a core highlighter instance to reduce bundle size by importing only necessary themes and languages.

```typescript
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createJavaScriptRegexEngine()
});

<ShikiHighlighter
  highlighter={highlighter}
  language="typescript"
  theme="nord"
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Library Entry Points

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/INDEX.md

Import paths for different bundle sizes and configurations.

```typescript
// Full bundle (all languages & themes)
import ShikiHighlighter from 'react-shiki';
import { useShikiHighlighter } from 'react-shiki';

// Web bundle (web-focused languages)
import ShikiHighlighter from 'react-shiki/web';
import { useShikiHighlighter } from 'react-shiki/web';

// Core bundle (minimal, custom configuration)
import ShikiHighlighter from 'react-shiki/core';
import {
  useShikiHighlighter,
  createHighlighterCore,
  createOnigurumaEngine,
  createJavaScriptRegexEngine
} from 'react-shiki/core';

// CSS (for line numbers)
import 'react-shiki/css';
```

--------------------------------

### Import and Configure Core Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/package/README.md

Uses the minimal core bundle to create a custom highlighter with dynamic imports for optimized bundle size.

```tsx
import ShikiHighlighter, { 
  createHighlighterCore,        // re-exported from shiki/core
  createOnigurumaEngine,        // re-exported from shiki/engine/oniguruma
  createJavaScriptRegexEngine,  // re-exported from shiki/engine/javascript
} from 'react-shiki/core';

// Create custom highlighter with dynamic imports to optimize client-side bundle size
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createOnigurumaEngine(import('shiki/wasm')) 
    // or createJavaScriptRegexEngine()
});

<ShikiHighlighter highlighter={highlighter} language="typescript" theme="nord">
  {code}
</ShikiHighlighter>
```

--------------------------------

### Apply Inline Styles to Component

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Example of overriding CSS variables directly on the component using the style prop.

```tsx
<ShikiHighlighter 
  language="javascript"
  theme="github-dark"
  showLineNumbers
  style={{
    '--rs-line-numbers-foreground': '#60a5fa',
    '--rs-line-numbers-width': '3ch'
  }}
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Migrate to Core Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Manual highlighter initialization using the core bundle for granular control over themes, languages, and engines.

```typescript
// Before
import ShikiHighlighter from 'react-shiki';

// After
import {
  useShikiHighlighter,
  createHighlighterCore,
  createJavaScriptRegexEngine
} from 'react-shiki/core';

// Requires creating a highlighter
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/github-dark')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createJavaScriptRegexEngine()
});

// Pass to hook/component
const highlighted = useShikiHighlighter(code, 'typescript', 'github-dark', {
  highlighter
});
```

--------------------------------

### Configure Custom Highlighter Bundles

Source: https://github.com/avgvstvs96/react-shiki/blob/main/playground/src/Demo.mdx

Optimizes bundle size by using dynamic imports for themes, languages, and engines.

```tsx
import ShikiHighlighter, { 
    createHighlighterCore,        // re-exported from shiki/core
    createOnigurumaEngine,        // re-exported from shiki/engine/oniguruma
    createJavaScriptRegexEngine,  // re-exported from shiki/engine/javascript
} from 'react-shiki/core';

// Create custom highlighter with dynamic imports to optimize client-side bundle size
const highlighter = await createHighlighterCore({
    themes: [import('@shikijs/themes/ayu-dark')],
    langs: [import('@shikijs/langs/typescript')],
    engine: createOnigurumaEngine(import('shiki/wasm')) 
        // or createJavaScriptRegexEngine()
});

<ShikiHighlighter highlighter={highlighter} language="typescript" theme="ayu-dark">
    {code.trim()}
</ShikiHighlighter>
```

--------------------------------

### Configure Core Highlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Initialize a custom highlighter instance by explicitly importing required themes and languages.

```typescript
const highlighter = await createHighlighterCore({
  themes: [
    import('@shikijs/themes/github-light'),
    import('@shikijs/themes/github-dark'),
  ],
  langs: [
    import('@shikijs/langs/javascript'),
    import('@shikijs/langs/typescript'),
    import('@shikijs/langs/python'),
  ],
  engine: createJavaScriptRegexEngine()
});
```

--------------------------------

### Handle inline prop in CodeHighlight

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/plugins.md

Example of a CodeHighlight component consuming the inline property injected by the rehype plugin.

```typescript
interface CodeHighlightProps {
  inline?: boolean;
  className?: string;
  children: ReactNode;
  node?: Element;
  [key: string]: any;
}

const CodeHighlight = ({
  inline,
  className,
  children,
  node,
  ...props
}: CodeHighlightProps): JSX.Element => {
  const match = className?.match(/language-(\w+)/);
  const language = match ? match[1] : undefined;
  const code = String(children).trim();

  return !inline ? (
    <ShikiHighlighter language={language} theme="github-dark" {...props}>
      {code}
    </ShikiHighlighter>
  ) : (
    <code className={className} {...props}>
      {code}
    </code>
  );
};
```

--------------------------------

### Update TypeScript definitions

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/migration-guide.md

Install the latest version of React type definitions to resolve potential TypeScript compatibility errors.

```bash
npm install --save-dev @types/react@latest
```

--------------------------------

### Implement throttleHighlighting in a component

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/utilities.md

Example of using throttleHighlighting within a React component to manage expensive operations during input changes.

```typescript
import { throttleHighlighting } from './lib/utils';
import type { TimeoutState } from './lib/types';

function LiveEditor({ code }) {
  const timeoutControl = useRef<TimeoutState>({
    nextAllowedTime: 0,
    timeoutId: undefined
  });

  const highlight = async () => {
    // Expensive highlighting operation
  };

  const handleCodeChange = () => {
    throttleHighlighting(highlight, timeoutControl, 150);
  };

  return (
    <textarea onChange={handleCodeChange} />
  );
}
```

--------------------------------

### Configure Highlighter Engines

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/migration-guide.md

Select between Oniguruma for full compatibility or JavaScript RegExp for faster startup times.

```typescript
import { createOnigurumaEngine } from 'react-shiki/core';

engine: createOnigurumaEngine(import('shiki/wasm'))
```

```typescript
import { createJavaScriptRegexEngine } from 'react-shiki/core';

engine: createJavaScriptRegexEngine()
```

```typescript
import { createJavaScriptRegexEngine } from 'react-shiki/core';

engine: createJavaScriptRegexEngine({ forgiving: true })
```

--------------------------------

### Using the Full Bundle Highlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Implement the ShikiHighlighter component directly without additional configuration.

```typescript
import ShikiHighlighter from 'react-shiki';

function CodeBlock() {
  return (
    <ShikiHighlighter language="python" theme="github-dark">
      {`def hello():
    print("Hello, World!")`}
    </ShikiHighlighter>
  );
}
```

--------------------------------

### Import ShikiHighlighter bundles

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/ShikiHighlighter.md

Choose the appropriate bundle based on your requirements for language support and bundle size.

```typescript
// Full bundle (all languages & themes)
import ShikiHighlighter from 'react-shiki';

// Web bundle (web-focused languages only)
import ShikiHighlighter from 'react-shiki/web';

// Core bundle (requires custom highlighter)
import ShikiHighlighter from 'react-shiki/core';
```

--------------------------------

### Engine Configuration

Source: https://github.com/avgvstvs96/react-shiki/blob/main/package/README.md

Methods for creating and configuring syntax highlighting engines to balance bundle size and performance.

```APIDOC
## Engine Configuration

### Description
Methods to initialize specific regex engines for syntax highlighting.

### Methods
- **createOnigurumaEngine(wasmImport)**: Uses WebAssembly for maximum language support.
- **createJavaScriptRegexEngine(options)**: Smaller bundle size, faster startup. Supports `forgiving: boolean` option.
- **createJavaScriptRawEngine()**: Optimized for pre-compiled languages.
```

--------------------------------

### Import Core Bundle Components

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/README.md

Direct imports from the core bundle for custom highlighter initialization.

```typescript
import {
  createHighlighterCore,
  createOnigurumaEngine
} from 'react-shiki/core';
```

--------------------------------

### Configure Multi-theme Documentation

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Pass an object to the theme prop to support multiple color schemes. Use defaultColor to specify the initial or fallback theme.

```typescript
<ShikiHighlighter
  language="tsx"
  theme={{
    light: 'github-light',
    dark: 'github-dark',
    dim: 'github-dark-dimmed'
  }}
  defaultColor="light-dark()"
  showLineNumbers
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Importing from react-shiki Core Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/README.md

The core bundle requires manual highlighter configuration and is ideal for production apps needing fine-grained bundle control.

```typescript
import ShikiHighlighter from 'react-shiki/core';
import {
  useShikiHighlighter,
  createHighlighterCore,
  createOnigurumaEngine
} from 'react-shiki/core';
```

--------------------------------

### Optimize Bundle Size with Core Highlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/examples.md

Use createHighlighterCore and the JavaScript regex engine to reduce the final bundle size by importing only necessary themes and languages.

```typescript
import {
  useShikiHighlighter,
  createHighlighterCore,
  createJavaScriptRegexEngine,
} from 'react-shiki/core';
import { useEffect, useState } from 'react';

export function MinimalBundleExample() {
  const [highlighted, setHighlighted] = useState<JSX.Element | null>(null);

  useEffect(() => {
    (async () => {
      const highlighter = await createHighlighterCore({
        themes: [import('@shikijs/themes/github-dark')],
        langs: [import('@shikijs/langs/typescript')],
        engine: createJavaScriptRegexEngine(),
      });

      const result = useShikiHighlighter(
        'const x: number = 42;',
        'typescript',
        'github-dark',
        { highlighter }
      );

      setHighlighted(result);
    })();
  }, []);

  return <div>{highlighted}</div>;
}
```

--------------------------------

### Importing react-shiki Bundles

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Choose between full, web-focused, or minimal core bundles to balance bundle size and language support.

```tsx
import ShikiHighlighter from 'react-shiki';
```

```tsx
import ShikiHighlighter from 'react-shiki/web';
```

```tsx
import ShikiHighlighter, { 
  createHighlighterCore,        // re-exported from shiki/core
  createOnigurumaEngine,        // re-exported from shiki/engine/oniguruma
  createJavaScriptRegexEngine,  // re-exported from shiki/engine/javascript
} from 'react-shiki/core';

// Create custom highlighter with dynamic imports to optimize client-side bundle size
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createOnigurumaEngine(import('shiki/wasm')) 
    // or createJavaScriptRegexEngine()
});

<ShikiHighlighter highlighter={highlighter} language="typescript" theme="nord">
  {code}
</ShikiHighlighter>
```

--------------------------------

### Use OutputFormat in useShikiHighlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Demonstrates how to specify different output formats when using the hook.

```typescript
// React elements (default)
const highlighted = useShikiHighlighter(code, 'typescript', 'github-dark');
// Returns: ReactElement | null

// HTML string
const html = useShikiHighlighter(code, 'typescript', 'github-dark', {
  outputFormat: 'html'
});
// Returns: string | null

// Shiki tokens (hook only)
const tokens = useShikiHighlighter(code, 'typescript', 'github-dark', {
  outputFormat: 'tokens'
});
// Returns: TokensResult | null
```

--------------------------------

### Basic Highlighting

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/useShikiHighlighter.md

Renders code as a React component using a specified language and theme.

```typescript
import { useShikiHighlighter } from 'react-shiki';

function CodeBlock() {
  const code = `const greeting = "Hello, World!";`;
  const highlighted = useShikiHighlighter(code, 'typescript', 'github-dark');

  return <div>{highlighted}</div>;
}
```

--------------------------------

### Advanced Core Bundle Usage

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Demonstrates creating a custom highlighter with a specific engine and using it within hooks or components.

```typescript
import {
  useShikiHighlighter,
  createHighlighterCore,
  createOnigurumaEngine
} from 'react-shiki/core';

// Create custom highlighter
const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createOnigurumaEngine(import('shiki/wasm'))
});

// Use in hook
const highlighted = useShikiHighlighter(code, 'typescript', 'nord', {
  highlighter
});

// Or component
<ShikiHighlighter highlighter={highlighter} language="typescript" theme="nord">
  {code}
</ShikiHighlighter>
```

--------------------------------

### useShikiHighlighter(code, lang, theme, options)

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/useShikiHighlighter.md

The primary hook for syntax highlighting. It accepts the code string, language, theme(s), and an optional configuration object.

```APIDOC
## useShikiHighlighter(code, lang, theme, options)

### Description
Performs syntax highlighting on a provided code string. It returns either a React node, an HTML string, or token data depending on the configuration.

### Parameters
- **code** (string) - Required - The source code to highlight.
- **lang** (string | object) - Required - The language identifier or a custom grammar object.
- **theme** (string | object) - Required - The theme name or an object mapping themes (e.g., { light: '...', dark: '...' }).
- **options** (object) - Optional - Configuration object:
  - **outputFormat** (string) - 'html' | 'tokens' | 'react' (default).
  - **defaultColor** (string) - Used for multi-theme support.
  - **showLineNumbers** (boolean) - Whether to display line numbers.
  - **startingLineNumber** (number) - Starting index for line numbers.
  - **highlightLineNumbers** (number[]) - Array of line numbers to highlight.
  - **highlighter** (object) - A custom highlighter instance.
  - **delay** (number) - Throttle delay in milliseconds.
  - **transformers** (array) - Custom Shiki transformers.
  - **structure** (string) - 'inline' | 'classic'.
  - **preloadLanguages** (array) - Languages to preload.
```

--------------------------------

### ShikiHighlighter Configuration Options

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Common configuration options used to control the syntax highlighting behavior, themes, and output format.

```APIDOC
## ShikiHighlighter Configuration

### Parameters
- **code** (string) - Required - Code to highlight
- **language** (string | object) - Required - Language to highlight, built-in or custom TextMate grammar object
- **theme** (string | object) - Optional - Single or multi-theme configuration, default: 'github-dark'
- **delay** (number) - Optional - Delay between highlights in milliseconds, default: 0
- **preloadLanguages** (array) - Optional - Preload bundled language IDs and custom language grammars
- **langAlias** (object) - Optional - Map of language aliases
- **engine** (RegexEngine) - Optional - RegExp engine for syntax highlighting
- **showLineNumbers** (boolean) - Optional - Display line numbers, default: false
- **startingLineNumber** (number) - Optional - Starting line number, default: 1
- **highlightLineNumbers** (number[]) - Optional - Displayed line numbers to highlight
- **transformers** (array) - Optional - Custom Shiki transformers
- **cssVariablePrefix** (string) - Optional - Prefix for CSS variables, default: '--shiki'
- **defaultColor** (string | false) - Optional - Default theme mode, default: 'light'
- **outputFormat** (string) - Optional - Output format: 'react', 'html', or 'tokens', default: 'react'
- **tabindex** (number) - Optional - Tab index for the code block, default: 0
- **decorations** (array) - Optional - Custom decorations to wrap tokens
- **structure** (string) - Optional - HAST/HTML structure: 'classic' or 'inline', default: 'classic'
```

--------------------------------

### Importing Full Bundle Components

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Import the main highlighter component, hook, and regex engines from the full react-shiki package.

```typescript
import ShikiHighlighter from 'react-shiki';
import { useShikiHighlighter } from 'react-shiki';
import { createJavaScriptRegexEngine, createJavaScriptRawEngine } from 'react-shiki';
```

--------------------------------

### Importing useShikiHighlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/useShikiHighlighter.md

Choose the appropriate bundle based on your requirements for language and theme support.

```typescript
// Full bundle (all languages & themes)
import { useShikiHighlighter } from 'react-shiki';

// Web bundle (web-focused languages only)
import { useShikiHighlighter } from 'react-shiki/web';

// Core bundle (requires custom highlighter)
import { useShikiHighlighter } from 'react-shiki/core';
```

--------------------------------

### Importing from react-shiki Full Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/README.md

Use the full bundle for maximum compatibility with all Shiki languages and themes.

```typescript
import ShikiHighlighter from 'react-shiki';
import { useShikiHighlighter } from 'react-shiki';
```

--------------------------------

### Import Full Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/package/README.md

Imports the full react-shiki bundle containing all languages and themes.

```tsx
import ShikiHighlighter from 'react-shiki';
```

--------------------------------

### Configure Multi-theme Support

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Pass a configuration object to the theme prop or parameter to enable multiple theme modes.

```tsx
<ShikiHighlighter
  language="tsx"
  theme={{
    light: "github-light",
    dark: "github-dark",
    dim: "github-dark-dimmed",
  }}
  defaultColor="dark"
>
  {code.trim()}
</ShikiHighlighter>
```

```tsx
const highlightedCode = useShikiHighlighter(
  code,
  "tsx",
  {
    light: "github-light",
    dark: "github-dark",
    dim: "github-dark-dimmed",
  },
  {
    defaultColor: "dark",
  }
);
```

--------------------------------

### Implement Basic Syntax Highlighting

Source: https://github.com/avgvstvs96/react-shiki/blob/main/playground/src/Demo.mdx

Use the ShikiHighlighter component to render highlighted code blocks with a specified language and theme.

```tsx
import ShikiHighlighter from "react-shiki";

function CodeBlock() {
    return (
        <ShikiHighlighter language="jsx" theme="github-dark">
            {code.trim()}
        </ShikiHighlighter>
    );
}
```

--------------------------------

### Create Documentation Code Block

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/examples.md

Utilize the ShikiHighlighter component to render code with line numbers, specific line highlights, and custom styling.

```typescript
import ShikiHighlighter from 'react-shiki';

export function DocumentationExample() {
  const code = `import { useShikiHighlighter } from 'react-shiki';

export function MyComponent() {
  const highlighted = useShikiHighlighter(
    code,
    'typescript',
    'github-dark'
  );
  return <div>{highlighted}</div>;
}`;

  return (
    <ShikiHighlighter
      language="typescript"
      theme={{
        light: 'github-light',
        dark: 'github-dark',
      }}
      defaultColor="light-dark()"
      showLineNumbers
      highlightLineNumbers={[4, 5]}
      className="doc-code-block"
      style={{
        borderRadius: '8px',
        borderLeft: '4px solid #3b82f6',
      }}
    >
      {code}
    </ShikiHighlighter>
  );
}
```

--------------------------------

### Import Web Bundle Components

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Import the necessary components and engines for the web-optimized bundle.

```typescript
import ShikiHighlighter from 'react-shiki/web';
import { useShikiHighlighter } from 'react-shiki/web';
import { createJavaScriptRegexEngine, createJavaScriptRawEngine } from 'react-shiki/web';
```

--------------------------------

### Implement Reactive Themes with light-dark()

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Use the light-dark() function to automatically switch themes based on system color-scheme preferences.

```tsx
// Component
<ShikiHighlighter
  language="tsx"
  theme={{
    light: "github-light",
    dark: "github-dark",
  }}
  defaultColor="light-dark()"
>
  {code.trim()}
</ShikiHighlighter>

// Hook
const highlightedCode = useShikiHighlighter(code, "tsx", {
  light: "github-light",
  dark: "github-dark",
}, {
  defaultColor: "light-dark()"
});
```

```css
:root {
  color-scheme: light dark;
}

/* Or dynamically for class based dark mode */
:root {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}
```

--------------------------------

### Import Default CSS

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/transformers.md

Include the library's CSS to apply default styling for line numbers and highlights.

```typescript
import 'react-shiki/css';
```

--------------------------------

### Configure multi-theme and CSS variables

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Manage theme modes and CSS variable prefixes for consistent styling.

```typescript
// Multi-theme with default
<ShikiHighlighter
  language="typescript"
  theme={{ light: 'github-light', dark: 'github-dark' }}
  defaultColor="dark"
>
  {code}
</ShikiHighlighter>
```

```typescript
// CSS light-dark() function (automatic switching)
<ShikiHighlighter
  language="typescript"
  theme={{ light: 'github-light', dark: 'github-dark' }}
  defaultColor="light-dark()"
>
  {code}
</ShikiHighlighter>
```

```typescript
// Custom CSS variable prefix
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  cssVariablePrefix="--custom"
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Importing Types from React-Shiki Bundles

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Demonstrates how to import various types from the main, web, and core bundles, as well as re-exported Shiki types.

```typescript
// All types from main bundle
import type {
  Language,
  Theme,
  Themes,
  Element,
  OutputFormat,
  HighlighterOptions,
  HighlighterOptionsFor,
  HighlightResult,
  UseShikiHighlighter,
  ShikiHighlighterProps,
} from 'react-shiki';

// Types from web bundle
import type {
  Language,
  Theme,
  Themes,
  // ... same as above
} from 'react-shiki/web';

// Types from core bundle
import type {
  Language,
  Theme,
  Themes,
  // ... same as above
} from 'react-shiki/core';

// Shiki re-exports
import type { 
  LanguageRegistration, 
  TokensResult 
} from 'react-shiki';
```

--------------------------------

### Standard Component Usage

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/migration-guide.md

The component API remains identical when switching between Full and Web bundles.

```typescript
// This works with both bundles
<ShikiHighlighter language="typescript" theme="github-dark">
  {code}
</ShikiHighlighter>
```

--------------------------------

### Documentation Style Block

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Supports light/dark theme switching and custom line highlighting for documentation purposes.

```typescript
<ShikiHighlighter
  language="typescript"
  theme={{
    light: 'github-light',
    dark: 'github-dark'
  }}
  defaultColor="light-dark()"
  showLineNumbers
  highlightLineNumbers={highlightedLines}
  className="border-l-4 border-blue-500"
  style={{
    '--rs-line-numbers-foreground': '#cbd5e1',
    '--rs-highlighted-line-background': 'color-mix(in srgb, currentColor 5%, transparent)'
  } as React.CSSProperties}
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Implement Syntax Highlighting with Hook

Source: https://github.com/avgvstvs96/react-shiki/blob/main/playground/src/Demo.mdx

Use the useShikiHighlighter hook to programmatically retrieve highlighted code elements for custom rendering.

```tsx
import { useShikiHighlighter } from "react-shiki";

function CodeBlock({ code, language }) {
    const highlightedCode = useShikiHighlighter(code, language, "dracula");

    return <div className="code-block">{highlightedCode}</div>;
}
```

--------------------------------

### Migrate to Web Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Switching to the web-optimized bundle while maintaining the same component API.

```typescript
// Before
import ShikiHighlighter from 'react-shiki';

// After
import ShikiHighlighter from 'react-shiki/web';

// Code stays the same!
<ShikiHighlighter language="typescript" theme="github-dark">
  {code}
</ShikiHighlighter>
```

--------------------------------

### Multi-theme Support

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/useShikiHighlighter.md

Applies different themes based on the defaultColor configuration.

```typescript
const highlighted = useShikiHighlighter(
  'const x = 1;',
  'typescript',
  {
    light: 'github-light',
    dark: 'github-dark',
    dim: 'github-dark-dimmed'
  },
  {
    defaultColor: 'dark'
  }
);
```

--------------------------------

### Configure Line Numbers and Highlighting

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Demonstrates enabling line numbers and highlighting via the component props and the hook options.

```tsx
// Component
<ShikiHighlighter 
  language="javascript"
  theme="github-dark"
  showLineNumbers
  startingLineNumber={0} // default is 1
  highlightLineNumbers={[2, 4]}
>
  {code}
</ShikiHighlighter>

// Hook (import 'react-shiki/css' for line numbers to work)
const highlightedCode = useShikiHighlighter(code, "javascript", "github-dark", {
  showLineNumbers: true,
  startingLineNumber: 0,
  highlightLineNumbers: [2, 4],
});
```

--------------------------------

### Importing from react-shiki Web Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/README.md

The web bundle is optimized for common web languages like HTML, CSS, and JavaScript, offering a smaller footprint.

```typescript
import ShikiHighlighter from 'react-shiki/web';
import { useShikiHighlighter } from 'react-shiki/web';
```

--------------------------------

### Configure accessibility settings

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Adjust theme, font size, and line height to ensure readability and sufficient contrast.

```typescript
<ShikiHighlighter
  language="typescript"
  theme="github-dark"  // Good contrast
>
  {code}
</ShikiHighlighter>
```

```typescript
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  style={{ fontSize: '14px' }}  // At least 12px
>
  {code}
</ShikiHighlighter>
```

```css
.code-block {
  line-height: 1.6;  /* Comfortable reading */
}
```

--------------------------------

### Import Core Bundle Components

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Import the core utilities and engine creators required for custom bundle configurations.

```typescript
import ShikiHighlighter from 'react-shiki/core';
import { useShikiHighlighter } from 'react-shiki/core';
import {
  createHighlighterCore,
  createOnigurumaEngine,
  createJavaScriptRegexEngine,
  createJavaScriptRawEngine
} from 'react-shiki/core';
```

--------------------------------

### Usage of Web Bundle Highlighter

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/bundles.md

Implement the ShikiHighlighter component as a drop-in replacement for standard syntax highlighting in web projects.

```typescript
import ShikiHighlighter from 'react-shiki/web';

function CodeBlock() {
  return (
    <ShikiHighlighter language="typescript" theme="github-dark">
      {`const greeting: string = "Hello, TypeScript!";`}
    </ShikiHighlighter>
  );
}
```

--------------------------------

### Render multiple highlighters with different themes

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/examples.md

Demonstrates rendering multiple ShikiHighlighter components on a single page with distinct language and theme configurations.

```typescript
import ShikiHighlighter from 'react-shiki';

export function MultipleHighlightersExample() {
  return (
    <div>
      <h2>Frontend Example</h2>
      <ShikiHighlighter
        language="typescript"
        theme="github-light"
        showLanguage
      >
        {`interface User {
  id: number;
  name: string;
}`}
      </ShikiHighlighter>

      <h2>Backend Example</h2>
      <ShikiHighlighter
        language="python"
        theme="nord"
        showLanguage
      >
        {`class User:
    def __init__(self, id, name):
        self.id = id
        self.name = name`}
      </ShikiHighlighter>
    </div>
  );
}
```

--------------------------------

### Implement system preference dark mode

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/styling.md

Enable automatic theme switching based on the user's system settings using color-scheme.

```typescript
<ShikiHighlighter
  language="typescript"
  theme={{
    light: 'github-light',
    dark: 'github-dark'
  }}
  defaultColor="light-dark()"
>
  {code}
</ShikiHighlighter>
```

```css
:root {
  color-scheme: light dark;
}
```

--------------------------------

### Set output format

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Configure the output format as React elements, HTML strings, or raw token data.

```typescript
// React elements (default)
const highlighted = useShikiHighlighter(code, lang, theme);

// HTML string (use dangerouslySetInnerHTML)
const html = useShikiHighlighter(code, lang, theme, { outputFormat: 'html' });

// Raw tokens (hook only)
const tokens = useShikiHighlighter(code, lang, theme, { outputFormat: 'tokens' });
if (tokens) {
  tokens.tokens.map((line) => /* render line */);
}
```

--------------------------------

### useShikiHighlighter(code, lang, themeInput, options)

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/useShikiHighlighter.md

The useShikiHighlighter hook processes source code and returns a highlighted result based on the specified language, theme, and output format.

```APIDOC
## useShikiHighlighter(code, lang, themeInput, options)

### Description
Provides a React hook-based interface for syntax highlighting code using Shiki. It returns highlighted code as React elements, HTML strings, or raw tokens.

### Signature
`useShikiHighlighter<F>(code: string, lang: Language, themeInput: Theme | Themes, options?: HighlighterOptionsFor<F>): HighlightResult<F>`

### Parameters
- **code** (string) - Required - The source code to highlight.
- **lang** (Language) - Required - Programming language identifier or custom TextMate grammar object.
- **themeInput** (Theme | Themes) - Required - Single theme string/object or object mapping theme names to themes.
- **options** (HighlighterOptionsFor<F>) - Optional - Configuration object for highlighting and output format.

### Return Value
Returns `HighlightResult<F>`:
- `'react'` output: `ReactElement | null`
- `'html'` output: `string | null`
- `'tokens'` output: `TokensResult | null`
- Returns `null` while highlighting is in progress.
```

--------------------------------

### Configure Multi-theme Auto-switching

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/INDEX.md

Use an object to define light and dark themes for automatic color scheme switching.

```typescript
<ShikiHighlighter
  language="typescript"
  theme={{ light: 'github-light', dark: 'github-dark' }}
  defaultColor="light-dark()"
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Implement Real-time Code Highlighting

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/examples.md

Uses a textarea to capture user input and updates the ShikiHighlighter component with a specified delay for performance.

```typescript
import { useState } from 'react';
import ShikiHighlighter from 'react-shiki';

export function LiveEditorExample() {
  const [code, setCode] = useState(
    `function hello() {
  console.log("Hello!");
}`
  );

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
      <textarea
        value={code}
        onChange={(e) => setCode(e.target.value)}
        style={{
          fontFamily: 'monospace',
          padding: '1rem',
          fontSize: '14px',
        }}
      />
      <ShikiHighlighter
        language="javascript"
        theme="github-dark"
        delay={200}
      >
        {code}
      </ShikiHighlighter>
    </div>
  );
}
```

--------------------------------

### Configure light-dark() theme switching

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/migration-guide.md

Use light-dark() in defaultColor for automatic theme switching based on system preferences.

```jsx
// Old way (still works)
<ShikiHighlighter
  theme={{ light: 'github-light', dark: 'github-dark' }}
  defaultColor="dark"
>

// New way (recommended)
<ShikiHighlighter
  theme={{ light: 'github-light', dark: 'github-dark' }}
  defaultColor="light-dark()"
>
```

--------------------------------

### Multi-theme with Reactive CSS

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/api-reference/ShikiHighlighter.md

Configure light and dark themes with a default color mode.

```typescript
<ShikiHighlighter
  language="tsx"
  theme={{
    light: 'github-light',
    dark: 'github-dark',
  }}
  defaultColor="light-dark()"
>
  {code.trim()}
</ShikiHighlighter>
```

--------------------------------

### Implement Multi-theme Support

Source: https://github.com/avgvstvs96/react-shiki/blob/main/playground/src/Demo.mdx

Provides different themes based on the application's color mode.

```tsx
<ShikiHighlighter
    language="tsx"
    theme={{
        light: "github-light",
        dark: "github-dark",
        dim: "github-dark-dimmed",
    }}
    defaultColor="dark"
>
    {code.trim()}
</ShikiHighlighter>
```

--------------------------------

### Create a syntax highlighting component for react-markdown

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Define a custom component to handle code blocks using ShikiHighlighter and the isInlineCode helper.

```tsx
import ReactMarkdown from "react-markdown";
import ShikiHighlighter, { isInlineCode } from "react-shiki";

const CodeHighlight = ({ className, children, node, ...props }) => {
  const code = String(children).trim();
  const match = className?.match(/language-(\w+)/);
  const language = match ? match[1] : undefined;
  const isInline = node ? isInlineCode(node) : undefined;

  return !isInline ? (
    <ShikiHighlighter language={language} theme="github-dark" {...props}>
      {code}
    </ShikiHighlighter>
  ) : (
    <code className={className} {...props}>
      {code}
    </code>
  );
};
```

--------------------------------

### Import Web Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/package/README.md

Imports the web-focused bundle containing common languages.

```tsx
import ShikiHighlighter from 'react-shiki/web';
```

--------------------------------

### Project Directory Structure

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/README.md

Visual representation of the source code organization within the package.

```text
package/src/
├── index.ts              # Full bundle entry point
├── web.ts                # Web bundle entry point
├── core.ts               # Core bundle entry point
├── bundles/
│   ├── full.ts           # Full bundle factory
│   ├── web.ts            # Web bundle factory
│   └── core.ts           # Core bundle validation
├── lib/
│   ├── component.tsx     # ShikiHighlighter component
│   ├── hook.ts           # useShikiHighlighter hook
│   ├── types.ts          # Type definitions
│   ├── theme.ts          # Theme resolution
│   ├── language.ts       # Language resolution
│   ├── options.ts        # Options building
│   ├── transformers.ts   # Line number transformers
│   ├── plugins.ts        # react-markdown integration
│   └── utils.ts          # Utilities
└── styles/
    ├── component.css     # Component styles
    └── features.css      # Line numbers & highlights
```

--------------------------------

### Configure RegExp Engine

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Use the JavaScript engine to reduce bundle size or enable forgiving mode for parsing.

```typescript
import { createJavaScriptRegexEngine } from 'react-shiki';

// Use JavaScript engine for smaller bundle
<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  engine={createJavaScriptRegexEngine()}
>
  {code}
</ShikiHighlighter>
```

```typescript
// JavaScript engine with forgiving mode
import { createJavaScriptRegexEngine } from 'react-shiki';

<ShikiHighlighter
  language="typescript"
  theme="github-dark"
  engine={createJavaScriptRegexEngine({ forgiving: true })}
>
  {code}
</ShikiHighlighter>
```

--------------------------------

### Configuring Engines for Core Bundle

Source: https://github.com/avgvstvs96/react-shiki/blob/main/README.md

Explicitly define an engine when using the minimal core bundle.

```tsx
import {
  createHighlighterCore,
  createOnigurumaEngine,
  createJavaScriptRegexEngine
} from 'react-shiki/core';

const highlighter = await createHighlighterCore({
  themes: [import('@shikijs/themes/nord')],
  langs: [import('@shikijs/langs/typescript')],
  engine: createJavaScriptRegexEngine() // or createOnigurumaEngine(import('shiki/wasm'))
});
```

--------------------------------

### Configure useShikiHighlighter hook

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/configuration.md

Basic structure for passing options to the useShikiHighlighter hook.

```typescript
const highlighted = useShikiHighlighter(
  code,
  language,
  theme,
  {
    // Options here
  }
);
```

--------------------------------

### Define Themes Configuration

Source: https://github.com/avgvstvs96/react-shiki/blob/main/_autodocs/types.md

Defines the structure for mapping theme keys to theme configurations.

```typescript
type Themes = {
  [Key in MultiThemeKey]: Theme;
};

type MultiThemeKey = 'dark' | 'light' | (string & {});
```