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

Question

I am creating an online tutorial and I'm displaying the html code by wrapping it in the <pre><code> tags. I would like to be able to highlight certain sections of the code. Is there a way to do that when the html is wrapped in the the <pre><code> tags?

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

I would like to be able to highlight the "page" value of the data-role attribute. I tried to surround the "page" code with a span tag and style it, but the span tag showed up in the code. I also tried to use < and $gt; thinking maybe that would escape the < > around the span tags. It did, but it showed up in the code.

Again, I'm trying to display the code (without screenshots) with certain sections of the code highlighted with yellow.

Answer 1

You have to escape everything but the tag. I used <mark> since it seems more semantically correct:

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

Example http://jsfiddle.net/MFzsS/1/