Why is my "pre" HTML tag not working in one specific instance? [duplicate]

Question

This question already has answers here:

How to escape < and > inside <pre> tags (8 answers)

Closed 8 years ago.

I have some html that uses a few "pre" tags to preserve code snippets, using "html" as the lang. For the most part, it works, but in one specific instance, namely:

<pre lang="html">
    <li><a runat="server" href="~/Images">Images</a></li>
</pre>

Instead of preserving the snippet, it shows a bullet and a hyperlinked "Images" - what the deuce?

The whole shebang can be seen, malformed, beneformed, and/or mutilated at: http://jsfiddle.net/7BSLc/

Answer 1

<pre> is for telling the browser to keep white space formatting and doesn't tell the browser not to render html elements within. you need to encode the html you're trying to put in. You can use encoded values for the angle brackets < and it will render the html as text instead of randering the html. http://jsfiddle.net/7BSLc/9/

Answer 2

It is ugly, but it works:

<li><a runat="server" href="~/Images">Images</a></li>

Answer 3

HTML-Elements are interpreted within pre-elements! You should use HTML-entities for HTML-specific chars.