styling and showing the json in visualforce page

	<apex:page controller="JsonFormatter">
	<apex:form >
	<pre id="myId">
	</pre>
	<apex:commandButton onclick="callme();" value="Click me"/>
	</apex:form>
	<style type='text/css'>
	pre {
	outline: 1px solid #ccc;
	padding: 5px;
	margin: 5px;
	}
	.string {
	color: green;
	}
	.number {
	color: darkorange;
	}
	.boolean {
	color: blue;
	}
	.null {
	color: magenta;
	}
	.key {
	color: red;
	}
	</style>
	<script>
	function callme() {
	alert(syntaxHighlight());
	document.getElementById("myId").innerHTML = syntaxHighlight();
	}
	function syntaxHighlight() {
	var json = {!jsonStr};
	if (typeof json != 'string') {
	json = JSON.stringify(json, undefined, 2);
	}
	json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,
	'&gt;');
	return json
	.replace(
	/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
	function(match) {
	var cls = 'number';
	if (/^"/.test(match)) {
	if (/:$/.test(match)) {
	cls = 'key';
	} else {
	cls = 'string';
	}
	} else if (/true|false/.test(match)) {
	cls = 'boolean';
	} else if (/null/.test(match)) {
	cls = 'null';
	}
	return '<span class="' + cls + '">' + match
	+ '</span>';
	});
	}
	</script>
	</apex:page>

view raw JSONFormatter Visualforce Page hosted with ❤ by GitHub