Cacher is the code snippet organizer for pro developers

var JSON_PRETTY = function (string) {

  var pretty = {
    "parse": function (member) {
      return this[(member == undefined) ? 'null' : member.constructor.name.toLowerCase()](member);
    },

    "null": function (value) {
      return this['value']('null', 'null');
    },
    "array": function (value) {
      var results = '';
      for (var x=0; x < value.length; x++) {
        results += '<li>' + this['parse'](value[x]) + '</li>';
      }
      return '[ ' + ((results.length > 0) ? '<ul class="array">' + results + '</ul>' : '') + ' ]';
    },
    "object": function (value) {
      var results = '';
      for (member in value) {
        results += '<li>' + this['value']('object', member) + ': ' + this['parse'](value[member]) + '</li>';
      }
      return '{ ' + ((results.length > 0) ? '<ul class="object">' + results + '</ul>' : '') + ' }';
    },
    "number": function (value) {
      return this['value']('number', value);
    },
    "string": function (value) {
      return this['value']('string', value);
    },
    "boolean": function (value) {
      return this['value']('boolean', value);
    },

    "value": function (type, value) {
      if (/^(http|https):\/\/[^\s]+$/.test(value)) {
        return this['value'](type, '<a href="' + value + '" target="_blank">' + value + '</a>');
      }
      return '<span class="' + type + '">' + value + '</span>';
    }
  };

  var parse = {
    "error": function (error) {
      return '<h1>Unable to parse JSON.</h1><p><h2>Error Message:</h2><textarea>' + error + '</textarea><br /><br /><h2>Response:</h2><textarea>' + string + '</textarea></p>';
    }
  }

  try {
    var output = pretty.parse (eval ('(' + string + ')'));
  }
  catch (error) {
    var output = parse.error (error);
  }

  return output;
};

body { font-family: monospace; font-size: 1.1em; }

ul { margin: 0 0 0 .2em; list-style: none; }
  li { padding: 0; margin: 0;}
  li:after { content: ','; }
  li:last-child:after { content: ''; }

span.object { font-weight: bold; }

span.string, span.string a { color: green; }
  span.string:before { content: '"'; }
  span.string:after { content: '"'; }

span.number { color: blue; }

span.null { color: red; }

span.boolean { color: gray; }

span.link a { color: green; text-decoration: underline; }

textarea { font-family: monospace; font-size: 1.1em; width: 98%; height: 30%; }

pre {
  word-wrap: initial !important;
  white-space: pre !important;
}