diff --git a/src/components/ChatUI/CodeHighlight.tsx b/src/components/ChatUI/CodeHighlight.tsx index 1cef7c7d..e52f785f 100644 --- a/src/components/ChatUI/CodeHighlight.tsx +++ b/src/components/ChatUI/CodeHighlight.tsx @@ -22,8 +22,9 @@ export const CodeHighlight = ({ node, ...props }: CodeHighlightProps): JSX.Element => { - const [highlightedCode, setHighlightedCode] = - useState(null); + const [highlightedCode, setHighlightedCode] = useState( + null + ); const theme: BundledTheme = 'catppuccin-mocha'; const code = String(children); const match = className?.match(/language-(\w+)/); @@ -33,18 +34,40 @@ export const CodeHighlight = ({ useEffect(() => { if (!isInline) { - codeToHtml(code, { - lang: language as BundledLanguage, - theme, - transformers: [removeTabIndexFromPre], - }).then((html) => setHighlightedCode(parse(html))); + const highlightCode = async () => { + try { + const html = await codeToHtml(code, { + lang: language as BundledLanguage, + theme, + transformers: [removeTabIndexFromPre], + }); + setHighlightedCode(parse(html)); + } catch (error) { + if ( + error instanceof ShikiError && + error.message.includes('Language') + ) { + const fallbackHtml = await codeToHtml(code, { + lang: 'plaintext', + theme, + transformers: [removeTabIndexFromPre], + }); + setHighlightedCode(parse(fallbackHtml)); + } else { + console.error('Unexpected Shiki error:', error); + throw error; + } + } + }; + + highlightCode(); } }, [code]); return !isInline ? ( -
+
{language ? ( - + {language} ) : null}