syntax highlighting

<!DOCTYPE html>
<html>
<head>
    <style>
        #in,#out
        {
        display:block;
        position:absolute;
        width:95%;
        height:95%;
        white-space:pre;
        font-family:monospace;
        word-wrap:break-word;
        background-color:rgba(0,0,0,0);
        padding: 0;
        margin:0;
        resize: none;
        border:0px solid;
        letter-spacing:0.0px;
        font-size: 12px;
        }
        #in
        {
        color:rgba(0,0,0,1);
        }
        #out
        {
        overflow:auto;
        pointer-events:none;
        }
        #res
        {
         display:none;
        }
    </style>
    <script>
        window.onerror = function(event)
        {

    Android.Shout(event);
        }

        String.prototype.hashCode = function() {
          var hash = 0, i, chr, len;
          if (this.length == 0) return hash;
          for (i = 0, len = this.length; i < len; i++) {
            chr   = this.charCodeAt(i);
            hash  = ((hash << 5) - hash) + chr;
            hash |= 0; // Convert to 32bit integer
          }
          return hash;
        };
    </script>
    <script>

  var reserved=/^(abstract|arguments|boolean|break|byte|case|catch|char|class|const|continue|debugger|default|delete|do|double|else|enum|eval|export|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|let|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|volatile|while|with|yield)$/;


  var H = {};
  var i=0;

  function $(id)
  {
    return document.getElementById(id);
  }

  function highlight(text)
  {
    if(H[text])return H[text];
    else
    {
      return H[text] = "hsl("+(text.hashCode()%360)+",70%,50%)";
    }
  }

  function Rehighlight(event){
      $("out").innerHTML = $("in").value
      .replace(/&([a-z]+)(;|$)/g,"&amp;$1$2")
      .replace(/</g,"&lt;")
      .replace(/>/g,"&gt;")
      .replace(/([^a-z0-9$_]|^)([a-z0-9$_]+?)(?=[^a-z0-9$_]|$)/gi,function(a,b,c,d){

        var h = "";
        if(/^&[a-z]+(;|$)/i.test(a))
        {
          return a;
        }
        if(/^[0-9]/.test(c))
        {
          h = "#AAAAFF";
        }
        else if(reserved.test(c))
        {
          h = "#999";
        }
        else
        {
          h = highlight(c);
        }


        return b+"<span style='color:"+h+";'>"+c+"</span>";
      })
      .replace(/\t/g,"<span style='letter-spacing:1.3px;'>&#09;</span>");


      $("in").addEventListener("scroll",function(event){
        $("out").scrollTop = $("in").scrollTop;
        $("in").scrollTop = $("out").scrollTop;
      },false);

      $("in").addEventListener("resize",function(event){
        $("out").style.width = $("in").style.width;
        $("out").style.height = $("in").style.height;
      },false);
    }


  window.addEventListener("load",function(event){
    $("in").addEventListener("input",Rehighlight,false);
    switch(location.hash)
    {
        case "#init":
            $('in').value = "function Initialise()\n{\n//access resources via Resource.id\n\n}";
        break;
        case "#draw":
            $('in').value = "function GameLoop(step,canvas,context)\n{\n//access resources via Resource.id\n\n}";
        break;
    }
    Rehighlight(event);
  },false);
  </script>
</head>
<body>
<textarea id="in"></textarea>
<div id="out"></div>
<div id="res"></div>
</body></html>