Search code examples
htmlmarkupcode-snippets

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>


Solution

  • "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;.