JS - 美化在 prism.js 中动态加载的 json 响应

Question

在 prism 中动态加载后，如何“美化”json 响应（https://prismjs.com/docs/Prism.html）？截至目前，我看到 json 结果语法在一行中突出显示：

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

但是我想要原始的（“美化的”）结构，所以例如：

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

这是我的设置：

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"
    }
  ]
};

console.log(JSON.stringify(code));

document.querySelector('.language-json').innerHTML = Prism.highlight(JSON.stringify(code), Prism.languages.json, 'json');

这是一个小提琴：https://jsfiddle.net/80hdf5v9/

Answer 1

根据 prismjs 的官方文档，您要突出显示的代码片段必须是包含在

<YOUR_CODE

内的字符串。我刚刚在 `` 中添加了代码并删除了 JSON.stringify。这解决了问题。

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

console.log(JSON.stringify(code));

document.querySelector('.language-json').innerHTML = Prism.highlight(code, Prism.languages.json, 'json');

您可以在 Fiddle 上看到结果：https://jsfiddle.net/kzqfL3sn/