JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://raw.github.com/cope/jsonHighlight/master/jsonHighlight.min.js"></script>

<pre id="out"></pre>

JavaScript

var obj = {
    test1: "test value",
    test2: 10,
    test3: true,
    test4: [
        "one",
        "two",
        "three"]
};

var text = '{"test1": "test value",' +
    '"test2": 10,"test3": true,"test4": [' +
    '"one","two","three"]}';

var out = document.getElementById("out");

out.innerHTML = "from an object:<br />" + cope.Highlight.highlight(obj, {indent: 3});

out.innerHTML += '<br /><br /><hr /><br />';

out.innerHTML += 'from a string:<br />' + cope.Highlight.highlight(text, {indent: 3, useTabs: true});