From ab08df9823adc5c070a3dd20e35559fb4d438806 Mon Sep 17 00:00:00 2001
From: ChandlerVer5 <benrenxw522@sina.com>
Date: Sun, 5 Mar 2023 13:58:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=20markdown-it-highlightjs=20=E8=BF=9B=E8=A1=8C=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                               |  2 +-
 pnpm-lock.yaml                             | 10 ++++++++--
 src/directives/index.ts                    |  4 ++--
 src/views/chat/components/Message/Text.vue | 15 ++++-----------
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 2126443..fca0189 100644
--- a/package.json
+++ b/package.json
@@ -25,9 +25,9 @@
   "dependencies": {
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@vueuse/core": "^9.13.0",
-    "highlight.js": "^11.7.0",
     "katex": "^0.16.4",
     "markdown-it": "^13.0.1",
+    "markdown-it-highlightjs": "^4.0.1",
     "naive-ui": "^2.34.3",
     "pinia": "^2.0.32",
     "vue": "^3.2.47",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b041b3..d88e78f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,12 +16,12 @@ specifiers:
   axios: ^1.3.4
   crypto-js: ^4.1.1
   eslint: ^8.35.0
-  highlight.js: ^11.7.0
   husky: ^8.0.3
   katex: ^0.16.4
   less: ^4.1.3
   lint-staged: ^13.1.2
   markdown-it: ^13.0.1
+  markdown-it-highlightjs: ^4.0.1
   naive-ui: ^2.34.3
   npm-run-all: ^4.1.5
   pinia: ^2.0.32
@@ -38,9 +38,9 @@ specifiers:
 dependencies:
   '@traptitech/markdown-it-katex': 3.6.0
   '@vueuse/core': 9.13.0_vue@3.2.47
-  highlight.js: 11.7.0
   katex: 0.16.4
   markdown-it: 13.0.1
+  markdown-it-highlightjs: 4.0.1
   naive-ui: 2.34.3_vue@3.2.47
   pinia: 2.0.32_hmuptsblhheur2tugfgucj7gc4
   vue: 3.2.47
@@ -3346,6 +3346,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /markdown-it-highlightjs/4.0.1:
+    resolution: {integrity: sha512-EPXwFEN6P5nqR3G4KjT20r20xbGYKMMA/360hhSYFmeoGXTE6hsLtJAiB/8ID8slVH4CWHHEL7GX0YenyIstVQ==}
+    dependencies:
+      highlight.js: 11.7.0
+    dev: false
+
   /markdown-it/13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true
diff --git a/src/directives/index.ts b/src/directives/index.ts
index cdcaeef..d8fde0c 100644
--- a/src/directives/index.ts
+++ b/src/directives/index.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue'
-import setupHighlightDirective from './highlight'
+// import setupHighlightDirective from './highlight'
 
 export function setupDirectives(app: App) {
-  setupHighlightDirective(app)
+  // setupHighlightDirective(app)
 }
diff --git a/src/views/chat/components/Message/Text.vue b/src/views/chat/components/Message/Text.vue
index 0a020bf..cf78ab0 100644
--- a/src/views/chat/components/Message/Text.vue
+++ b/src/views/chat/components/Message/Text.vue
@@ -2,9 +2,8 @@
 import { computed, ref } from 'vue'
 import MarkdownIt from 'markdown-it'
 import mdKatex from '@traptitech/markdown-it-katex'
-import hljs from 'highlight.js'
+import mdhljs from 'markdown-it-highlightjs'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
-import { t } from '@/locales'
 
 interface Props {
   inversion?: boolean
@@ -21,17 +20,11 @@ const textRef = ref<HTMLElement>()
 
 const mdi = new MarkdownIt({
   linkify: true,
-  highlight: (code, language) => {
-    const validLang = !!(language && hljs.getLanguage(language))
-    if (validLang) {
-      const lang = language ?? ''
-      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${language}">${hljs.highlight(code, { language: lang }).value}</code></pre>`
-    }
-    return `<pre style="background: none">${hljs.highlightAuto(code).value}</pre>`
-  },
 })
 
-mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
+mdi
+  .use(mdhljs, { auto: true, inline: true })
+  .use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
 
 const wrapClass = computed(() => {
   return [