From 37235315e14b51d1e163147d32bc1946e30c486b Mon Sep 17 00:00:00 2001 From: balibabu Date: Thu, 16 Jan 2025 15:13:40 +0800 Subject: [PATCH] Fix: Fixed an issue where math formulas could not be displayed correctly #4405 (#4506) ### What problem does this PR solve? [remarkjs/react-markdown/issues/785](https://github.com/remarkjs/react-markdown/issues/785) Fix: Fixed an issue where math formulas could not be displayed correctly #4405 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue) --- web/src/components/highlight-markdown/index.tsx | 3 ++- web/src/pages/chat/markdown-content/index.tsx | 4 +++- web/src/utils/chat.ts | 15 +++++++++++++++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/web/src/components/highlight-markdown/index.tsx b/web/src/components/highlight-markdown/index.tsx index 8f754fdfc..5147a03ea 100644 --- a/web/src/components/highlight-markdown/index.tsx +++ b/web/src/components/highlight-markdown/index.tsx @@ -8,6 +8,7 @@ import remarkMath from 'remark-math'; import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you +import { preprocessLaTeX } from '@/utils/chat'; import styles from './index.less'; const HightLightMarkdown = ({ @@ -43,7 +44,7 @@ const HightLightMarkdown = ({ } as any } > - {children} + {children ? preprocessLaTeX(children) : children} ); }; diff --git a/web/src/pages/chat/markdown-content/index.tsx b/web/src/pages/chat/markdown-content/index.tsx index b265656fd..02ec95a6b 100644 --- a/web/src/pages/chat/markdown-content/index.tsx +++ b/web/src/pages/chat/markdown-content/index.tsx @@ -20,7 +20,9 @@ import { useTranslation } from 'react-i18next'; import 'katex/dist/katex.min.css'; // `rehype-katex` does not import the CSS for you +import { preprocessLaTeX } from '@/utils/chat'; import { replaceTextByOldReg } from '../utils'; + import styles from './index.less'; const reg = /(~{2}\d+={2})/g; @@ -48,7 +50,7 @@ const MarkdownContent = ({ text = t('chat.searching'); } const nextText = replaceTextByOldReg(text); - return loading ? nextText?.concat('~~2$$') : nextText; + return loading ? nextText?.concat('~~2$$') : preprocessLaTeX(nextText); }, [content, loading, t]); useEffect(() => { diff --git a/web/src/utils/chat.ts b/web/src/utils/chat.ts index 44a5c4b30..d8f956d2f 100644 --- a/web/src/utils/chat.ts +++ b/web/src/utils/chat.ts @@ -34,3 +34,18 @@ export const buildMessageUuidWithRole = ( ) => { return `${message.role}_${message.id}`; }; + +// Preprocess LaTeX equations to be rendered by KaTeX +// ref: https://github.com/remarkjs/react-markdown/issues/785 + +export const preprocessLaTeX = (content: string) => { + const blockProcessedContent = content.replace( + /\\\[([\s\S]*?)\\\]/g, + (_, equation) => `$$${equation}$$`, + ); + const inlineProcessedContent = blockProcessedContent.replace( + /\\\(([\s\S]*?)\\\)/g, + (_, equation) => `$${equation}$`, + ); + return inlineProcessedContent; +};