refactor(markdown): highlightjs更新使用@11 (DevCloudFE#1755)

Author: GreatZPP

packages/devui-vue/devui/editor-md/src/composables/md-render-service.ts

@@ -1,4 +1,4 @@
-import * as hljs from 'highlight.js';
+import hljs from 'highlight.js';
 import MarkdownIt from 'markdown-it';
 import { filterXSS, getDefaultCSSWhiteList, getDefaultWhiteList, IWhiteList } from 'xss';
 import { mermaidRender, refreshMermaid } from '../plugins/mermaid';
@@ -15,21 +15,23 @@ export class MDRenderService {
       if (lang && hljs.getLanguage(lang)) {
         try {
           return hljs.highlight(str, { language: lang }).value;
-        } catch (_) { }
+        } catch (_) {}
       }
       return '';
-    }
+    },
   }) as any;
   private baseUrl = '';
   private breaks = true;
   private renderParse: Function | undefined;
 
   constructor() {
     this.setDefaultXss();
-    this.mdt.use(tocAndAnchor, {
-      linkify: false,
-      anchorLink: false
-    }).use(mermaidRender, { id: 'devui-mermaid' });
+    this.mdt
+      .use(tocAndAnchor, {
+        linkify: false,
+        anchorLink: false,
+      })
+      .use(mermaidRender, { id: 'devui-mermaid' });
   }
 
   private setDefaultXss() {
@@ -46,7 +48,6 @@ export class MDRenderService {
     this.xssWhiteList['path'] = ['style', 'class', 'd', 'id', 'fill', 'stroke'];
     this.xssWhiteList['th'] = ['style'];
     this.xssWhiteList['td'] = ['style'];
-
   }
 
   setBaseUrl(url: string) {
@@ -71,15 +72,15 @@ export class MDRenderService {
 
   setCustomXssRules(rules: ICustomXssRule[]) {
     if (rules) {
-      rules.forEach(rule => {
+      rules.forEach((rule) => {
         this.xssWhiteList[rule['key']] = rule['value'];
       });
     }
   }
 
   setCustomRendererRules(rules: ICustomRenderRule[]) {
     if (rules) {
-      rules.forEach(rule => {
+      rules.forEach((rule) => {
         this.mdt.renderer.rules[rule['key']] = rule['value'];
       });
     }
@@ -90,7 +91,7 @@ export class MDRenderService {
   }
 
   setPlugins(plugins: Array<MdPlugin>) {
-    plugins.forEach(item => {
+    plugins.forEach((item) => {
       const { plugin, opts } = item;
       this.mdt.use(plugin, opts);
     });
@@ -139,7 +140,7 @@ export class MDRenderService {
           top: true,
           left: true,
           bottom: true,
-          right: true
+          right: true,
         }),
       },
     });
@@ -153,7 +154,7 @@ export class MDRenderService {
 
   public setRules(mdRules: Record<string, any>): void {
     if (mdRules) {
-      Object.keys(mdRules).forEach(rule => {
+      Object.keys(mdRules).forEach((rule) => {
         this.mdt[rule].set(mdRules[rule]);
       });
     }

packages/devui-vue/package.json

@@ -49,7 +49,6 @@
     "@devui-design/icons": "^1.3.0",
     "@floating-ui/dom": "^0.4.4",
     "@iktakahiro/markdown-it-katex": "^4.0.1",
-    "katex": "^0.12.0",
     "@types/codemirror": "0.0.97",
     "@types/lodash-es": "^4.17.4",
     "@vue/shared": "^3.2.33",
@@ -63,7 +62,8 @@
     "diff2html": "^3.4.35",
     "echarts": "5.3.3",
     "fs-extra": "^10.0.0",
-    "highlight.js": "10.7.3",
+    "highlight.js": "^11.6.0",
+    "katex": "^0.12.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.20",
     "markdown-it": "12.2.0",