如何在客户端的 HTML 页面中语法高亮 JSON？

Question

我正在通过外部服务使用HTML文档页面，该服务在HTML页面中呈现JSON片段。 HTML 源代码如下所示：

<pre>{
    "product-link": "https://example.com/product-link",
    "teaser_image": "https://example.com/teaser-image",
    "product_image_first": "https://example.com/product-image-first",
    "headline": "Example headline",
}</pre>

JSON 块呈现 没有 语法突出显示。 由于我不控制外部服务，我想通过用户脚本将语法突出显示（颜色）应用于 JSON 片段。

我找到了Greasemonkey，但仍然缺少如何注入语法荧光笔库的要点。

Answer 1

感谢 xander 这是我基于 code-prettify 的用户脚本的第一个工作版本：

(function(d) {

  stylizePreElements = function() {
    var preElements = document.getElementsByTagName("pre");
    for (i = 0; i < preElements.length; ++i) {
      var preElement = preElements[i];
      preElement.className += "prettyprint";
    }
  };

  injectPrettifyScript = function() {
    var scriptElement = document.createElement('script');
    scriptElement.setAttribute("src", "https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js");
    document.head.appendChild(scriptElement);
  };

  stylizePreElements();
  injectPrettifyScript();

})(document)

谢谢你让我的一天变得更加美好！

Answer 2

跟进这个答案，如果您在格式化运行后更改元素的文本内容，

PR.prettyPrint();

将不会重新格式化它。 Code-prettify 将类

prettyprinted

添加到其格式化为标记的元素中，以便不重新处理它们。

以下是更改内容后删除标记的示例：

const url = "https://jsonplaceholder.typicode.com/posts";

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }

    return response.text();
  })
  .then(data => {
    const pre = document.querySelector("pre");
    pre.textContent = data;
    pre.classList.remove("prettyprinted");
    PR.prettyPrint();
  })
  .catch(err => console.error(err));

body, pre {
  overflow: scroll;
  margin: 0;
}

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
<pre class="prettyprint">{"foo": 42}</pre>

如果您不是可用样式的忠实粉丝，请考虑hljs。