Syntax Highlighting

<!--
Syntax Highlighting
s1 = script
s2 = inputs
s3 = div

-->
<style>
s1
{
    background-color:#FAA;
}
#highlight
{
    position:absolute;
    left:3px;
    right:0px;
    top:3px;
    bottom:0px;
    font-size:14px;
    font-family:Courier;
    overflow:hidden;
}
#code
{
    position:absolute;
    left:0px;
    top:0px;
    height:100%;
    width:100%;
    background-color:rgba(255,255,255,0);
    font-size:14px;
    font-family:Courier;
}
</style>
<script>
var tags = ["script","input"
function updateCode(area)
{
    var highlight = document.getElementById("highlight");
    highlight.innerText = area.value+"\n\n";
    updateScroll(area);
    regST = new RegExp("\&lt;"+tags[i]+"\&gt;");
    regST.global = true;
    regET = new RegExp("\&lt;\/"+tags[i]+"\&gt;");
    regET.global = true;
    highlight.innerHTML = highlight.innerHTML.replace(regST,"<s1>&lt;script&gt;");
    highlight.innerHTML = highlight.innerHTML.replace(/\&lt;\/script\&gt;/g,"&lt;/script&gt;</s1>");
}
function updateScroll(area)
{
    var highlight = document.getElementById("highlight");
    highlight.scrollTop = area.scrollTop;
}
</script>
<div id="highlight"></div>
<textarea id="code" oninput="updateCode(this)" onscroll="updateScroll(this)">
</textarea>