The Highlighter component is used to display syntax-highlighted code blocks. It takes in the code content as a string and the language of the code as a string. The component allows users to copy the code content and can also display the language tag. The code block can have a background and the theme can be set to either 'dark' or 'light'.
Highlighter
import { Highlighter } from '@lobehub/ui';Default
tsx
export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}Full Featured
tsx
export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}Actions Render
tsx
export default ({ children, className }: MarkdownProps) => {
const { styles } = useStyles();
return (
<ReactMarkdown
className={cx(styles.container, className)}
components={{ pre: CodeBlock, code: Code }}
>
{children}
</ReactMarkdown>
);
}APIs
| Name | Description | Type | Default |
|---|---|---|---|
| actionsRender | -- | (props:{ actionIconSize: any; content: string; language: string; originalNode: React.ReactNode; })=>ReactNode | -- |
| allowChangeLanguage | -- | boolean | -- |
| bodyRender | -- | (props:{ content: string; language: string; originalNode: React.ReactNode; })=>ReactNode | -- |
| children | The code content to be highlighted | string | (required) |
| copyButtonSize | -- | any | -- |
| copyable | Whether to show the copy button | boolean | true |
| defalutExpand | Whether to expand code blocks by default | boolean | true |
| fileName | -- | string | -- |
| fullFeatured | -- | boolean | -- |
| icon | -- | ReactNode | -- |
| language | The language of the code content | string | (required) |
| showLanguage | Whether to show language tag | boolean | true |
| spotlight | Whether add spotlight background | boolean | false |
| type | The type of the code block | "ghost"|"block"|"pure" | "block" |
| wrap | -- | boolean | -- |