# code/HighlightedCode (zidane-ui)

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

## Components

### `HighlightedCode`

Component.

Highlighted code with a copy button, plain until it nears the viewport. The highlighter and
theme come from the enclosing `CodeHighlightProvider`.

```ts
function HighlightedCode(props: HighlightedCodeProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `actions?` (`(buttonClass: string) => ReactNode`): Extra controls before Wrap and Copy: `CodeFrameProps.actions`.
- `className?` (`string`): Extra classes on the root element.
- `code` (`string`): The code to show, without the closing newline.
- `copyLabel?` (`string`): Accessible name of the copy button. Defaults to the frame's.
- `language` (`string`): A language name or alias (`plaintext` when the code names none).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/HighlightedCode.tsx:43](https://github.com/Tahul/zidane/blob/main/ui/src/code/HighlightedCode.tsx#L43)

## Interfaces

### `HighlightedCodeProps`

Interface.

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

```ts
interface HighlightedCodeProps
```

**Properties**

- `actions?` (`(buttonClass: string) => ReactNode`): Extra controls before Wrap and Copy: `CodeFrameProps.actions`.
- `className?` (`string`): Extra classes on the root element.
- `code` (`string`): The code to show, without the closing newline.
- `copyLabel?` (`string`): Accessible name of the copy button. Defaults to the frame's.
- `language` (`string`): A language name or alias (`plaintext` when the code names none).
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/code/HighlightedCode.tsx:22](https://github.com/Tahul/zidane/blob/main/ui/src/code/HighlightedCode.tsx#L22)