Prism HTML highlighter
I want to add that another very simple possibility is to use the archaic <xmp>-tag like so:
<pre><code class="language-html">
<xmp>
<p>this markup is now rendered as expected although your IDE might be upset about you using that old tag</p>
</xmp>
</code></pre>
Use <code class="language-markup"> to style html code.
Also, you only need to escape the beginning of the tags with <, don't worry about the > characters. The easiest way is to paste your html code into the pre tag, then perform a find and replace for all < characters.
This should work:
<!DOCTYPE html>
<html>
<head>
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<script src="prism.js"></script>
<pre><code class="language-markup">
<p class="red">red text </p>
</code></pre>
</body>
</html>