How to use JavaScript to style the code in a pre element?

How to use JavaScript to style the code in a pre element?

How is it possible to highlight the code inside a pre element? There is
already questions about highlighting it, but the answers is all in JQuery.
Is it possible to do it without the tags and it's id, for example:
This is with the tags and it's id's:
<pre>
<div id="tag_open">&lt;</div><div id="tag_value">div</div><div
id="tag_attr">id=</div><div id="tag_attr-val">"div"</div><div
id="tag_close">&gt;</div>
</pre>
And it's CSS:
#tag_open {
color: blue;
}
#tag_close {
color: blue;
}
#tag_value {
color: blue;
}
#tag_attr {
color: red;
}
#tag_attr-val {
color: purple;
font-weight: bold;
}
This is without the tags and it's id's:
<pre onload="highlight()">
&lt;div id="div"&gt;
</pre>
And with the JavaScript:
function colorize(){
//the script here
}