JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<div id="json">
    [1, 2, "foo", "bar", true, null, {"why": 4, "is":null, "bro":"heim", "nested": {"object": "test"}, "take": {"two": 3}}, ["nested", "array", "test"]]
</div>

<div id="jsonOutput"></div>

CSS

#formattedJSON {
    font-family: monospace;
    list-style: none;
    margin: 5px;
}

.jsonArray li,
.jsonObject li {
    margin-left: 2em;
}

li.jsonCloseBracket,
li.jsonOpenBracket {
    display: block;
    font-weight: bold;
    margin-left: 0em;
}

.jsonDisclosure {
    cursor: pointer;
}

.jsonArray,
.jsonObject {}

.jsonKeyName {
    color: green;
    font-weight: bold;
}

.jsonKeyword {
    color: purple;
}

.jsonNumber {
    color: darkslateblue;
}

.jsonString {
    color: red;
}

.jsonKeyNameSeparator,
.jsonSeparator {
    clear: right;
    color: black;
}

JavaScript

/**
 * The MIT License (MIT)
 *
 * Copyright (c) <2013> <James Sumners>
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

;(function($){
  $.fn.formatJSON = function(options) {
    var _options,
        $disclosure,
        $json,
        $jsonList,
        $separator,
        append = function(){},
        isBoolean = function(){},
        jsonData = {},
        loopArray = function(){},
        loopObject = function(){};

    _options = {
      classes: {
        array:              "jsonArray",
        closeBracket:       "jsonCloseBracket",
        closedGroup:        "jsonClosedGroup",
        disclosure:         "jsonDisclosure",
        keyName:            "jsonKeyName",
        keyNameSeparator:   "jsonKeyNameSeparator",
        keyword:            "jsonKeyword",
        number:             "jsonNumber",
        object:             "jsonObject",
        openBracket:        "jsonOpenBracket",
        separator:          "jsonSeparator",
       ...