feat: added markdown rendering and code highlighting

package.json

@@ -21,6 +21,9 @@
  "@microsoft/fetch-event-source": "^2.0.1",
  "@multiavatar/multiavatar": "^1.0.7",
  "@tauri-apps/api": "^1.2.0",
+ "@types/marked": "^4.0.8",
+ "highlight.js": "^11.7.0",
+ "marked": "^4.2.12",
  "pinia": "^2.0.33",
  "pinia-plugin-persistedstate": "^3.1.0",
  "tauri-plugin-autostart-api": "https://github.com/tauri-apps/tauri-plugin-autostart",

src/components/Session/index.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
+import { marked } from 'marked'
 import { useSettingsStore, useSessionStore, useRoleStore } from '@/stores'
 
+marked.setOptions({
+ renderer: new marked.Renderer(), // 这是必填项
+ gfm: true, // 启动类似于Github样式的Markdown语法
+ pedantic: false, // 只解析符合Markdwon定义的，不修正Markdown的错误
+ sanitize: false // 原始输出，忽略HTML标签（关闭后，可直接渲染HTML标签）
+})
+
 const { uuid } = storeToRefs(useSettingsStore())
 const { currentSession, sessionDataList, streamReply } = storeToRefs(
  useSessionStore()
@@ -14,17 +22,18 @@ const { currentRole } = storeToRefs(useRoleStore())
  <template v-if="sessionDataList.length">
  <h3>当前session{{ currentSession?.id }}{{ currentSession?.title }}</h3>
  <div
- class="flex items-start p-2"
+ class="flex items-start gap-4 p-2"
  v-for="item in sessionDataList"
  :key="item.time"
  >
- <Avatar class="w-14!" :value="item.is_ask ? uuid : currentRole?.name" />
- <div>
- {{ item.message }}
- </div>
+ <Avatar class="w-12!" :value="item.is_ask ? uuid : currentRole?.name" />
+ <div
+ v-highlight
+ class="flex flex-1 flex-col gap-3.5 py-[11.5px] leading-6"
+ v-html="marked(JSON.parse(item.message as any).content)"
+ ></div>
  </div>
  <div>
- <p>正在回答</p>
  <p>{{ streamReply }}</p>
  </div>
  </template>

src/main.ts

@@ -1,9 +1,22 @@
 import { createApp } from 'vue'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import App from './App.vue'
+import hljs from 'highlight.js'
 import '@arco-design/web-vue/es/message/style/css.js'
 import 'uno.css'
+import 'highlight.js/styles/github-dark-dimmed.css'
 import '@kidonng/daisyui/index.css'
 import './assets/css/global.scss'
 
-createApp(App).use(createPinia().use(piniaPluginPersistedstate)).mount('#app')
+const app = createApp(App)
+
+app.directive('highlight', {
+ mounted(el) {
+ const blocks = el.querySelectorAll('pre code')
+ blocks.forEach((block: any) => {
+ hljs.highlightBlock(block)
+ })
+ }
+})
+
+app.use(createPinia().use(piniaPluginPersistedstate)).mount('#app')