vue 格式化展示json(含彩色样式)

实现原理

 通过函数 syntaxHighlight 使用html标签包装 json数据，并添加样式

完整范例代码

<template>
<div style="width: 300px;">
<pre v-html="formattedJSON"></pre>
</div>
</template>
<script>
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}

export default {
mounted() {
this.formattedJSON = syntaxHighlight(this.tabConfig)
},
data() {
return {
tabConfig: {
"defaultTab": "基础信息",
"tabList": [
{
"label": "基础信息",
"show": true
},
{
"label": "职业规划",
"age": 30,
},
{
"label": "相关要件",
}
]
},
formattedJSON: ''
}
},
}
</script>
<style scoped>
/deep/ pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}

/deep/ .string {
color: green;
}

/deep/ .number {
color: darkorange;
}

/deep/ .boolean {
color: blue;
}

/deep/ .null {
color: magenta;
}

/deep/ .key {
color: red;
}
</style>