CODEWITHSUNDEEP
htmlmarkupcode-snippets
Joel Glovier
Joel Glovier

Reputation: 7679

Why are my <pre> and <code> tags reading the markup instead of producing code snipets?

I'm working on this resource page for Churches who want to assist my organization (CURE International) in the Haiti earthquake relief effort: http://blog.helpcurenow.org/test/mockups/jan2010/jan2010_haiti_church_resources.html

The trouble I'm having is that under step 4 you'll see I've created banner ads and I'm trying to produce code snipets (a.k.a. code blocks) for the users to copy and paste into their blog/site/whatever.

I've used the "pre" and "code" tags, but the browser is still rendering the HTML instead of displaying the markup as text.

Can anybody help me as to why I'm getting this result?

Here's a sample of the markup: 

<li class="haitiWebBanner">
<p class="webBannerSize">300 x 250</p>
<a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a>

<pre><code class="html"><a href="http://helpcurenow.org/haitirelief"><img src="http://static.helpcurenow.org/images/campaigns/jan2010/haiticrisis/cure-haiti-banner-300x250.jpg" title="Click Here to Donate Now!" alt="Help save lives in Haiti by supporting the relief effort through CURE International" width="300" height="250" border="0" /></a></code></pre>

Upvotes: 1

Views: 449

Answers (5)

RHSeeger
RHSeeger

Reputation: 16282

The <pre></pre> tag pair doesn't change how the contents in them are parsed by the browser (ie, as HTML with tags the browser needs to parse). Rather, it just tells the browser that the contents inside the pair as unformatted and should be presented to the user as such.

What you need to do is escape the HTML (ie, "<" to "&lt;", etc), so the browser knows it should display the raw characters.

Upvotes: 2

Quentin
Quentin

Reputation: 944455

"Code" means "This is marked up code"

"Pre" means "This data has been preformatted" (as far as whitespace is concerned)

Neither of them mean "This data shouldn't be treated as HTML"

Represent & as &amp;, < as &lt; and > as &gt;.

Upvotes: 6

Malfist
Malfist

Reputation: 31815

That's because the code and pre tags don't work that way. Change your '<' to '&lt;' and the '>' to '&gt;' and it will work as you want it too.

Upvotes: 1

Paul Tomblin
Paul Tomblin

Reputation: 182880

For the code within the <pre> tags, do a global search and replace of "<" with "&lt;".

Upvotes: 1

Robert Greiner
Robert Greiner

Reputation: 29762

You still need to take special characters into account &lt ; and &gt ;

<pre><code class="html">&gt;a href=......... &lt;

Upvotes: 3

Related Questions