fix: 🐛 svg attr support

Author: Cat1007

.changeset/clear-facts-stand.md

@@ -0,0 +1,5 @@
+---
+'vue-markdown-next': patch
+---
+
+fix: inline svg attr support

packages/docs/example/components.vue

@@ -2,7 +2,8 @@
   <Markdown
     :content="testContent"
     :components="components"
-    :rehype-plugins="[[rehypeMermaid, { strategy: 'img-png' }]]"
+    :remark-plugins="[remarkMath]"
+    :rehype-plugins="[[rehypeMermaid, { strategy: 'inline-svg' }], rehypeKatex]"
   >
     <template #hr>
       <t-divider align="left">Using TDesign Divider</t-divider>
@@ -20,6 +21,11 @@
 import { Markdown, VNodeRenderer } from 'vue-markdown-next';
 import { Divider as TDivider } from 'tdesign-vue-next';
 import rehypeMermaid from 'rehype-mermaid';
+import remarkMath from 'remark-math';
+// choose your favorite solution
+// import rehypeMathjax from 'rehype-mathjax';
+import rehypeKatex from 'rehype-katex';
+import 'katex/dist/katex.min.css';
 import { components } from './components';
 
 const testContent = `
@@ -38,6 +44,30 @@ graph TD;
     C-->D;
 \`\`\`
 
+以下是一段Markdown格式的LaTeX数学公式：
+
+我是一个行内公式：$E=mc^2$
+
+我是一个独立公式：
+$$
+\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n
+$$
+
+我是一个带有分式的公式：
+$$
+\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k}
+$$
+
+我是一个带有上下标的公式：
+$$
+x^{2} + y^{2} = r^{2}
+$$
+
+我是一个带有积分符号的公式：
+$$
+\\int_{a}^{b} f(x) \\, dx
+$$
+
 
 - Red
 - Green

packages/docs/package.json

@@ -13,10 +13,14 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "katex": "^0.16.21",
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.49",
+    "rehype-katex": "^7.0.1",
+    "rehype-mathjax": "^7.1.0",
     "rehype-mermaid": "^3.0.0",
     "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "tdesign-vue-next": "^1.10.6",
     "unplugin-auto-import": "^0.19.0",
     "unplugin-vue-components": "^0.28.0",

packages/markdown/src/markdown.tsx

@@ -234,6 +234,7 @@ export default defineComponent({
             ...props.components,
             ...componentsWithSlot.value,
           },
+          elementAttributeNameCase: 'html',
           ignoreInvalidStyle: true,
           jsx: jsxWithChildren,
           jsxs: jsxWithChildren,