vue 实现XML的格式化和高亮显示

一 . xml格式化 用到了vkbeautify模块

1. 首先先下载vkbeautify文件

 npm install vkbeautify

2. 组件里，引入vkbeautify模块

 import vkbeautify from ‘vkbeautify’

3. 格式化字符串方法

 vkbeautify.xml(‘xxxxxxxxx’)

二. xml在页面高亮显示 用到了 highlight.js

Vue自定义指令

1. 首先先下载highlight.js文件

npm install highlight.js

2. 在main.js中引入文件

//xml格式 页面代码高亮文件引入 
import hljs from 'highlight.js'
//样式文件，我选了a11y-light.css，可选择文件里其他高亮样式css
import 'highlight.js/styles/a11y-light.css'

2. 在main.js中 自定义指令

Vue.directive('highlight',function (el) {
    let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block)=>{
        hljs.highlightBlock(block)
    })
})

注意：！！！此处有坑，官网关于动态页面、静态页面渲染，方法不同

此处的highlightBlock()方法用于动态渲染，从服务器端获取动态数据的页面渲染，测试时最好使用动态数据，不然会出现路由刷新/跳转后，高亮效果消失的情况。关于静态页面的渲染，官网有 initHighlighting()方法，主要是获取页面中的pre,code标签，按照特定的规则为其添加样式，只执行一次。

3. 最后在组件中使用，要放在pre标签下的code标签里面

<div>    
 <pre v-highlight>
  <code >{{xmlString}}</code>
 </pre>
</div>