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
import { useTheme } from 'antd-style';
import mermaid from 'mermaid';
import { useCallback, useEffect, useState } from 'react';
export const useMermaid = (content: string) => {
const [mermaidContent, setMermaidContent] = useState<string>();
const theme = useTheme();
useEffect(() => {
mermaid.initialize({
fontFamily: theme.fontFamilyCode,
gantt: {
useWidth: 1920,
},
securityLevel: 'loose',
startOnLoad: true,
theme: theme.isDarkMode ? 'dark' : 'default',
themeVariables: {
errorBkgColor: theme.colorError,
errorTextColor: theme.colorText,
fontSize: 14,
lineColor: theme.colorText,
primaryBorderColor: theme.colorPrimaryBorder,
primaryColor: theme.colorPrimaryBg,
primaryTextColor: theme.colorText,
secondaryColor: theme.colorInfo,
tertiaryColor: theme.colorSuccess,
},
});
mermaid.contentLoaded();
}, [mermaidContent, theme.isDarkMode]);
const checkSyntax = async (textStr: string) => {
try {
if (await mermaid.parse(textStr)) {
setMermaidContent(textStr);
}
} catch {}
};
useEffect(() => {
checkSyntax(content);
}, [content]);
return useCallback(() => {
return (
<pre
className={'mermaid'}
style={{
alignItems: 'center',
display: 'flex',
fontSize: 14,
justifyContent: 'center',
overflow: 'auto',
}}
>
{mermaidContent}
</pre>
);
}, [mermaidContent, theme.isDarkMode]);
};Full Featured
tsx
import { useTheme } from 'antd-style';
import mermaid from 'mermaid';
import { useCallback, useEffect, useState } from 'react';
export const useMermaid = (content: string) => {
const [mermaidContent, setMermaidContent] = useState<string>();
const theme = useTheme();
useEffect(() => {
mermaid.initialize({
fontFamily: theme.fontFamilyCode,
gantt: {
useWidth: 1920,
},
securityLevel: 'loose',
startOnLoad: true,
theme: theme.isDarkMode ? 'dark' : 'default',
themeVariables: {
errorBkgColor: theme.colorError,
errorTextColor: theme.colorText,
fontSize: 14,
lineColor: theme.colorText,
primaryBorderColor: theme.colorPrimaryBorder,
primaryColor: theme.colorPrimaryBg,
primaryTextColor: theme.colorText,
secondaryColor: theme.colorInfo,
tertiaryColor: theme.colorSuccess,
},
});
mermaid.contentLoaded();
}, [mermaidContent, theme.isDarkMode]);
const checkSyntax = async (textStr: string) => {
try {
if (await mermaid.parse(textStr)) {
setMermaidContent(textStr);
}
} catch {}
};
useEffect(() => {
checkSyntax(content);
}, [content]);
return useCallback(() => {
return (
<pre
className={'mermaid'}
style={{
alignItems: 'center',
display: 'flex',
fontSize: 14,
justifyContent: 'center',
overflow: 'auto',
}}
>
{mermaidContent}
</pre>
);
}, [mermaidContent, theme.isDarkMode]);
};Actions Render
tsx
import { useTheme } from 'antd-style';
import mermaid from 'mermaid';
import { useCallback, useEffect, useState } from 'react';
export const useMermaid = (content: string) => {
const [mermaidContent, setMermaidContent] = useState<string>();
const theme = useTheme();
useEffect(() => {
mermaid.initialize({
fontFamily: theme.fontFamilyCode,
gantt: {
useWidth: 1920,
},
securityLevel: 'loose',
startOnLoad: true,
theme: theme.isDarkMode ? 'dark' : 'default',
themeVariables: {
errorBkgColor: theme.colorError,
errorTextColor: theme.colorText,
fontSize: 14,
lineColor: theme.colorText,
primaryBorderColor: theme.colorPrimaryBorder,
primaryColor: theme.colorPrimaryBg,
primaryTextColor: theme.colorText,
secondaryColor: theme.colorInfo,
tertiaryColor: theme.colorSuccess,
},
});
mermaid.contentLoaded();
}, [mermaidContent, theme.isDarkMode]);
const checkSyntax = async (textStr: string) => {
try {
if (await mermaid.parse(textStr)) {
setMermaidContent(textStr);
}
} catch {}
};
useEffect(() => {
checkSyntax(content);
}, [content]);
return useCallback(() => {
return (
<pre
className={'mermaid'}
style={{
alignItems: 'center',
display: 'flex',
fontSize: 14,
justifyContent: 'center',
overflow: 'auto',
}}
>
{mermaidContent}
</pre>
);
}, [mermaidContent, theme.isDarkMode]);
};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 |
| enableTransformer | -- | boolean | -- |
| 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 | -- |