> ## Documentation Index
> Fetch the complete documentation index at: https://uom-demo.vercel.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Shiki highlighter

## Namespaces

* [SyntaxHighlighter](namespaces/SyntaxHighlighter.mdx)

## Type Aliases

### HighlighterProps

```ts theme={null}
type HighlighterProps = Omit<ShikiHighlighterProps, "children" | "theme"> & {
  theme?: ShikiHighlighterProps["theme"];
} & Pick<AUIProps, "language" | "code"> & Partial<Pick<AUIProps, "node" | "components">>;
```

Defined in: [components/assistant-ui/shiki-highlighter.tsx:11](https://github.com/corovcam/Universal-Object-Mapping/blob/main/frontend/uom-translator-ui/components/assistant-ui/shiki-highlighter.tsx#L11)

Props for the SyntaxHighlighter component

#### Type Declaration

##### theme?

```ts theme={null}
optional theme?: ShikiHighlighterProps["theme"];
```

## Variables

### SyntaxHighlighter

```ts theme={null}
const SyntaxHighlighter: FC<HighlighterProps>;
```

Defined in: [components/assistant-ui/shiki-highlighter.tsx:30](https://github.com/corovcam/Universal-Object-Mapping/blob/main/frontend/uom-translator-ui/components/assistant-ui/shiki-highlighter.tsx#L30)

SyntaxHighlighter component, using react-shiki
Use it by passing to `defaultComponents` in `markdown-text.tsx`

#### Example

```ts theme={null}
const defaultComponents = memoizeMarkdownComponents({
  SyntaxHighlighter,
  h1: //...
  //...other elements...
});
```