如何在客户端的 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)

谢谢你让我的一天更美好！

如何在客户端的 HTML 页面中突出显示 JSON 的语法？

How to syntax highlight JSON inside a HTML page on the client side?

json

browser

syntax-highlighting

greasemonkey

userscripts