JSFiddle - React, Tailwind, and code Playground

by Ishan Khare

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//eirikb.github.io/angular-caret/caret.js"></script>
<body ng-app="highlighter">
    <div class="container borders" ng-controller="ColorController as color">
        <div id="background" class="borders expand overlay text-padding">
            {{ color.code }} voila!
        </div>
        <div id="caret" class="borders expand overlay text-padding">
            {{ color.caretText }}
        </div>
        <textarea id="text" class="borders expand overlay text-padding" ng-model="color.code" ng-change="color.change()">
        </textarea>
    </div>
</body>

CSS

.borders {
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
    border-radius: 3px;
}

.expand {
    padding: 10%;
    height: 80vh;
    width: 90vw;
}

.overlay {
    position: absolute;
    top: 20vh;
}

#background {
    z-index: 1;
}

#caret {
    z-index: 2;
    color: rgba(250,80,150, 0.5);
    white-space: pre;
}

#text {
    z-index: 3;
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}

.text-padding {
    padding: 10px;
    font-size: 1em;
    font-family: monospace;
}

JavaScript

var app = angular.module("highlighter",[]);

app.controller('ColorController', function () {
    this.code = "";
	this.caretText = "";
    this.caret = "&#x2588;";
    
    var whitespaces = [" ", "\t", "\n", "\v", "\r"];
    
    this.change = function() {
        this.caretText = "";
        angular.element(document.querySelector('#caret')).html(this.caretText)
        for(var i=0; i < this.code.length; i++) {
         	if(whitespaces.indexOf(this.code[i]) != -1) {
                // is a whitespace
                this.caretText += this.code[i];
            } else {
             	this.caretText += " ";
            }
        }
        
        this.caretText += this.caret;

angular.element(document.querySelector('#caret')).html(this.caretText)
        console.log(this.caretText);
    };
});