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

Question

I am using a HTML documentation page by an external service which renders JSON snippets within an HTML page. The HTML source code looks like this:

<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>

The JSON block renders without syntax highlighting. Since I am not in control of the external service I would like to apply syntax highlighting (color) to the JSON snippet via user script.

I found Greasemonkey but still missing the point on how to inject a syntax highlighter library.

I think SO itself uses (or at least used) [Google code prettifier](https://github.com/google/code-prettify), that seems pretty simple to use in your case. — xander, Aug 09 '17 at 14:19
I saw the [Auto-Loader](https://github.com/google/code-prettify/blob/master/docs/getting_started.md#auto-loader) but how can I inject this library into the remote page? — JJD, Aug 09 '17 at 14:40
As you said in the question you can use Greasemonkey to load that script and your own user script to actually inject it to any website. The Greasemonkey manual is not very complete it seems, I actually used it about 10 years ago but it should be possible with a few lines of code — xander, Aug 09 '17 at 14:51
Yes. All I found until now is vanilla JavaScript. None of the tutorials I looked at loads an external library. — JJD, Aug 09 '17 at 14:56
Look at [this](https://stackoverflow.com/questions/859024/how-can-i-use-jquery-in-greasemonkey) question of how to use jQuery with Greasemonkey, it's old but should be pretty easy you can use `@require https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst` and then find a way to get your `
` element and add the `prettyprint` CSS class to it. I'm not sure if that auto loader link works with Greasemonkey. If you don't get it working I can write a little test, but only tomorrow... — xander, Aug 09 '17 at 15:05

score 5 · Accepted Answer · answered Aug 09 '17 at 15:53

5

Thanks to xander here is the first working version of my user script base on 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)

Thank you for making my day nicer!

answered Aug 09 '17 at 15:53

JJD

50,076
60
203
339

How did you get highlighting of JSON to work? I'm trying to use your solution on a SharePoint Online page with a textarea, and while the class is applied properly, JSON doesn't seem to be highlighted. – CXL May 15 '18 at 21:21
Hard to tell what does not work in you case. It could be that the DOM has not finished loading. I would always try to debug with a simple `alert()` call to assure a function is executed. I suggest you post a **new question** here on StackOverflow so people are able to analyze your issue. Feel free to link your question here. – JJD May 16 '18 at 09:14

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

1 Answers1