feature: add formula rander in the markdown (#611)

* feature: add formula rander in the markdown

* fixed the lint errors

web/src/components/deer-flow/markdown.tsx

@@ -13,6 +13,7 @@ import "katex/dist/katex.min.css";
 
 import { Button } from "~/components/ui/button";
 import { rehypeSplitWordsIntoSpans } from "~/core/rehype";
+import { katexOptions } from "~/core/markdown/katex";
 import { autoFixMarkdown } from "~/core/utils/markdown";
 import { cn } from "~/lib/utils";
 
@@ -50,11 +51,15 @@ export function Markdown({
     };
   }, [checkLinkCredibility]);
 
-  const rehypePlugins = useMemo(() => {
+  const rehypePlugins = useMemo<NonNullable<ReactMarkdownOptions["rehypePlugins"]>>(() => {
+    const plugins: NonNullable<ReactMarkdownOptions["rehypePlugins"]> = [[
+      rehypeKatex,
+      katexOptions,
+    ]];
     if (animated) {
-      return [rehypeKatex, rehypeSplitWordsIntoSpans];
+      plugins.push(rehypeSplitWordsIntoSpans);
     }
-    return [rehypeKatex];
+    return plugins;
   }, [animated]);
   return (
     <div className={cn(className, "prose dark:prose-invert")} style={style}>

web/src/core/markdown/katex.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+// SPDX-License-Identifier: MIT
+
+import type { Options as RehypeKatexOptions } from "rehype-katex";
+
+import "katex/contrib/mhchem";
+
+const macros = {
+  "\\vect": "\\mathbf{#1}",
+  "\\mat": "\\mathbf{#1}",
+  "\\grad": "\\nabla #1",
+  "\\div": "\\nabla \\cdot #1",
+  "\\curl": "\\nabla \\times #1",
+  "\\dv": "\\frac{d #1}{d #2}",
+  "\\pdv": "\\frac{\\partial #1}{\\partial #2}",
+  "\\pdvN": "\\frac{\\partial^{#3} #1}{\\partial #2^{#3}}",
+  "\\abs": "\\left|#1\\right|",
+  "\\norm": "\\left\\lVert#1\\right\\rVert",
+  "\\set": "\\left\\{#1\\right\\}",
+  "\\bra": "\\left\\langle#1\\right|",
+  "\\ket": "\\left|#1\\right\\rangle",
+  "\\braket": "\\left\\langle#1\\middle|#2\\right\\rangle",
+  "\\matrix": "\\begin{pmatrix}#1\\end{pmatrix}",
+} as const;
+
+export const katexOptions: RehypeKatexOptions = {
+  macros,
+  strict: "ignore",
+  trust: (context) => context.command === "\\htmlClass" || context.command === "\\href",
+};
+
+export type KatexMacroKey = keyof typeof macros;