feat: add latex rendering (#247)

* feat: add latex rendering * perf: 提升 css 引入路径 --------- Co-authored-by: ChenZhaoYu <[email protected]>
Chanzhaoyu · Mar 4, 2023 · 2293969 · 2293969
1 parent f7f87e2
commit 2293969
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 0 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -31,6 +31,7 @@
     "GPTAPI",
     "hljs",
     "iconify",
+    "katex",
     "logprobs",
     "nodata",
     "OPENAI",

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@vueuse/core": "^9.13.0",
     "highlight.js": "^11.7.0",
+    "katex": "^0.16.4",
     "marked": "^4.2.12",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.32",
@@ -38,6 +39,7 @@
     "@commitlint/config-conventional": "^17.4.4",
     "@iconify/vue": "^4.1.0",
     "@types/crypto-js": "^4.1.1",
+    "@types/katex": "^0.16.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^18.14.4",
     "@vitejs/plugin-vue": "^4.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/plugins/assets.ts b/src/plugins/assets.ts
@@ -1,3 +1,4 @@
+import 'katex/dist/katex.min.css'
 import '@/styles/lib/tailwind.css'
 import '@/styles/lib/highlight.less'
 import '@/styles/lib/github-markdown.less'

diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
+import katex from 'katex'
 import { marked } from 'marked'
 import hljs from 'highlight.js'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
@@ -41,6 +42,54 @@ marked.setOptions({
   },
 })
 
+const katexOptions = {
+  throwOnError: false,
+}
+
+const katexInline = {
+  name: 'katexInline',
+  level: 'inline',
+  start(src: string) {
+    return src.indexOf('$')
+  },
+  tokenizer(src: string) {
+    const match = src.match(/^\$+([^$\n]+?)\$+/)
+    if (match) {
+      return {
+        type: 'katexInline',
+        raw: match[0],
+        text: match[1].trim(),
+      }
+    }
+  },
+  renderer(token: marked.Tokens.Generic) {
+    return katex.renderToString(token.text, katexOptions)
+  },
+}
+
+const katexBlock = {
+  name: 'katexBlock',
+  level: 'block',
+  start(src: string) {
+    return src.indexOf('\n$$')
+  },
+  tokenizer(src: string) {
+    const match = src.match(/^\$\$+\n([^$]+?)\n\$\$+\n/)
+    if (match) {
+      return {
+        type: 'katexBlock',
+        raw: match[0],
+        text: match[1].trim(),
+      }
+    }
+  },
+  renderer(token: marked.Tokens.Generic) {
+    return `<p>${katex.renderToString(token.text, katexOptions)}</p>`
+  },
+}
+
+marked.use({ extensions: [katexInline, katexBlock] })
+
 const wrapClass = computed(() => {
   return [
     'text-wrap',