From 3828d4cd2207c7f0d32afe1c88225cdb70e66bc4 Mon Sep 17 00:00:00 2001
From: Nam Vu <zuzoovn@gmail.com>
Date: Tue, 18 Jun 2024 09:43:47 +0700
Subject: [PATCH] feat: support Latex (#5001)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
---
 web/app/components/base/markdown.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/markdown.tsx b/web/app/components/base/markdown.tsx
index 054ae04f6f..3548232ad3 100644
--- a/web/app/components/base/markdown.tsx
+++ b/web/app/components/base/markdown.tsx
@@ -39,6 +39,11 @@ const getCorrectCapitalizationLanguageName = (language: string) => {
 
   return language.charAt(0).toUpperCase() + language.substring(1)
 }
+
+const preprocessLaTeX = (content: string) =>
+  content.replace(/\\\[(.*?)\\\]/gs, (_, equation) => `$$${equation}$$`)
+    .replace(/\\\((.*?)\\\)/gs, (_, equation) => `$${equation}$`)
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null)
 
@@ -82,12 +87,13 @@ const useLazyLoad = (ref: RefObject<Element>): boolean => {
 
 export function Markdown(props: { content: string; className?: string }) {
   const [isSVG, setIsSVG] = useState(false)
+  const latexContent = preprocessLaTeX(props.content)
   return (
     <div className={cn(props.className, 'markdown-body')}>
       <ReactMarkdown
         remarkPlugins={[[RemarkMath, { singleDollarTextMath: false }], RemarkGfm, RemarkBreaks]}
         rehypePlugins={[
-          RehypeKatex,
+          RehypeKatex as any,
         ]}
         components={{
           code({ inline, className, children, ...props }) {
@@ -179,7 +185,7 @@ export function Markdown(props: { content: string; className?: string }) {
         linkTarget='_blank'
       >
         {/* Markdown detect has problem. */}
-        {props.content}
+        {latexContent}
       </ReactMarkdown>
     </div>
   )