Short version: You need to encode the HTML tags that shouldn’t be parsed using & lt; and & gt; (without the spaces) to replace the brackets, which will output the appropriate tags and they won’t be parsed by the browser. Yes, this is going to be an arduous process with the number of HTML tags you have in the snippet you posted. You might look into a text editor that provides a sophisticated find-and-replace mechanism that would allow you to globally replace the brackets with their encoded equivalents.
Long version: This is partially a fault of how WordPress processes text and partially a fault of how browsers parse HTML.
When you use the Text editor, as you’re doing here, WordPress assumes you know exactly what you want and outputs your text more or less exactly how you enter it, resulting in “naked” HTML tags being output. The browser just displays the tags as the parser encounters them. In your case, the browser sees a <div> tag and starts a new section, then it sees an <h1> tag, so it displays the following text with the appropriate styling, etc. The parser isn’t “smart” enough to see that the tags are within a <code> section, it just displays them as-is. Encoding the brackets prevents this from happening.
(If you use the Visual editor, WordPress automatically encodes the brackets for you, which you can see in action if you switch between the two editors.)
Why doesn’t WordPress do it automatically? I have NEVER encountered this sort of thing with a code tag before! It’s kind of a bummer, I ended up installing a bloody pastebin plugin :(.
