JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<h1>Open your console</h1>

<div id="output"></div>
<textarea id="eval"></textarea>

CSS

#output {
    height: 80%;
    width: 100%;
}
#eval {
    width: 100%;
    height: 20%;
    position: fixed;
    bottom: 0px;
    resize: none;
}

JavaScript

var ish, _eval
ev = document.getElementById("eval"),
output = document.getElementById("output"),
    consoleOrig = {},
_call = Function.prototype.call;

["log","error","debug"].forEach (function (a) {
    consoleOrig [a] = console[a];
    console [a] = function (ex) {
        [].unshift.call (arguments, "   |  "); 
        consoleOrig.log.call (console,ex);
        output.appendChild (document.createTextNode ( [].join.call (arguments, " asd ")));
        consoleOrig [a].apply (console, arguments);
    }
});

function appendExpression(expr, fromPage) {
    var pre = document.createElement("pre");
    var cod = document.createElement("code");
    var preRes = document.createElement("pre");
    var codRes = document.createElement("code");
    expr = expr || "";
     
    cod.appendChild(document.createTextNode(">  |  " + expr.split("\n").join("\n     ")));
    pre.appendChild(cod);
    output.appendChild(pre);

    if (ish && !fromPage) {
        try {
            result = (_eval.call(ish, "with ( console && console._commandLineAPI ) {" + expr + "}", "", true, false, false) || "undefined").toString();
        } catch (e) {
            result = e.stack;
        }
    } else {
        try {
            result = eval(expr);
        } catch (e) {
            result = e.stack;
        }
    }
    
    result = result || "";
    
    codRes.appendChild(document.createTextNode("   |  " + result.split("\n").join("\n     ")));
    preRes.appendChild(codRes);
    output.appendChild(preRes);

    return result;
}

console.log("Your evaluated expressions will we appended to the body");
Function.prototype.call = function asd() {
    if (arguments.length > 0 && this.name === "evaluate") {
        ish = arguments[0];
        _eval = ish.evaluate;

        Function.prototype.call = _call;
        ish.evaluate = function (expr) {
            var plainExpr;
            expr = expr || "";
            plainExpr = expr.split("\n")
            if ("console._commandLineAPI) || {}) {" ===...