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
<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 type="text/css">
.key{color:green}
.string{color:navy}
.number{color:blue}
.boolean,.null{font-weight:bold;color:purple}
</style>
this will render as:
<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>