如何在Prism.js中动态加载并美化JSON响应？

你当前的问题是：通过Prism.js处理JSON响应时，虽然能实现语法高亮，但结果显示为单行，无法呈现格式化的层级结构。

解决方法 #

核心是利用JSON.stringify()的格式化参数生成带缩进的JSON字符串，再交给Prism进行高亮处理：

• 格式化JSON字符串：JSON.stringify()支持第三个参数，用来指定缩进的空格数（比如2或4），生成带换行和缩进的结构化字符串。
• 交给Prism高亮：将格式化后的字符串传入Prism.highlight()，Prism会保留原有格式并添加语法高亮。

修改后的代码 #

HTML

<pre><code class="language-json"></code></pre>

JavaScript

let code = {
  "status": 200,
  "success": true,
  "message": "Success! Record(s) available!",
  "data": [
    {
      "title": "Item 1"
    },
    {
      "title": "Item 2"
    }
  ]
};

// 生成带缩进的JSON字符串
const formattedJson = JSON.stringify(code, null, 2);
// 交给Prism高亮并插入到页面
document.querySelector('.language-json').innerHTML = Prism.highlight(formattedJson, Prism.languages.json, 'json');

效果说明 #

修改后，页面会呈现带层级缩进的JSON结构，同时保留Prism的语法高亮效果，和你期望的格式化结构完全一致。

内容的提问来源于stack exchange，提问作者Philipp M