改进 markdown 渲染

package.json

@@ -26,6 +26,7 @@
   "devDependencies": {
     "@babel/types": "^7.18.10",
     "@openapitools/openapi-generator-cli": "^2.13.5",
+    "@shikijs/markdown-it": "^1.17.6",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.5.4",
     "@vicons/ionicons5": "^0.12.0",
@@ -45,6 +46,7 @@
     "naive-ui": "^2.39.0",
     "postcss": "^8.4.45",
     "prettier": "^3.3.3",
+    "shiki": "^1.17.6",
     "tailwindcss": "^3.4.10",
     "typescript": "^5.5.2",
     "unplugin-auto-import": "^0.18.2",

src/components/chat/MessageList.vue

@@ -32,7 +32,7 @@
             :plugins="markdownPlugins"
           /> -->
             <!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> -->
-            <div v-html="mdIt.render(message.content)"></div>
+            <div v-if="mdInited" class="markdown-body" v-html="mdIt.render(message.content)"></div>
             <div class="relative h-full">
               <n-avatar
                 round
@@ -48,7 +48,6 @@
         <!-- 助理消息 -->
         <n-flex justify="start" class="!flex-nowrap">
           <div class="relative h-full">
- 
             <n-avatar
               round
               size="large"
@@ -66,7 +65,13 @@
 
             <!-- <div v-html="mdIt.render('# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$')"></div> -->
 
-            <div v-html="mdIt.render(message.content)"></div>
+            <!-- 当 message.content 变化时，重新渲染  -->
+            <div
+              v-if="mdInited"
+              class="break-all break-words markdown-body"
+              v-html="mdIt.render(message.content)"
+            ></div>
+            <!-- <div v-html="mdIt.render(message.content)"></div> -->
 
             <!-- <v-md-preview :text="message.content" height="500px"></v-md-preview> -->
           </div>
@@ -88,23 +93,37 @@ import markdownIt from "markdown-it";
 // highlightjs
 import hljs from "highlight.js";
 import config from "@/config/config";
+import Shiki from "@shikijs/markdown-it";
 
 const mdIt = markdownIt();
+const mdInited = ref(false);
 
 // set options
-mdIt.options.highlight = function (str: string, lang: string) {
+// mdIt.options.highlight = function (str: string, lang: string) {
-  if (!lang) {
+//   if (!lang) {
-    return "";
+//     return "";
-  }
+//   }
-  return hljs.highlight(str, { language: lang }).value;
+//   return hljs.highlight(str, { language: lang }).value;
-};
+// };
 
-mdIt.use(markdownKatex, {
+async function initMD() {
-  throwOnError: false,
+  mdIt.use(
-  errorColor: "#cc0000",
+    await Shiki({
-  output: "html",
+      themes: {
-});
+        light: "vitesse-light",
+        dark: "vitesse-dark",
+      },
+    })
+  );
 
+  mdIt.use(markdownKatex, {
+    throwOnError: false,
+    errorColor: "#cc0000",
+    output: "html",
+  });
+
+  mdInited.value = true;
+}
 const userStore = useUserStore();
 
 const props = defineProps({
@@ -116,4 +135,8 @@ const props = defineProps({
 
 const chat_messages = toRef(props, "chat_messages") as Ref<EntityChatMessage[]>;
 const fileBaseUrl = config.backend + "/api/v1/files";
+
+onMounted(() => {
+  initMD();
+});
 </script>

src/style.css

@@ -1,5 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap");
-
+@import "styles/github-markdown.css";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -33,8 +33,18 @@ body {
   font-style: normal;
 }
 
-
 @font-face {
   font-family: "Jetbrains Mono";
   src: url("/src/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
+
+.markdown-body pre > code {
+  font-family: "Jetbrains Mono", monospace;
+  /* 强制换行 */
+  white-space: pre-wrap;
+  /* background-color: #f5f5f5; */
+}
+
+.markdown-body ol {
+  list-style: decimal;
 }