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 stil开发者_如何学Pythonl 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>

"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 &, < as < and > as >.

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

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

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.

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

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.