JSON rendering

formating and highlighting

In your technical blog pages you need to display a pretty JSON string, to facilitate reading. The best way is to provide a result as if it were in a code editor. But you should not host code editor libraries that would increase the weight of your page.
In just 1 single tag included in your page, you can provide a formated view of your object, both expanded and colorized. There are lots of advantages with the solution:


Add a new "script" tag in your page where you expect the JSON being rendered.
To defer rendering you just need to add the "async" (or "defer") boolean HTML5 attribute to your script tag.
<script src="...." async></script>
<script src="...." defer></script>
the "src" attribute should point to https://www.adminbooster.com/jsonformat.js followed by a "#" and followed by the one-line compact JSON string. Example:
<script src='https://www.adminbooster.com/jsonformat.js#{"item1":"some value","item2":123}'></script>
Result is:
If you provide a malformed JSON string then it will be printed "invalid json" followed by the compact JSON string

Style definition

The result is some html code generated inside a "pre" tag. If you want another tag instead of the "pre" tag, add an attribute to the script tag : data-tagname="..."
You can combine this with data-classname="..." attribute to define the classname of your surrounding tag. Example:
<style type="text/css">
.myspanclass{display: block;unicode-bidi: embed;font-family: monospace;white-space: pre;border: solid 1px orange;padding: 16px; margin:16px;}
<script data-tagname="span" data-classname="myspanclass" src='https://www.adminbooster.com/jsonformat.js#{"item1":"some value","item2":123}'></script>

Result is:

You can see at the top right a "JSON" text. Click on it to put the content into the clipboard, in a semi-compact form

items defining the JSON message structure can have different custom colors according to their type. Just configure the classname for each of them Style example:
<style type="text/css">
this will render as:
You can of course define any other custom color set that you would prefer. Here is another one
<style type="text/css">