From b94fa6e1c1f2b79c4729a54ba8b6b09240edf4b4 Mon Sep 17 00:00:00 2001
From: Twilight <im@ivampiresp.com>
Date: Thu, 26 Sep 2024 15:18:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=20shiki=EF=BC=8C=E6=9B=B4?=
 =?UTF-8?q?=E6=8D=A2=20highlight.js=20=E4=BF=AE=E5=A4=8D=20=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=AF=AD=E8=A8=80=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  2 -
 src/components/chat/MessageList.vue | 69 ++++++++++++++++-------------
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 20c2722..85d3ff7 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
   "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",
@@ -47,7 +46,6 @@
     "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",
diff --git a/src/components/chat/MessageList.vue b/src/components/chat/MessageList.vue
index c3dd06d..a302ebd 100644
--- a/src/components/chat/MessageList.vue
+++ b/src/components/chat/MessageList.vue
@@ -15,13 +15,13 @@
                 </n-divider>
               </div>
               <n-image
-                v-if="message.file && message.file.mime_type?.startsWith('image/')"
+                v-if="
+                  message.file && message.file.mime_type?.startsWith('image/')
+                "
                 width="100"
                 :src="fileBaseUrl + '/download/' + message.file.file_hash"
               />
-              <n-text italic depth="3" v-else>
-                你上传了一个文件
-              </n-text>
+              <n-text italic depth="3" v-else> 你上传了一个文件 </n-text>
             </div>
 
             <div class="relative h-full">
@@ -77,7 +77,7 @@
               round
               size="large"
               :src="leaflowPng"
-              class="min-w-10 min-h-10 p-1.5 absolute top-0 !bg-transparent "
+              class="min-w-10 min-h-10 p-1.5 absolute top-0 !bg-transparent"
             />
           </div>
 
@@ -129,39 +129,44 @@ import leaflowPng from "@/assets/images/leaflow.png";
 import markdownKatex from "@traptitech/markdown-it-katex";
 import markdownIt from "markdown-it";
 // highlightjs
-// import hljs from "highlight.js";
+import hljs from "highlight.js";
 import config from "@/config/config";
-import Shiki from "@shikijs/markdown-it";
 
 const mdIt = markdownIt();
-const mdInited = ref(false);
+const mdInited = ref(true);
 
-// set options
-// mdIt.options.highlight = function (str: string, lang: string) {
-//   if (!lang) {
-//     return "";
-//   }
-//   return hljs.highlight(str, { language: lang }).value;
-// };
+const unsupportedLanguages = ["assembly"];
+mdIt.options.highlight = function (str: string, lang: string) {
+  if (!lang || unsupportedLanguages.includes(lang)) {
+    return str;
+  }
 
-async function initMD() {
-  mdIt.use(
-    await Shiki({
-      themes: {
-        light: "vitesse-light",
-        dark: "vitesse-dark",
-      },
-    })
-  );
+  return hljs.highlight(str, { language: lang }).value;
+};
+mdIt.use(markdownKatex, {
+  throwOnError: false,
+  errorColor: "#cc0000",
+  output: "html",
+});
 
-  mdIt.use(markdownKatex, {
-    throwOnError: false,
-    errorColor: "#cc0000",
-    output: "html",
-  });
+// async function initMD() {
+//   mdIt.use(
+//     await Shiki({
+//       themes: {
+//         light: "vitesse-light",
+//         dark: "vitesse-dark",
+//       },
+//     })
+//   );
 
-  mdInited.value = true;
-}
+//   mdIt.use(markdownKatex, {
+//     throwOnError: false,
+//     errorColor: "#cc0000",
+//     output: "html",
+//   });
+
+//   mdInited.value = true;
+// }
 const userStore = useUserStore();
 
 const props = defineProps({
@@ -175,6 +180,6 @@ const chat_messages = toRef(props, "chat_messages") as Ref<EntityChatMessage[]>;
 const fileBaseUrl = config.backend + "/api/v1/files";
 
 onMounted(() => {
-  initMD();
+  // initMD();
 });
 </script>