pretty-print-json

_Pretty-print JSON data into HTML to indent and colorize_


Source is written in functional TypeScript, and pretty-print-json.min.js (minified) is 2.1 KB.

!Screenshot

A) Try It Out

B) Setup

$3

For dark mode, replace pretty-print-json.css with pretty-print-json.dark-mode.css in
the tag.

Or to automatically sense dark mode based on the prefers-color-scheme CSS media feature, use pretty-print-json.prefers.css instead.


$3

tag to support line numbers.* |
| linkUrls | boolean | true | Create anchor tags for URLs. |
| linksNewTab | boolean | true | Add a target=_blank attribute setting to anchor tags. |
| quoteKeys | boolean | false | Always double quote key names. |
| trailingCommas | boolean | true | Append a comma after the last item in arrays and objects. |

*When setting lineNumbers to true, do not use the

 tag as the white-space: pre;
styling is applied to each line (
).
!Screenshot
D) TypeScript Declarations

See the TypeScript declarations at the top of the
pretty-print-json.ts file.
Customize the output of the function prettyPrintJson.toHtml(data: unknown, options?: FormatOptions)
using the options parameter.
The options parameter is a FormatOptions object:
`typescript
type FormatOptions = {
   indent?:         number,   //number of spaces for indentation
   lineNumbers?:    boolean,  //wrap HTML in an 
 tag to support line numbers
   linkUrls?:       boolean,  //create anchor tags for URLs
   linksNewTab?:    boolean,  //add a target=_blank attribute setting to anchor tags
   quoteKeys?:      boolean,  //always double quote key names
   trailingCommas?: boolean,  //append a comma after the last item in arrays and objects
   };
`
Example TypeScript usage with explicit types:
`typescript
import { prettyPrintJson, FormatOptions } from 'pretty-print-json';
const data = {
   active: true,
   mode:   '🚃',
   codes:  [48348, 28923, 39080],
   city:   'London',
   };
const options: FormatOptions = { linkUrls: true };
const html: string = prettyPrintJson.toHtml(data, options);
`
E) Build Environment

Check out the runScriptsConfig section in package.json for an
interesting approach to organizing build tasks.
CLI Build Tools for package.json
   - 🎋 add-dist-header:  _Prepend a one-line banner comment (with license notice) to distribution files_
   - 📄 copy-file-util:  _Copy or rename a file with optional package version number_
   - 📂 copy-folder-util:  _Recursively copy files from one folder to another folder_
   - 🪺 recursive-exec:  _Run a command on each file in a folder and its subfolders_
   - 🔍 replacer-util:  _Find and replace strings or template outputs in text files_
   - 🔢 rev-web-assets:  _Revision web asset filenames with cache busting content hash fingerprints_
   - 🚆 run-scripts-util:  _Organize npm package.json scripts into groups of easy to manage commands_
   - 🚦 w3c-html-validator:  _Check the markup validity of HTML files using the W3C validator_

---
To see some example HTML results, run npm install, npm test, and then node spec/examples.js`.
Feel free to submit questions at:

github.com/center-key/pretty-print-json/issues
MIT License |
Blog post