feat: markdown 支持公式渲染 Closes #7833

docs/zh-CN/components/markdown.md

@@ -81,6 +81,30 @@ order: 58
 
 可以使用 `![text](video.mp4)` 语法来嵌入视频。
 
+## 支持 latex
+
+> 3.6.0 及以上版本
+
+公式渲染使用 KaTeX 实现，由于体积太大默认不提供，需要自己去[下载](https://github.com/KaTeX/KaTeX/releases)，在页面中引入以下三个文件：
+
+```
+<link rel="stylesheet" href="katex/katex.min.css">
+<script src="katex/katex.min.js"></script>
+<script src="katex/contrib/auto-render.min.js"></script>
+```
+
+markdown 中的 `$` 或 `$$` 包裹的内容就能以公式展现，比如 `$\sqrt{a^2 + b^2}$`，如果是在代码中 `\` 要转义为 `\\`
+
+```schema
+{
+    "type": "page",
+    "body": {
+        "type": "markdown",
+        "value": "$$\\hat{f} (\\xi)=\\int_{-\\infty}^{\\infty}f(x)e^{-2\\pi ix\\xi}dx$$"
+    }
+}
+```
+
 ## 高级配置
 
 > 1.8.1 及以上版本

index.html

@@ -24,6 +24,7 @@
       rel="stylesheet"
       href="/node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
     />
+    <link rel="stylesheet" href="/node_modules/katex/dist/katex.min.css" />
     <link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
     <link rel="stylesheet" href="/examples/doc.css" />
 
@@ -93,5 +94,10 @@
       const initialState = {};
       bootstrap(document.getElementById('root'), initialState);
     </script>
+    <script defer src="/node_modules/katex/dist/katex.min.js"></script>
+    <script
+      defer
+      src="/node_modules/katex/dist/contrib/auto-render.min.js"
+    ></script>
   </body>
 </html>

package.json

@@ -40,9 +40,9 @@
     ]
   },
   "dependencies": {
+    "path-to-regexp": "^6.2.0",
     "postcss": "^8.4.14",
-    "qs": "6.9.7",
-    "path-to-regexp": "^6.2.0"
+    "qs": "6.9.7"
   },
   "devDependencies": {
     "@babel/generator": "^7.22.9",
@@ -79,6 +79,7 @@
     "jest": "^29.0.3",
     "jest-environment-jsdom": "^29.0.3",
     "js-yaml": "^4.1.0",
+    "katex": "^0.16.9",
     "lerna": "^6.6.2",
     "lint-staged": "^12.1.2",
     "magic-string": "^0.26.7",

packages/amis-ui/src/components/Markdown.tsx

@@ -55,6 +55,17 @@ export default class Markdown extends React.Component<MarkdownProps> {
   async _render() {
     const {content, options} = this.props;
     this.dom.innerHTML = markdown(content, options);
+
+    // @ts-ignore 需要用户手动加载 katex
+    if (typeof renderMathInElement === 'function') {
+      // @ts-ignore
+      renderMathInElement(this.dom, {
+        delimiters: [
+          {left: '$$', right: '$$', display: true},
+          {left: '$', right: '$', display: false}
+        ]
+      });
+    }
   }
 
   render() {