Coloring a single word with CSS

Question

I want to set the color of individual words within a <pre> block (roughly speaking, for displaying code with syntax highlighting). The <font> tag is deprecated in favor of using CSS, fair enough; what's the required syntax? In particular, in what element should the words be wrapped? I've previously used <div> to mark chunks of text for CSS styling, but that would seem only suitable for marking full paragraphs.

Answer 1

You should use the simplest, most generic inline element: <span>. For each type of token, give one or more appropriate classes to the span. For example:

<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>

See it in action.

Update: StackOverflow also does code highlighting -- the code just above is highlighted! What does the HTML for that look like? Viewing the source HTML shows that the first line is highlighted using

<span class="tag">&lt;span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">&gt;</span>
<span class="pln">int</span>
<span class="tag">&lt;/span&gt;</span>

// and it goes on