# code/CodeHighlightProvider (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/code/CodeHighlightProvider.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/code/CodeHighlightProvider.tsx).

## Components

### `CodeHighlightProvider`

Component.

Sets the highlighter and the code theme of every code block below.

```ts
function CodeHighlightProvider(props: CodeHighlightProviderProps): Element
```

**Parameters**

- `props` (`CodeHighlightProviderProps`): The [`CodeHighlightProviderProps`](https://zidane.si/docs/reference/ui-code-code-highlight-provider.md#CodeHighlightProviderProps).

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The code blocks that read it.
- `highlighter?` (`CodeHighlighter`): The highlighter (its cache and worker). Default: the enclosing one, or a main-thread highlighter.
- `theme?` (`string`): A bundled code theme id. Default: the enclosing one, or the document's appearance's GitHub theme.

Source: [ui/src/code/CodeHighlightProvider.tsx:38](https://github.com/Tahul/zidane/blob/main/ui/src/code/CodeHighlightProvider.tsx#L38)

## Functions

### `useCodeHighlight`

Function.

Returns the highlighter and the code theme in effect for a code block.

```ts
function useCodeHighlight(): { highlighter: CodeHighlighter; theme: string }
```

**Returns** `{ highlighter: CodeHighlighter; theme: string }`

Source: [ui/src/code/CodeHighlightProvider.tsx:82](https://github.com/Tahul/zidane/blob/main/ui/src/code/CodeHighlightProvider.tsx#L82)

### `useDocumentAppearance`

Function.

The document's appearance: the `.light` class on <html>, else dark.

```ts
function useDocumentAppearance(watch?: boolean): Appearance
```

**Parameters**

- `watch?` (`boolean`, default `true`): Follow class changes. Off when the caller has its own theme and only needs a value.

**Returns** `Appearance`

Source: [ui/src/code/CodeHighlightProvider.tsx:77](https://github.com/Tahul/zidane/blob/main/ui/src/code/CodeHighlightProvider.tsx#L77)

## Interfaces

### `CodeHighlightProviderProps`

Interface.

Props of [`CodeHighlightProvider`](https://zidane.si/docs/reference/ui-code-code-highlight-provider.md#CodeHighlightProvider).

```ts
interface CodeHighlightProviderProps
```

**Properties**

- `children` (`ReactNode`): The code blocks that read it.
- `highlighter?` (`CodeHighlighter`): The highlighter (its cache and worker). Default: the enclosing one, or a main-thread highlighter.
- `theme?` (`string`): A bundled code theme id. Default: the enclosing one, or the document's appearance's GitHub theme.

Source: [ui/src/code/CodeHighlightProvider.tsx:24](https://github.com/Tahul/zidane/blob/main/ui/src/code/CodeHighlightProvider.tsx#L24)