Vue 项目中高亮格式化 xml 代码

效果演示

安装插件

$ npm install highlight.js --save

代码实现

xml原文如下：

<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<licenses>\n    <license-group embed=\"true\" format=\"1.0\" productFamily=\"esb\" release=\"8.0\">\n        <license edition=\"EE\" licensee=\"Customer\" sign=\"302c02145474e5e6ab7f06807dba385d8d76480fe940974d02145632484ad18e53ced0c8bd3467c0dc6139344501\" type=\"EVAL\">\n            <license-element key=\"cpus\" privilege=\"false\" value=\"unlimited\"/>\n            <license-element key=\"db\" value=\"unlimited\"/>\n            <license-element key=\"as\" value=\"unlimited\"/>\n            <license-element key=\"os\" value=\"unlimited\"/>\n            <license-element key=\"expiration\" value=\"unlimited\"/>\n            <license-element key=\"ip\" value=\"jVEgnBvsFjtfl3E5OZf187eex6i4n/JOJQ==\"/>\n            <license-element key=\"mac\" value=\"jVEgnBvsFjtfl3E5OZf187eex6i4n/JOJQ==\"/>\n            <license-element key=\"server\" value=\"true\">\n            </license-element>\n            <license-element key=\"richweb\" value=\"true\">\n            </license-element>\n            <license-element key=\"workflow\" value=\"true\">\n            </license-element>\n            <license-element key=\"managermodel\" value=\"single\"/>\n            <license-element key=\"cluster\" value=\"false\"/>\n            <license-element key=\"international\" value=\"unlimited\"/>\n            <license-element key=\"concurrency\" value=\"5\"/>\n        </license>\n    </license-group>\n</licenses>\n

为了方便使用，可以把解析 xml 的代码封装成一个公共组件，在 components 目录下创建一个公共组件的目录，例如

创建 src/components/Highlight/index.js 和 src/components/Highlight/index.vue 文件

index.vue 文件代码：

<template>
  <div class="xml-data" :style="{width, height}">
    <div v-for="(item,index) in parseXML" :key="index" class="xml-data-line">
      <code class="xml-data-code" v-html="item" />
    </div>
  </div>
</template>

<script>
import 'highlight.js/styles/a11y-dark.css'
import Hljs from 'highlight.js'
export default {
  props: {
    xmlData: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '450px'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  computed: {
    parseXML() {
      const codeArry = []
      this.xmlData.split('\n').forEach(lineCode => {
        codeArry.push(Hljs.highlightAuto(lineCode).value)
      })
      return codeArry
    }
  }
}
</script>

<style>
.xml-data {
  background-color: #2B2B2B;
  border-radius: 5px;
  color: #C6C6C6;
  word-break:break-all;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 8px 0px;
}

/* 修改滚动条样式 */
.xml-data::-webkit-scrollbar {
	width: 4px;
}
.xml-data::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: rgba(198, 198, 198, 1);
}

.xml-data-line {
  line-height: 22px;
}

.xml-data-line-no {
  display: inline-block;
  width: 20px;
  font-size: 12px;
  margin-right: 15px;
  text-align: right;
  color: #858585;
}

.xml-data-code {
  color: #C5C8C6;
}
</style>

index.js 文件代码：

import FormatXml from './index.vue'

// 代码高亮插件
export default {
  install(Vue, options) {
    Vue.component('format-xml', FormatXml)
  }
}

在 src/main.js 项目入口文件引入代码高亮的公共组件：

import Vue from 'vue'
import Highlight from './components/Highlight'
Vue.use(Highlight)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用代码高亮的公共组件

在其他页面组件中就可以直接引入 <format-xml> 组件了，例如：
Home.vue 文件代码：

<template>
  <div>
    <el-button type="primary" @click="visible = true">查看</el-button>
    <el-dialog title="license 详情" :visible.sync="visible">
      <format-xml :xml-data="licenceData" width="100%" height="400px" />
    </el-dialog>   
  </div>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			licenceData: '' // xml的文本内容
		}
	}
}
</script>

切换不同的代码主题

highlight.js 提供了很多的代码样式主题，只需要在 src/components/Highlight/index.vue 文件中引入不同的 CSS 文件即可，常见的主题风格如下所示：

例如：a11y-dark 主题

引入CSS文件：

import 'highlight.js/styles/a11y-dark.css'

更多主题可以查看 highlight.js 中文网，地址：

https://fenxianglu.cn/highlight.html