CODEWITHSUNDEEP
html
M_66
M_66

Reputation: 299

Highlighting sections of HTML/code that is wrapped in <pre><code> tags

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 &lt; 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.

Upvotes: 2

Views: 1230

Answers (1)

elclanrs
elclanrs

Reputation: 94131

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/

Upvotes: 3

Related Questions