feat: added markdown rendering and code highlighting (#5)

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')