Format JSON Data With Colored Syntax - pretty-print-json

jQuery pretty-print-json is a web-based tool used to format/beautify JSON data and colorize key/value pairs depending on the data type.

1. Install & import.

# NPM
$ npm install pretty-print-json --save

// ES 6
import prettyPrintJson from 'pretty-print-json';

2. Or load the pretty-print-json.js and pretty-print-json.css in the webpage which has jQuery library installed.

<link rel="stylesheet" href="pretty-print-json.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="pretty-print-json.js"></script>

3. Create a container to display the formatted JSON.

<pre id="example"></pre>

4. Beatufity and output the JSON you provide.

const myData = { 
      "name":"John",
      "age":30,
      "cars": {
        "car1":"Ford",
        "car2":"BMW",
        "car3":"Fiat"
      } 
};

$('#example').html(prettyPrintJson.toHtml(myData));

This awesome jQuery plugin is developed by center-key. For more Advanced Usages, please check the demo page or visit the official website.