突出显示<pre><code> tags</code></pre>中包含的HTML /代码部分

Question

我正在创建一个在线教程，并通过将其包含在<pre><code>标记中来显示html代码。我希望能够突出显示代码的某些部分。当html包含在<pre><code>标签中时，有没有办法做到这一点？

<div data-role="page">
  <h1>Hello</h1>
</div>

我希望能够突出显示＆＃34;页面＆＃34; data-role属性的值。我试图围绕＆＃34;页面＆＃34;带有span标记的代码并将其设置为样式，但span标记出现在代码中。我还尝试使用<和$gt;，这可能会绕过span标记周围的< >。确实如此，但它出现在代码中。

同样，我试图显示代码（没有屏幕截图），代码的某些部分用黄色突出显示。

Answer 1

你必须逃避除标签之外的所有事情。我使用<mark>，因为它似乎在语义上更正确：

<pre><code>&lt;div <mark>data-role=&quot;page&quot;</mark>&gt;
  &lt;h1&gt;Hello&lt;/h1&gt;
&lt;/div&gt;</code></pre>

示例http://jsfiddle.net/MFzsS/1/