Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/center-key/pretty-print-json

🦋 Pretty-print JSON data into HTML to indent and colorize (with TypeScript declarations)
https://github.com/center-key/pretty-print-json

color html javascript json pretty-print pretty-print-json trailing-commas typescript

Last synced: 4 days ago
JSON representation

🦋 Pretty-print JSON data into HTML to indent and colorize (with TypeScript declarations)

Host: GitHub
URL: https://github.com/center-key/pretty-print-json
Owner: center-key
License: mit
Created: 2018-11-18T10:05:07.000Z (about 6 years ago)
Default Branch: main
Last Pushed: 2024-10-10T12:06:09.000Z (3 months ago)
Last Synced: 2024-12-21T01:06:29.612Z (11 days ago)
Topics: color, html, javascript, json, pretty-print, pretty-print-json, trailing-commas, typescript
Language: TypeScript
Homepage: https://pretty-print-json.js.org
Size: 412 KB
Stars: 134
Watchers: 3
Forks: 25
Open Issues: 4
Metadata Files:
- Readme: README.md
- License: LICENSE.txt

Awesome Lists containing this project

README

        # pretty-print-json



_Pretty-print JSON data into HTML to indent and colorize_

[![License:MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/center-key/pretty-print-json/blob/main/LICENSE.txt)

[![npm](https://img.shields.io/npm/v/pretty-print-json.svg)](https://www.npmjs.com/package/pretty-print-json)

[![Hits](https://data.jsdelivr.com/v1/package/npm/pretty-print-json/badge?style=rounded)](https://www.jsdelivr.com/package/npm/pretty-print-json)

[![Build](https://github.com/center-key/pretty-print-json/actions/workflows/run-spec-on-push.yaml/badge.svg)](https://github.com/center-key/pretty-print-json/actions/workflows/run-spec-on-push.yaml)

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

![Screenshot](docs/screenshot.png)

## A) Try It Out

Interactive online tool to format JSON:


https://pretty-print-json.js.org

## B) Setup

### 1. Web browser

Load from the [jsdelivr.com CDN](https://www.jsdelivr.com/package/npm/pretty-print-json):

```html

...

```

The minified JS file is 2 KB.

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.

### 2. Node.js server

Install package for node:

```shell

$ npm install pretty-print-json

```

Import into your application:

```javascript

import { prettyPrintJson } from 'pretty-print-json';

```

## C) Usage

### 1. API

```javascript

const html = prettyPrintJson.toHtml(data, options?);

```

### 2. Example

##### HTML:

```html



```

##### JavaScript:

Pass data into `prettyPrintJson.toHtml(data, options)` and display the results.

```javascript

const data = {

   active: true,

   mode:   '🚃',

   codes:  [48348, 28923, 39080],

   city:   'London',

   };

const elem = document.getElementById('account');

elem.innerHTML = prettyPrintJson.toHtml(data);

```

### 3. Options

| Name (key)       | Type        | Default | Description                                                 |

| :--------------- | :---------- | :-----: | :---------------------------------------------------------- |

| `indent`         | **integer** | `3`     | Number of spaces for indentation.                           |

| `lineNumbers`    | **boolean** | `false` | Wrap HTML in an `` 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](docs/screenshot-dark.png)

## D) TypeScript Declarations

See the TypeScript declarations at the top of the

[pretty-print-json.ts](dist/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](package.json) for an

interesting approach to organizing build tasks.

**CLI Build Tools for package.json**

   - 🎋 [add-dist-header](https://github.com/center-key/add-dist-header):  _Prepend a one-line banner comment (with license notice) to distribution files_

   - 📄 [copy-file-util](https://github.com/center-key/copy-file-util):  _Copy or rename a file with optional package version number_

   - 📂 [copy-folder-util](https://github.com/center-key/copy-folder-util):  _Recursively copy files from one folder to another folder_

   - 🪺 [recursive-exec](https://github.com/center-key/recursive-exec):  _Run a command on each file in a folder and its subfolders_

   - 🔍 [replacer-util](https://github.com/center-key/replacer-util):  _Find and replace strings or template outputs in text files_

   - 🔢 [rev-web-assets](https://github.com/center-key/rev-web-assets):  _Revision web asset filenames with cache busting content hash fingerprints_

   - 🚆 [run-scripts-util](https://github.com/center-key/run-scripts-util):  _Organize npm package.json scripts into groups of easy to manage commands_

   - 🚦 [w3c-html-validator](https://github.com/center-key/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](https://github.com/center-key/pretty-print-json/issues)

[MIT License](LICENSE.txt) |

[Blog post](https://blog.centerkey.com/2013/05/javascript-colorized-pretty-print-json.html)