feat: add latex rendering (#247)

* feat: add latex rendering * perf: 提升 css 引入路径 --------- Co-authored-by: ChenZhaoYu <[email protected]>
huangzonggui · 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',