问题描述：
有时候我们需要将json数据直接显示在页面上（比如需要将接口返回的结果直接展示），如果直接显示字符串，不美观也不方便查看。比如：
这时就需要把json格式化一下展示了，格式化成下图的样式就完美啦。
解决方案：
首先使用JSON.stringify将JSON格式化：
// 返回一个表示给定值的JSON字符串。JSON.stringify(value[, replacer [, space]]);
JSON.stringify()方法将一个 JavaScript 值（对象或者数组）转换为一个 JSON 字符串，如果指定了 replacer 是一个函数，则可以选择性地替换值，或者如果指定了 replacer 是一个数组，则可选择性地仅包含数组指定的属性。
value参数
将要序列化成 一个 JSON 字符串的值。replacer（可选）
如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的
JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化；关于该参数更详细的解释和示例，请参考使用原生的
JSON 对象一文。space (可选)
指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串（当字符串长度超过10个字母，取其前10个字母），该字符串将被作为空格；如果该参数没有提供（或者为
null），将没有空格。
给返回的字符串加上格式化的代码和样式：
js:
syntaxHighlight(json) {if (typeof json !== 'string') {json = JSON.stringify(json, undefined, 2)} else {json = JSON.stringify(JSON.parse(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) {let cls = 'json-number'if (/^"/.test(match)) {if (/:$/.test(match)) {cls = 'json-key'} else {cls = 'json-string'}} else if (/true|false/.test(match)) {cls = 'json-boolean'} else if (/null/.test(match)) {cls = 'null'}return '<span class="' + cls + '">' + match + '</span>'})}
less:
#format-json {pre {outline: 1px solid #ccc;padding: 5px;.json-string {color: #c62628;}.json-number, .json-boolean {color: #1f1bcc;}.json-null {color: #818181;}.json-key {color: #861d8f;}}}
html:
<div id="format-json"><pre [innerHtml]="syntaxHighlight(jsonObj) | safeHtml"></pre></div>
其中safeHtml是能够保留显示html的行内style的pipe，看这里SafeHtmlPipe：
最终效果:
