原来基于workflow-bpmn-modeler 的flowable流程设计器没有预览功能，所以
准备增加一个预览xml功能。
对于vue2 使用 highlight.js 高亮代码。
highlight.js 可以帮助你高亮代码。
1 安装
npm install highlight.js
npm install @highlightjs/vue-plugin@1.0.2
其中@highlightjs/vue-plugin 是一个 vue 插件，是一个写好的组件。
注意：vue2 中使用，安装 1.x.x 版本。
2 使用
2.1 基本使用
main.js 中添加：
import highlightPlugin from "@highlightjs/vue-plugin"; import 'highlight.js/styles/dark.css'; // 引入内置样式 Vue.use(highlightPlugin);
组件中使用：<highlightjs />
3、增加代码
在的workflow-bpmn-modeler package里的index.vue
增加按钮
<el-button size="mini" icon="el-icon-document" @click="previewXML">预览xml</el-button>
同时增加预览窗口如下
<el-dialog title="预览" width="80%" :visible.sync="previewModelVisible" append-to-body destroy-on-close> <highlightjs :language="previewType" :code="previewResult" style="height: 80vh" /> </el-dialog>
按钮代码如下：
previewXML() { this.modeler.saveXML({ format: true }).then(({ xml }) => { this.previewResult = xml; this.previewType = "xml"; this.previewModelVisible = true; }); },
4、使用样式
import 'highlight.js/styles/dark.css'; // 引入内置样式
这个时候你会发现样式并没有生效，这是 @highlightjs/vue-plugin 的问题
解决：
在 node_modules 中找到 @highlightjs/vue-plugin，修改 src 下的 vue.js：
// import hljs from "highlight.js/lib/core.js"; // 注释掉原来的导入 import hljs from 'highlight.js/lib/common'; // 使用该导入，样式即生效
最后效果图
