html - 使用 CSS 为单个单词着色

Question

我想在 <pre> 中设置单个单词的颜色 block (粗略地说，用于显示带有语法突出显示的代码)。 <font>标签已弃用，有利于使用 CSS，这很公平；所需的语法是什么？特别是，单词应该包裹在什么元素中？我以前用过 <div>为 CSS 样式标记文本 block ，但这似乎只适合标记完整的段落。

Answer 1

您应该使用最简单、最通用的 inline元素: <span> .对于每种类型的 token ，为跨度提供一个或多个适当的类。例如:

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

See it in action .

更新:StackOverflow 也进行代码高亮显示——上面的代码被高亮显示了!它的 HTML 是什么样子的？查看源 HTML 显示第一行使用

突出显示

<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