Socket
Socket
Sign inDemoInstall

json-markup

Package Overview
Dependencies
0
Maintainers
2
Versions
13
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

json-markup

a json to html syntax highlighter


Version published
Maintainers
2
Weekly downloads
8,853
increased by3.95%

Weekly downloads

Readme

Source

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

Keywords

FAQs

Last updated on 13 Jun 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc