Merge pull request #1070 from Carlmac/fix-doc-code-highlight

fix(doc-detail): 修复API文档代码块没有高亮的问题

src/dashboard-front/src/main.ts

@@ -17,6 +17,8 @@ import bkui from 'bkui-vue';
 import 'bkui-vue/dist/style.css';
 // 图标
 import './assets/iconfont/style.css';
+// highlight.js 代码高亮风格
+import 'highlight.js/styles/github.min.css';
 
 const app = createApp(App);
 app.config.globalProperties.GLOBAL_CONFIG = globalConfig;

src/dashboard-front/src/views/apiDocs/components/sdk-instruction-content.vue

@@ -40,7 +40,6 @@ import {
 } from 'vue';
 import MarkdownIt from 'markdown-it';
 import hljs from 'highlight.js';
-import 'highlight.js/styles/github.min.css';
 
 import { copy } from '@/common/util';
 
@@ -77,14 +76,14 @@ const md = new MarkdownIt({
   html: true,
   breaks: true,
   highlight(str: string, lang: string) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
+    try {
+      if (lang && hljs.getLanguage(lang)) {
         return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
-      } catch (__) {
       }
+    } catch {
+      return str;
     }
-
-    return '';
+    return str;
   },
 });
 

src/dashboard-front/src/views/apiDocs/doc-detail.vue

@@ -211,6 +211,7 @@ import DocDetailMainContent from '@/views/apiDocs/components/doc-detail-main-con
 import DocDetailSideContent from '@/views/apiDocs/components/doc-detail-side-content.vue';
 import SdkInstructionSlider from '@/views/apiDocs/components/sdk-instruction-slider.vue';
 import TableEmpty from '@/components/table-empty.vue';
+import hljs from 'highlight.js';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -352,6 +353,16 @@ const md = new MarkdownIt({
   linkify: false,
   html: true,
   breaks: true,
+  highlight(str: string, lang: string) {
+    try {
+      if (lang && hljs.getLanguage(lang)) {
+        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+      }
+    } catch {
+      return str;
+    }
+    return str;
+  },
 });
 
 // markdown 解析器自定义规则，用于给 ### 标题添加 id，导航要用