Pretty Print JSON Data in Color

by LeeMellinger

HTML

<pre><code id=jsonViewer></code></pre>

CSS

pre {
    background-color: ghostwhite;
    border: 1px solid silver;
    padding: 10px 20px;
    margin: 20px;
}
.json-key {
    color: brown;
}
.json-value {
    color: navy;
}
.json-string {
    color: olive;
}

JavaScript

if (!library) var library = {};

library.json = {
    replacer: function (match, pIndent, pKey, pVal, pEnd) {
        var key = '<span class=json-key>';
        var val = '<span class=json-value>';
        var str = '<span class=json-string>';
        var r = pIndent || '';
        if (pKey) r = r + key + pKey.replace(/[": ]/g, '') + '</span>: ';
        if (pVal) r = r + (pVal[0] == '"' ? str : val) + pVal + '</span>';
        return r + (pEnd || '');
    },
    prettyPrint: function (obj) {
        var jsonLine = /^( *)("[\w]+": )?("[^"]*"|[\w.+-]*)?([,[{])?$/mg;
        return JSON.stringify(obj, null, 3)
            .replace(/&/g, '&amp;').replace(/\\"/g, '&quot;')
            .replace(/</g, '&lt;').replace(/>/g, '&gt;')
            .replace(jsonLine, library.json.replacer);
    }
};

        var menu = new Array();
        var menuItem = {};
        var menuSubItem = {};

        menuSubItem = {};
        menuSubItem.text = "New";
        menuSubItem.rowid = 0;
        menuSubItem.level = 1;
        menuSubItem.url = "------";
        // menuSubItem.subMenu = {};

        menuItem = {};
        menuItem.text = "File";
        menuItem.rowid = 0;
        menuItem.level = 1;
        menuItem.url = "------";
        menuItem.subMenu = menuSubItem
        // menuItem.push(menuSubItem);
        menu.push(menuItem);



        menuItem = {};
        menuItem.text = "Activities";
        menuItem.rowid = 21;
        menuItem.level = 1;
        menuItem.url = "------";
        //menuItem.subMenu = {};
        menu.push(menuItem);

$('#jsonViewer').html(library.json.prettyPrint(menu));