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

【问题标题】：How to syntax highlight JSON inside a HTML page on the client side?如何在客户端的 HTML 页面中语法高亮 JSON？
【发布时间】：2017-08-09 14:15:02
【问题描述】：

我正在使用 外部服务 提供的 HTML 文档页面，该服务在 HTML 页面中呈现 JSON sn-ps。 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 sn-p 应用语法突出显示（颜色）。

我找到了Greasemonkey，但仍然没有了解如何注入语法高亮库。

【问题讨论】：

我认为 SO 本身使用（或至少使用）Google code prettifier，在您的情况下使用起来似乎很简单。
我看到了Auto-Loader，但是如何将这个库注入远程页面？
正如您在问题中所说，您可以使用 Greasemonkey 加载该脚本并使用您自己的用户脚本将其实际注入任何网站。 Greasemonkey 的手册看起来不是很完整，我实际上在大约 10 年前使用它，但应该可以用几行代码
是的。到目前为止，我发现的只是普通的 JavaScript。我看过的教程都没有加载外部库。
看看this关于如何使用 jQuery 和 Greasemonkey 的问题，它很旧但应该很容易你可以使用 @require https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst 然后找到一种方法来获取你的 <pre> 元素并添加prettyprint CSS 类。我不确定该自动加载器链接是否适用于 Greasemonkey。如果你不让它工作，我可以写一个小测试，但只有明天......

标签： json browser syntax-highlighting greasemonkey userscripts

【解决方案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)

感谢您让我的一天更美好！

【讨论】：

您是如何使 JSON 突出显示的？我正在尝试在带有 textarea 的 SharePoint Online 页面上使用您的解决方案，虽然正确应用了该类，但似乎没有突出显示 JSON。
很难说在你的情况下什么不起作用。可能是 DOM 尚未完成加载。我总是尝试使用简单的alert() 调用进行调试，以确保执行函数。我建议您在 StackOverflow 上发布一个新问题，以便人们能够分析您的问题。请随时在此处链接您的问题。