将 highlight 代码高亮的全局引入，改成局部引入

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 || ' '
-// }
 onBeforeMount(() => {
   // console.log(props, 'propspropspropsprops')
 })
+
 /**
  * 代码高亮
  */

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>
+          <div>
-            <code class="hljs">
+            <pre><code class="hljs" v-html="highlightedCode(formValue)"></code></pre>
-              {{ formValue }}
-            </code>
           </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>