feat: 输入内容支持数学公式

package.json

@@ -31,9 +31,11 @@
     "github-markdown-css": "^5.7.0",
     "highlight.js": "^11.10.0",
     "howler": "^2.2.4",
+    "katex": "^0.16.21",
     "lodash-es": "^4.17.21",
     "marked": "^15.0.0",
     "marked-highlight": "^2.2.1",
+    "marked-katex-extension": "^5.1.4",
     "mitt": "^3.0.1",
     "nanoid": "^5.0.7",
     "pinia": "^2.2.2",

src/components/markdown-render/markdown-render.vue

@@ -2,6 +2,8 @@
 import { computed, ref, watchEffect } from 'vue'
 import { Marked } from 'marked'
 import { markedHighlight } from 'marked-highlight'
+import markedKatex, { MarkedKatexOptions } from 'marked-katex-extension'
+import 'katex/dist/katex.min.css'
 import { throttle } from 'lodash-es'
 import DOMPurify from 'dompurify'
 import hljs from 'highlight.js'
@@ -20,7 +22,14 @@ const props = withDefaults(defineProps<Props>(), {
   color: '#333',
 })
 
-const marked = new Marked(
+const katexOptions: MarkedKatexOptions = {
+  throwOnError: false,
+  displayMode: true,
+  nonStandard: true,
+  output: 'html',
+}
+
+const marked = new Marked().use(
   markedHighlight({
     emptyLangClass: 'hljs',
     langPrefix: 'hljs language-',
@@ -30,7 +39,9 @@ const marked = new Marked(
       return hljs.highlight(code, { language }).value
     },
   }),
-).use({ gfm: true, async: true })
+  { gfm: true, async: true },
+  markedKatex(katexOptions),
+)
 
 const renderTextContent = ref('')
 
@@ -63,8 +74,10 @@ watchEffect(() => {
 </template>
 
 <style lang="scss" scoped>
+@include custom-scrollbar(6px);
+
 .article-container {
-  // letter-spacing: 0.1ch;
+  overflow-x: auto;
   font-family: 'Microsoft YaHei UI';
   word-break: break-all;
   background-color: unset;

vite.config.ts

@@ -46,6 +46,7 @@ export default defineConfig(({ command, mode }) => {
             'github-markdown-css': ['github-markdown-css'],
             'marked-highlight': ['marked-highlight'],
             echarts: ['echarts'],
+            katex: ['katex', 'marked-katex-extension'],
           },
         },
       },