在vue中展示xml源代码-xml数据格式化和代码高亮显示

1.xml数据格式化

//1)npm 安装vkbeautify
npm install vkbeautify

//2)组件里，引入vkbeautify模块
import vkbeautify from 'vkbeautify'

//3)vkbeautify使用
xml_show=vkbeautify.xml(xmlSource)

2.html中高亮展示代码

1)npm安装highlight

npm install highlight.js

2)在main.js中引入文件`

//高亮显示
import VueHighlightJS from 'vue-highlightjs'
import 'highlight.js/styles/atom-one-dark.css'

Vue.use(VueHighlightJS)

3)在页面中使用

//highlight_s是css样式，xml_show是xml数据。
<pre v-highlightjs="xml_show"> 
   <code class="highlight_s"> </code>
</pre>