vue常用依赖（二）vkbeautify格式化JSON、XML字符串及highlight.js高亮

vkbeautify是一款格式化工具，可以将xml、json字符串格式化处理，处理后的字符串直接放入pre+code的标签即可。

vkbeautify使用方法

1.下载

npm install vkbeautify 

2.引入

import vkbeautify from 'vkbeautify';
Vue.prototype.vkbeautify = vkbeautify;

3.js中数据处理

// 1.转成json 注意：需要先将字符串转成json格式
this.msg = this.vkbeautify.json(JSON.parse(res.data.data))
// 2.转成xml
this.msg = this.vkbeautify.xml(res.data.data)

4.模板中使用 直接放入pre+code标签

<pre>
	<code>{{msg}}</code>
</pre>

highlight.js是一款代码高亮的工具，可以配合vkbeautify使用

highlight.js使用方法

1.下载

npm install highlight.js

2.引入

import hljs from 'highlight.js'
// 样式文件，可选文件里其他高亮样式
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)
  })
})

4.使用

<pre v-highlight>
        <code>{{msg}}</code>
</pre>

注意： 1.如果每次打开模态框数据并没有重新渲染，可以绑定key解决这个问题 2.highlight默认不进行换行处理，换行要加上.hljs{ white-space: pre-wrap; word-wrap: break-word;}；首行样式距离左侧又40px距离，根据需要自己调整，.hljs-meta{ margin-left: -40px!important;}，.hljs-punctuation:first-child{ margin-left: -40px!important;} 3.格式化json时报错考虑数据是否规范

<pre v-highlight :key="msg">
        <code>{{msg}}</code>
</pre>

效果：

json

xml