From 30685bee759a42843467941466cbd7d128d0013e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 15 Apr 2023 21:36:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=20highlight=20=E4=BB=A3=E7=A0=81?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E7=9A=84=E5=85=A8=E5=B1=80=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?=EF=BC=8C=E6=94=B9=E6=88=90=E5=B1=80=E9=83=A8=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.ts                             | 11 ---------
 src/views/infra/codegen/PreviewCode.vue | 32 +++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index fc67552f..b37b8243 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -37,9 +37,6 @@ import App from './App.vue'
 
 import './permission'
 
-import hljs from 'highlight.js' //导入代码高亮文件
-import 'highlight.js/styles/github.css' //导入代码高亮样式  新版
-
 import '@/plugins/tongji' // 百度统计
 
 import Logger from '@/utils/Logger'
@@ -48,14 +45,6 @@ import Logger from '@/utils/Logger'
 const setupAll = async () => {
   const app = createApp(App)
 
-  //自定义一个代码高亮指令
-  app.directive('highlight', function (el) {
-    const blocks = el.querySelectorAll('code')
-    blocks.forEach((block: any) => {
-      hljs.highlightElement(block)
-    })
-  })
-
   await setupI18n(app)
 
   setupStore(app)
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index 339d9a53..12327b99 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -45,8 +45,8 @@
             <el-button class="float-right" text type="primary" @click="copy(item.code)">
               {{ t('common.copy') }}
             </el-button>
-            <div v-highlight>
-              <code>{{ item.code }}</code>
+            <div>
+              <pre><code class="hljs" v-html="highlightedCode(item)"></code></pre>
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -180,6 +180,34 @@ const copy = async (text: string) => {
     message.success(t('common.copySuccess'))
   }
 }
+
+/**
+ * 代码高亮
+ */
+import hljs from 'highlight.js' // 导入代码高亮文件
+import 'highlight.js/styles/github.css' // 导入代码高亮样式
+import java from 'highlight.js/lib/languages/java'
+import xml from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import sql from 'highlight.js/lib/languages/sql'
+import typescript from 'highlight.js/lib/languages/typescript'
+const highlightedCode = (item) => {
+  const language = item.filePath.substring(item.filePath.lastIndexOf('.') + 1)
+  const result = hljs.highlight(language, item.code || '', true)
+  return result.value || '&nbsp;'
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('java', java)
+  hljs.registerLanguage('xml', xml)
+  hljs.registerLanguage('html', xml)
+  hljs.registerLanguage('vue', xml)
+  hljs.registerLanguage('javascript', javascript)
+  hljs.registerLanguage('sql', sql)
+  hljs.registerLanguage('typescript', typescript)
+})
 </script>
 <style lang="scss">
 .app-infra-codegen-preview-container {