How to show <div> tag literally in <code>/<pre> tag?

I'm using <code> tag inside of a <pre> tag to show code on my blogger blog. Unfortunately it doesn't work with HTML tags. Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML? This is what I do right now:

<pre>
 <code>
 .class {        
   color:red;
 }
 // I would like HTML code inside this
 </code>
</pre>

Which works ok for everything except HTML. Any idea how to achieve this? Thanks.

Unfortunately it doesn't work with HTML tags.

<code> means "This is code", <pre> means "White space in this markup is significant". Neither means "The content of this element should not be treated as HTML", so both work perfectly, even if they don't mean what you want them to mean.

Is there any way to show "<div>" inside of <pre> or <code> tag without actually interpreting it as HTML?

If you want to render a < character then use <, with > for > and & for &.

You can't (in modern HTML) write markup and have it be interpreted as text.

It seems like a readonly textarea does pretty much what you want.

<textarea readonly> <!-- html code --> </textarea>