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:
  • Beautifying JSON with indentation
  • Custom style: enhancing with colors of your choice
  • Capability to embed multiple JSON strings and render them individually
  • Easy integration
  • Small footprint in your page : just 1 html tag
  • Network optimized : lightweight (<1kb gziped) and only O (if already cached/displayed once) or 1 external hit, even if multiple JSON inclusions in the page.
  • Compatible with any Javascript code (no framework dependency, closure usage, no exposed variable, compatible with any other script tag)
  • Securely served: over https and without transfering the JSON to the server
  • High speed: page is not downloading the rendered JSON message with all surrounding tags related to syntax highlighting, only the compacted text format of the JSON string. Computation is very quick within the browser
  • Optimizing server load: reduced page size, no server-side rendering
  • SEO compatible : json remains in the page
  • Stealthy: inserted definition tag is removed after conversion, making the DOM lighter
  • Can do async/deferred rendering
  • Includes a widget to copy the json to the clipboard

Syntax

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>
  • If async is present: The script is executed asynchronously with the rest of the page (the rendering will be executed while the page continues the parsing)
  • If async is not present and defer is present: The script is executed when the page has finished parsing
  • If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page
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;}
</style>
...
<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
  • "key" is used for the string defining the name of the key (left member)
  • "string" will define the style for any value (right member) of type string
  • "number" is for any numeric value
  • "boolean" is for either a true or false value
  • "null" is for a value that is equals to null
Style example:
<style type="text/css">
.key{color:green}
.string{color:navy}
.number{color:blue}
.boolean,.null{font-weight:bold;color:purple}
</style>
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">
.key{color:#aa00aa}
.string{color:blue}
.number{color:green}
.boolean{font-weight:bold;color:navy}
.null{font-weight:bold;color:red}
</style>


 
© 2017 Jean-Luc Antoine, All Rights Reserved