Skip to content
This repository has been archived by the owner on Dec 27, 2018. It is now read-only.

Transforms a JSON object to a pretty piece of HTML

License

Notifications You must be signed in to change notification settings

BlackHole1/json-pretty-html

 
 

Repository files navigation

Build Status Dependencies NPM Downloads MIT Node.js version

json-pretty-html-fix

This package exists to temporarily solve the json-pretty-html project error. When the json-pretty-html project solves this problem, there is no need to continue using the package.

Please don't install this package, the original author has fixed this error.

Whether the json-pretty-html project solves the problem status: true

error details: amelki#7

Transforms a JSON object into an HTML string. Allows selecting a subset of the object and highlight it with a CSS class.

Usage

var json = {
  "id": 2,
  "name": "An ice sculpture",
  "price": 12.50,
  "tags": ["cold", "ice"],
  "dimensions": {
    "length": 7.0,
    "width": 12.0,
    "height": 9.5
  },
  "warehouseLocation": {
    "latitude": -78.75,
    "longitude": 20.4
  }
};
var prettyHtml = require('json-pretty-html-fix').default;
var html = prettyHtml(json, json.dimensions);

With a nice CSS, the result will be:

Result

CSS

You can use the default 'darcula' like stylesheet.

Or you can define your own styles. See below the list of CSS classes used in the generated HTML:

CSS Class Purpose
json-pretty A div grouping several lines, delimited by the start/end of the object or the start/end of the selection
json-selected The current selection div, if any. Always associated with the json-pretty class.
json-key Object key, excluding double quotes
json-string String value, excluding double quotes
json-number Number value
json-boolean Boolean value

About

Transforms a JSON object to a pretty piece of HTML

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 64.8%
  • TypeScript 28.6%
  • JavaScript 4.9%
  • CSS 1.7%