一、问题：后端返回的json没有格式化，想格式化高亮该json并在网页中显示它
最近有同学问我这个问题：
他的问题就是，后端返回的json没有格式化，想格式化高亮该json并在网页中显示它。
下面的是后端返回的json，没有做任何处理：
就像这样，期望的效果：
即左侧是希望看到的效果，右侧是格式化了但是没有代码高亮的效果。
所以以上就需要分2步来解决：1、格式化输出 2、代码高亮
二、json格式化输出的方法
如果你有一个未格式化的 JSON 字符串，并且想使用 JavaScript 来格式化和美化它，你可以使用内置的 JSON 对象的 stringify() 方法。这个方法接受一个 JSON 对象并将其转换成格式化后的字符串。
以下是使用 JavaScript 格式化美化 JSON 的示例代码：
// 未格式化的 JSON 字符串
var unformattedJson = '{"name":"John","age":30,"city":"New York"}';
// 将 JSON 字符串解析为对象
var jsonObject = JSON.parse(unformattedJson);
// 将对象转换为格式化后的 JSON 字符串
var formattedJson = JSON.stringify(jsonObject, null, 2);
console.log(formattedJson);打印输出的结果即为：
代码解读：
JSON.stringify(jsonObject, null, 2);
- 第一个参数表示需要格式化的
JSON对象（非字符串） - 第二个参数是一个可选的替代函数，用于过滤和修改对象属性的值。在这个示例中，我们传递了
null，表示不进行任何替代操作 - 第三个参数是一个可选的空格参数，用于指定缩进的空格数量或缩进字符串。在示例中，我们传递了
2，表示每级缩进两个空格。
这样就实现了json格式化输出。接着我们来解决第二个问题，即给代码高亮着色。
三、给代码高亮着色
高亮代码其实有很多种第三方库，常用的有highlight.js或Prism.js等。用法大同小异，接下来就以后面的这个库为例看看怎么使用。
直接在网页中使用：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" />
</head>
<body>
<pre>
<code class="language-javascript">
{
"name": "John",
"age": 30,
"city": "New York"
}
</code>
</pre>
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
</body>
</html>
你将上面的代码复制到本地html，打开即可看到效果。
上面的js和css引用的是外部的cdn，如果你想让JS文件跟着你的项目走，你也可以直接打开以上链接，然后将其另存为保存到和html同一级目录，记得改下路径为相对路径。
如果你要将高亮使用到前端工程项目中，即通过npm的方式来使用，它也提供了对应的方式。
具体可参考其官网：https://prismjs.com/
