一、问题：后端返回的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/
如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师！
