How do I prevent code written in my <pre> from rendering?

Question

It does something similar to what stack overflow does here where when you write a block of code it beautifies it and adds syntax highlighting.

The problem I am haveing is if I write code like this

 <pre class="prettyprint">
   <div class="specialForm">
   ...
 </div>
 </pre>

instead of rendering the text just as stack overflow does, it actually renders the DIV on the page and I have no clue what I am doing wrong

Answer 1

If you look at the source here in stackoverflow, your post is actually:

&lt;pre class="prettyprint"&gt;
   &lt;div class="specialForm"&gt;
   ...
 &lt;/div&gt;
 &lt;/pre&gt;

This prevents the browser from treating them as html syntax and it prints literal < , > etc.