🎲 feat: support math katex highlighting (#27)

Author: pdsuwwz

.stylelintrc.cjs

@@ -30,6 +30,7 @@ module.exports = {
     'scss/double-slash-comment-whitespace-inside': 'always',
     'scss/dollar-variable-pattern': null,
 
+    'selector-type-no-unknown': null,
     'selector-pseudo-class-no-unknown': [
       true,
       {

README.md

@@ -1,6 +1,6 @@
 # chatgpt-vue3-light-mvp
 
-💭 一个可二次开发 Chat Bot 对话 Web 端原型模板, 基于 Vue3、Vite 6、TypeScript、Naive UI、Pinia、UnoCSS 等主流技术构建, 🧤简单集成大模型 API, 采用单轮 AI 问答对话模式, 每次提问独立响应, 无需上下文, 支持打字机效果流式输出, 集成 markdown-it, highlight.js 语法高亮预览, 💼 易于定制和快速搭建 Chat 类大语言模型产品
+💭 一个可二次开发 Chat Bot 对话 Web 端原型模板, 基于 Vue3、Vite 6、TypeScript、Naive UI、Pinia、UnoCSS 等主流技术构建, 🧤简单集成大模型 API, 采用单轮 AI 问答对话模式, 每次提问独立响应, 无需上下文, 支持打字机效果流式输出, 集成 markdown-it, highlight.js, 数学公式语法高亮预览, 💼 易于定制和快速搭建 Chat 类大语言模型产品
 
 
 __[🌈 Live Demo 在线体验](https://pdsuwwz.github.io/chatgpt-vue3-light-mvp)__
@@ -220,9 +220,10 @@ export const isGithubDeployed = process.env.VITE_ROUTER_MODE === 'hash'
 <details>
 <summary>使用本地 Ollama 大模型</summary><br>
 
-**Ollama3 大模型**：
+**Ollama 大模型**：
 - **安装**：Ollama3 不需要 API 密钥，只需要在本地安装并运行 Ollama 即可。请参考 Ollama 官方文档进行安装：[Ollama GitHub](https://github.com/ollama/ollama)
-- **运行**：运行 Ollama3 服务，直接执行 `ollama run llama3`, 运行后确保其在 `http://localhost:11434` 运行
+- **Ollama现已支持的大模型**：[模型列表](https://ollama.com/search)
+- **运行**：运行 Ollama3 服务，直接执行 `ollama run <模型名称>`, 如： `ollama run llama3`, 运行后确保其在 `http://localhost:11434` 运行
 
 ![image](https://github.com/user-attachments/assets/f3955060-a22d-4db8-b162-7393c10403f6)
 
@@ -346,6 +347,8 @@ export const defaultMockModelName = 'standard'
 /**
  * 项目默认使用模型，按需修改此字段即可
  */
+
+// export const defaultModelName = 'spark'
 export const defaultModelName = defaultMockModelName
 ```
 

package.json

@@ -60,6 +60,7 @@
     "@unocss/preset-rem-to-px": "^65.4.3",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vscode/markdown-it-katex": "~1.1.1",
     "@vue/babel-plugin-jsx": "^1.2.5",
     "@vue/compiler-sfc": "^3.5.13",
     "cross-env": "^7.0.3",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import MarkdownInstance from './plugins/markdown'
+import { renderMarkdownText } from './plugins/markdown'
 
 import type { CrossTransformFunction, TransformFunction } from './models'
 import { defaultMockModelName } from './models'
@@ -39,7 +39,7 @@ const refWrapperContent = ref<HTMLElement>()
 let typingAnimationFrame: number | null = null
 
 const renderedMarkdown = computed(() => {
-  return MarkdownInstance.render(displayText.value)
+  return renderMarkdownText(displayText.value)
 })
 
 
@@ -477,5 +477,9 @@ const emptyPlaceholder = computed(() => {
       margin: 0;
     }
   }
+
+  .katex {
+    --at-apply: c-primary;
+  }
 }
 </style>

src/components/MarkdownPreview/index.vue

@@ -80,6 +80,8 @@ export const defaultMockModelName = 'standard'
 /**
  * 项目默认使用模型，按需修改此字段即可
  */
+
+// export const defaultModelName = 'spark'
 export const defaultModelName = defaultMockModelName
 
 export const modelMappingList: TypesModelLLM[] = [
@@ -205,7 +207,7 @@ export const modelMappingList: TypesModelLLM[] = [
           messages: [
             {
               role: 'system',
-              content: '你叫小明同学，喜欢探索新的前端知识，目前正在学习 AI 大模型。我可以帮你解决任何前端方面的问题。'
+              content: '你叫小明同学，喜欢探索新的前端知识，目前正在学习 AI 大模型。你可以解决任何前端方面的问题。'
             },
             {
               'role': 'user',

src/components/MarkdownPreview/models/index.ts

@@ -1,19 +1,52 @@
 import MarkdownIt from 'markdown-it'
 import hljs from './highlight'
-
 import markdownItHighlight from 'markdown-it-highlightjs'
 import { preWrapperPlugin } from './preWrapper'
 
+import markdownItKatex from '@vscode/markdown-it-katex'
+import splitAtDelimiters from 'katex/contrib/auto-render/splitAtDelimiters'
+
+import 'katex/dist/katex.min.css'
+import 'katex/dist/contrib/mhchem.min.js'
+
 const md = new MarkdownIt({
   html: true,
   linkify: true,
   typographer: true
 })
 
+const transformMathMarkdown = (markdownText: string) => {
+  const data = splitAtDelimiters(markdownText, [
+    {
+      left: '\\[',
+      right: '\\]',
+      display: true
+    },
+    {
+      left: '\\(',
+      right: '\\)',
+      display: false
+    }
+  ])
+
+  return data.reduce((result, segment: any) => {
+    if (segment.type === 'text') {
+      return result + segment.data
+    }
+    const math = segment.display ? `$$${ segment.data }$$` : `$${ segment.data }$`
+    return result + math
+  }, '')
+}
+
+
 md.use(markdownItHighlight, {
   hljs
 }).use(preWrapperPlugin, {
   hasSingleTheme: true
-})
+}).use(markdownItKatex)
+
+export const renderMarkdownText = (content: string) => {
+  const transformedContent = transformMathMarkdown(content)
+  return md.render(transformedContent)
+}
 
-export default md

src/components/MarkdownPreview/plugins/markdown.ts

@@ -5,13 +5,11 @@ import { setupStore } from '@/store'
 
 import App from '@/App.vue'
 
-import InstallGlobalComponents from '@/components'
 
 const app = createApp(App)
 
 function setupPlugins() {
-  app
-    .use(InstallGlobalComponents)
+  // ...
 }
 
 async function setupApp() {