refactor: 💡 使用 markdown-it-highlightjs 进行高亮

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",

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

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

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 [