Why does code render in code block?

Question

I want to display HTML in a webpage. I've wrapped in a code block but the last two lines still execute/render. What am I doing wrong?

<pre><code>
div {background: brown;}
div.bluebg {background: blue;}
<div>default brown background</div>
<div class="base">blue background</div>
</code></pre>

The last two lines were wrapped in div tags. I notice stackoverflow strips them out. I don't want to strip them but modify I guess with < and >. Is there a listing of tags that should be modified to render them in a webpage? Is there an online program that can convert these to the above syntax?

Answer 1

Judging by the contents of your post I assume you're talking about showing code in Markdown on Stack Overflow.

Don't wrap your code in <pre> and <code>, just indent it by 4 spaces, like so:

div {background: brown;}
div.bluebg {background: blue;}
<div>default brown background</div>
<div class="base">blue background</div>

Markdown actually parses HTML (at, least these tags) as you can see. Outside of markdown you'd still have to change <div> to <div> for it to render properly anyway - using code/pree doesn't stop the code from rendering.

Answer 2

You need to replace < with <, > with > and & with & and that's it.

Answer 3

I do not think [those tags] mean what you think they mean.

<pre> allows you to preserve white space and line feeds. <code> allows you to semantically indicate that code is being displayed on your page. Both have some default styles (such as applying a fixed-width font), but neither one does anything to escape <, >, &, or ", so any unescaped HTML code you put in between those tags is going to be processed as HTML. You'll have to use <, >, &, and ". Here's a page where you can paste in text and have it escaped: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/