jsonHighlighterJS

Javascript JSON Highlighter

View the Project on GitHub cope/jsonHighlighterJS

jsonHighlighterJS

Javascript JSON Highlighter

Inspired by (read: stolen from) Stackoverflow: JSON pretty print using JavaScript.

Therefore, all credit goes to Pumbaa80.

Try it on jsfiddle.
(fails in Chrome due to the "MIME type" error, but seems to work fine in FF 24)

Usage:

html:

<head>
  ...
  <script type="text/javascript" src="js/jsonHighlighter.min.js"></script>
</head>
<body>
  ...
  <pre id="HighlightOutput"></pre>
</body>

javascript:

var out = document.getElementById("HighlightOutput");
out.innerHTML = cope.Highlighter.highlight(jsonObject); // jsonObject is a regular JS object
...
out.innerHTML = cope.Highlighter.highlight(jsonString); // jsonString is a valid JSON String

with jQuery:

var out = $("#HighlightOutput");
out.html(cope.Highlighter.highlight(jsonObject); // jsonObject is a regular JS object
...
out.html(cope.Highlighter.highlight(jsonString); // jsonString is a valid JSON String

Options (optional):

Indent:

out.innerHTML = cope.Highlighter.highlight(jsonObject, {indent: 3}); // set indentation to 3 space characters

Tabs: (useTabs:true overrides indent)

out.innerHTML = cope.Highlighter.highlight(jsonObject, {indent: 3, useTabs: true}); // use tabs for indentation