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

This commit is contained in:
shizhong 2023-06-16 19:29:36 +08:00
parent 330a44fc98
commit 2489cf00d7
2 changed files with 30 additions and 22 deletions

View File

@ -233,14 +233,6 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
// import xml2js from 'xml-js' // import xml2js from 'xml-js'
// import xml2js from 'fast-xml-parser' // import xml2js from 'fast-xml-parser'
import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml' 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 bpmnCanvas = ref()
const refFile = ref() const refFile = ref()
const emit = defineEmits([ const emit = defineEmits([
@ -673,17 +665,10 @@ const processSave = async () => {
// save // save
emit('save', xml) 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(() => { onBeforeMount(() => {
// console.log(props, 'propspropspropsprops') // console.log(props, 'propspropspropsprops')
}) })
/** /**
* 代码高亮 * 代码高亮
*/ */

View File

@ -12,10 +12,8 @@
<div ref="editor" v-if="dialogVisible1"> <div ref="editor" v-if="dialogVisible1">
<XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" /> <XTextButton style="float: right" :title="t('common.copy')" @click="copy(formValue)" />
<el-scrollbar height="580"> <el-scrollbar height="580">
<div v-highlight> <div>
<code class="hljs"> <pre><code class="hljs" v-html="highlightedCode(formValue)"></code></pre>
{{ formValue }}
</code>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
@ -153,8 +151,25 @@ const copy = async (text: string) => {
message.success(t('common.copySuccess')) message.success(t('common.copySuccess'))
oInput.remove() 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 const id = query.id as unknown as number
if (!id) { if (!id) {
@ -165,5 +180,13 @@ onMounted(() => {
formValues.value = data formValues.value = data
setConfAndFields(designer, data.conf, data.fields) 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> </script>