UI kit reference

code/HighlightedCode

import { … } from 'zidane-ui'ui/src/code/HighlightedCode.tsx

Components#

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

TypeScript

function HighlightedCode(props: HighlightedCodeProps): Element

Parameters
Name	Type	Description
props	`HighlightedCodeProps`	The `HighlightedCodeProps`.

Element

HighlightedCode props
Name	Type	Description
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.

TypeScript

interface HighlightedCodeProps

HighlightedCodeProps properties
Name	Type	Description
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.