JSFiddle - React, Tailwind, and code Playground

by Glutamat

HTML

<h1>Open your console</h1>

JavaScript

function appendExpression(expr) {
    var pre = document.createElement("pre");
    var cod = document.createElement("code");
    var preRes = document.createElement("pre");
    var codRes = document.createElement("code");
    var result;
    
    cod.appendChild(document.createTextNode(">  |  " + expr.split("\n").join("\n     ")));
    pre.appendChild(cod);
    document.body.appendChild(pre);
    
    try {
        result = (_eval.call(ish, "with ( console && console._commandLineAPI ) {" + expr + "}", "", true, false, false) || "undefined").toString();
    } catch (e) {
        result = e.stack;
    }
    
    
    codRes.appendChild(document.createTextNode("   |  " + result.split("\n").join("\n     ")));
    preRes.appendChild(codRes);
    document.body.appendChild(preRes);
    
}
var ish, _eval,
    _call = Function.prototype.call;
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) {
            expr = expr || "";
            expr = expr.split("\n")
            if ("console._commandLineAPI) || {}) {" === expr[0].slice(-33)) {
                expr = expr.slice(1, -1).join("\n");
                
                if (expr !== 'this') {
                    appendExpression(expr);
                }
                
            } else {
                expr = expr.join("\n");
            }
            
            return _eval.apply(this, arguments);
        };
        return _call.apply(this, arguments);
    }
};