import { CodeHighlighter } from '@uhg-abyss/web/ui/CodeHighlighter';

code

language

showLineNumbers

() => {
  return <CodeHighlighter code="console.log('hello world!');" language="js" />;
};

Language

Use the language prop to set the desired language for highlighting. See the following documentationopens in a new window for the complete list of supported languages and their corresponding values. Default value is set to jsx (React JSX).

Show line numbers

Use the showLineNumbers prop to display line numbers within your highlighted code block.

CodeHighlighter Props

Name	Type	Default	Description
className	string | undefined		CSS class name to apply to each element within the component
code	string | undefined	''	The code to be highlighted.
css	CSSProperties | Partial<Record<"abyss-code-highlighter-root" | "abyss-code-highlighter" | "abyss-code-highlighter-copy", CSSProperties>> | undefined		Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string | undefined		Suffix used to create a unique ID used for automated testing See Component Testing for more information
hiddenFrom	Breakpoint | undefined		When defined, the component is hidden once the screen width reaches the specified breakpoint.
language	string | undefined	'jsx'	The language of the code to be highlighted.
maxHeight	string | number | undefined		The maximum height of the code highlighter.
onCopy	((event: ClipboardEvent<HTMLDivElement>) => void) | undefined		Function to be called when the code is copied.
showLineNumbers	boolean | undefined	false	Whether or not to show line numbers.
slotProps	Partial<Record<string, SlotPropsValue<string>>> | undefined		Props to pass to individual internal slots of the component, keyed by the slot name (e.g. 'button-root'). Supports className, css, style, aria-*, data-*, data-testid, and nested slotProps for child Abyss components. See slotProps for more information
theme	Theme | undefined	codeTheme	The theme to be used for highlighting.
visibleFrom	Breakpoint | undefined		When defined, the component is hidden until the screen width reaches the specified breakpoint.

CodeHighlighter Classes

Class Name	Description
.abyss-code-highlighter	Highlighted code content, rendered line by line
.abyss-code-highlighter-copy	Button that copies the highlighted code to the clipboard
.abyss-code-highlighter-root	CodeHighlighter root element