Hello.

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 to the JSON snippet via user script.

Can someone please give me a direction on how I could do that?
Thank you, John

Re: @johnjohndoe:

We use https://github.com/isagalaev/highlight.js . Please check out their README.md for how to do this dynamically vs. page loading if you are interested.

Userscript wise you would need to inject the compiled source from them into the DOM and execute whichever function you choose. Since you don't have the <code> tag you might want to consider the dynamic call to highlight post page load.

Hope this is a good start for you.