JSFiddle - React, Tailwind, and code Playground

HTML

<code><div id="code_editor" contenteditable tabindex="1"></div></code>

CSS

#code_editor{
    width:600px;
    height:100px;
    box-shadow:inset 0px 0px 2px black;
    padding:5px;
    overflow-y:scroll;
}
.start{
    color:red;
}
}

JavaScript

var replace = function(text,q,r){
    text=text.split(q);
    var result = text[0];
    for(var i = 1; i < text.length; i++){
        result += r + text[i];
    }
    return result;
};

var run = function(){
    document.getElementById('code_editor').innerHTML
        = replace( document.getElementById('code_editor').textContent,"select","<span class='start'>select</span>"); 
}
$('#code_editor').keyup(function(event){run();});