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

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

    github地址：https://github.com/vkiryukhin/vkBeautify 

   1. 首先先下载vkbeautify文件 

npm install vkbeautify

   2. 组件里，引入vkbeautify模块

import vkbeautify from ‘vkbeautify’

    3. 格式化字符串方法：

vkbeautify.xml(‘xxxxxxxxx’)

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

   方法一：Vue自定义指令

    github地址：https://github.com/highlightjs/highlight.js 

   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' 

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

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

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

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

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

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

方法二：封装成插件 highlight.js

// highlight.js
import Vue from 'vue'
import Hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css'
let Highlight = {}
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block)
    })
  })
}
export default Highlight

  使用插件  在main.js中

import Highlight from 'path/to/Highlight.js'
Vue.use(Highlight)

三.以上就可以实现xml在页面的格式化、高亮显示了！效果图：

！！！敲重点，背景色、颜色等样式由css文件定，可根据实际需求去选择css文件