Brainflak syntax highlighter

it looks decent

by Conor O'Brien

HTML

<textarea id="code">(
 {}   pop
 &lt;&gt;   toggle
)     push to active
&lt;&gt;    toggle
(
 {}   pop
 []   -1
)  push to active
while top is not zero {
 (
  {}  pop
  []  -1
 )    to active stack
 &lt;&gt;   switch
 (
  (
   {} pop
  )   push
 )    push
 &lt;&gt;   toggle
}     push
&lt;&gt;    toggle
while top is not zero {
 (
  {}  pop
  &lt;&gt;  toggle
  {}  pop
 )    push
 &lt;&gt;   toggle
}
&lt;&gt;    toggle</textarea>
<button id="submit">Go</button>
<div id="output">

</div>

CSS

textarea { width: 95%; height: 5em; }
textarea, #output { font-family: Consolas, monospace; }
#output { background: #444; padding: 15px; white-space: pre-wrap; }
.brack { color: lightgreen; }
.paren { color: lightblue; }
.angle { color: yellow; }
.quads { color: red; }
.nilad { }
.monad { font-weight: bold; text-shadow: 0px 0px 4px; }
.comment { color: lightgray; }

JavaScript

// brainflak syntax highlighter
function highlight(bflak){
	bflak = bflak.match(/\[\]|\(\)|{}|<>|.|\n/g);
  var res = document.createElement("div");
  res.id = "bflak";
  for(var i = 0; i < bflak.length; i++){
  	var cur = document.createElement("span");
    switch(bflak[i].length){
    	case 1: // monad token
      	cur.classList.add("monad");
      	break;
     	default:// nilad
      	cur.classList.add("nilad");
      	break;
    }
    if(bflak[i].search(/[{}]/) >= 0) cur.classList.add("brack");
    else if(bflak[i].search(/[()]/) >= 0) cur.classList.add("paren");
    else if(bflak[i].search(/[<>]/) >= 0) cur.classList.add("angle");
    else if(bflak[i].search(/[\[\]]/) >= 0) cur.classList.add("quads");
    else {
    	cur.className = "comment";
    }
    cur.appendChild(document.createTextNode(bflak[i]));
    res.appendChild(cur);
  }
  output.innerHTML = "";
  output.appendChild(res);
}

submit.addEventListener("click",function(){
	highlight(code.value);
});
highlight(code.value);