import { CodeHighlighter } from '@uhg-abyss/web/ui/CodeHighlighter';<CodeHighlighter code="console.log('hello world!');" language="js" />Language
Use the language prop to set the desired language for highlighting. See the following documentation 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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| code | string | The code to be highlighted | |
| language | string | jsx | The type of coding language to highlight |
| showBorder | boolean | true | Display border around code block |
| showLineNumbers | boolean | false | Display line numbers |
| theme | shape | - | The theme used for the highlighter |
CodeHighlighter Classes
| Class Name | Description |
|---|---|
| .abyss-code-highlighter-root | CodeHighlighter root element |