how can you highlight text multiple colors within textarea?

I was wondering what css tricks/methods you can use to highlight text multiple colors within the same textarea. I am aware of how to change attributes to the main textarea tag itself, but this changes the colors for the entire textarea, so thats 1 color for the whole textarea

I'm inspired by this page:
http://tinyurl.com/2ks2be

If you look at the source of html/css you will find:
CSS:
#search {height:60px; width:99.75%;}
#input {height:375px; width:99.75%; margin-top:10px;}
.smartField {position:relative; overflow:auto; border:1px solid #ccc; background:#f9f9f9;}
.smartField pre,
.smartField textarea {font:100% "courier new",monospace; width:100%;}
.smartField pre {z-index:1; color:#f9f9f9;}
.smartField textarea {z-index:2; border:0; background:transparent; position:absolute; top:0; height:100%; min-height:100%; overflow:hidden;}

/* Highlighting ------------------------------------- */
b, i, u {font-weight:normal; font-style:normal; text-decoration:none;}
#input b {background:#fff000; color:#fff000;}
#input i {background:#80c0ff; color:#80c0ff;}
#search b {background:#aad1f7; color:#aad1f7;}
#search i {background:#f9ca69; color:#f9ca69;}
#search i b {background:#f7a700; color:#f7a700;}
#search i u {background:#efba4a; color:#efba4a;} /* No RB equivalent */
#search b.g1 {background:#d2f854; color:#d2f854;}
#search b.g2 {background:#9ec70c; color:#9ec70c;}
#search b.g3 {background:#ecc9f7; color:#ecc9f7;}
#search b.g4 {background:#54b70b; color:#54b70b;}
#search b.g5 {background:#b688cf; color:#b688cf;}
#search b.err {background:#ff4300 !important; color:#ff4300 !important;}

HTML:
<div id="body">
<div id="search" class="smartField">
<textarea cols="100" rows="3" tabindex="1">look +_++how it is (hi(ghligh)ted)</textarea>

</div>
<div id="input" class="smartField">
<textarea cols="100" rows="10" tabindex="2"></textarea>
</div>
</div>

JS script: http://tinyurl.com/35zctq


What puzzles me is that there are no tags inside the textarea itself and around the highlighted text, yet obviously there are css styles made for highlighting text. So how can you apply a style if you don't put tags around the text!??
I'm interested in seeing any js and/or html and/or css solution to this

-thanks

A textarea is for plain text without any special markup. If you want to apply more than one style to different parts of the content then you can't use a text area. Why would you want to style what someone types in differently depending on what they type anyway?

Why would you want to style what someone types in differently depending on what they type anyway?

Imagine your web editor as a textarea. =P