From 2489cf00d7aecd4d62ae2841f5fa6b37aca17038 Mon Sep 17 00:00:00 2001
From: shizhong <124974919@qq.com>
Date: Fri, 16 Jun 2023 19:29:36 +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

---
 .../package/designer/ProcessDesigner.vue      | 17 +--------
 src/views/bpm/form/formEditor.vue             | 35 +++++++++++++++----
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
index 66cd019b..d371d601 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
@@ -233,14 +233,6 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
 // import xml2js from 'xml-js'
 // import xml2js from 'fast-xml-parser'
 import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
-// 代码高亮插件
-// import hljs from 'highlight.js/lib/highlight'
-// import 'highlight.js/styles/github-gist.css'
-// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
-// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
-// const eventName = reactive({
-//   name: ''
-// })
 const bpmnCanvas = ref()
 const refFile = ref()
 const emit = defineEmits([
@@ -673,17 +665,10 @@ const processSave = async () => {
   // 触发 save 事件
   emit('save', xml)
 }
-/** 高亮显示 */
-// const highlightedCode = (previewType, previewResult) => {
-//   console.log(previewType, 'previewType, previewResult')
-//   console.log(previewResult, 'previewType, previewResult')
-//   console.log(hljs.highlight, 'hljs.highlight')
-//   const result = hljs.highlight(previewType, previewResult.value || '', true)
-//   return result.value || '&nbsp;'
-// }
 onBeforeMount(() => {
   // console.log(props, 'propspropspropsprops')
 })
+
 /**
  * 代码高亮
  */
diff --git a/src/views/bpm/form/formEditor.vue b/src/views/bpm/form/formEditor.vue
index 6202c5fa..b8d3bad5 100644
--- a/src/views/bpm/form/formEditor.vue
+++ b/src/views/bpm/form/formEditor.vue
@@ -12,10 +12,8 @@
       <div ref="editor" v-if="dialogVisible1">
         <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
         <el-scrollbar height="580">
-          <div v-highlight>
-            <code class="hljs">
-              {{ formValue }}
-            </code>
+          <div>
+            <pre><code class="hljs" v-html="highlightedCode(formValue)"></code></pre>
           </div>
         </el-scrollbar>
       </div>
@@ -153,8 +151,25 @@ const copy = async (text: string) => {
   message.success(t('common.copySuccess'))
   oInput.remove()
 }
-// ========== 初始化 ==========
-onMounted(() => {
+
+/**
+ * 代码高亮
+ */
+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 () => {
   // 场景一：新增表单
   const id = query.id as unknown as number
   if (!id) {
@@ -165,5 +180,13 @@ onMounted(() => {
     formValues.value = data
     setConfAndFields(designer, data.conf, data.fields)
   })
+  // 注册代码高亮的各种语言
+  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>