json-markup

json-markup

Prettyprint JSON to HTML

It is available through npm

npm install json-markup

or as a component for the browser

component install mafintosh/json-markup

json-markup will take a JSON document and add markup to it so it can be styled in a browser.

Usage

var jsonMarkup = require('json-markup')
var html = jsonMarkup({hello:'world'})
console.log(html);

The above example will print the following HTML

<div class="json-markup">{
  <span class="json-markup-key">hello:</span> <span class="json-markup-string">"world"</span>
}</div>

If you provide an object map with CSS style then style will be applied inline::

var jsonMarkup = require('json-markup')
var css2json = require('css2json')
var fs = require('fs')

var styleFile = css2json(fs.readFileSync('style.css', 'utf8'))
var html = jsonMarkup({hello:'world', foo: 'bar'}, styleFile)
console.log(html)

Now outputs looks like:

<div style="line-height:17px;font-size:13px;font-family:monospace;white-space:pre;">{
    <span style="font-weight:bold;">hello:</span> <span style="color:green;">"world"</span>,
    <span style="font-weight:bold;">foo:</span> <span style="color:green;">"bar"</span>
}</div>

Afterwards you can use css to style your output to your liking. A stylesheet similar to JSON view is included in style.css

License

MIT