How to Escape < and > Inside <Pre> Tags

What do I need to escape inside the html pre tag

What happens if you use the <pre> tag to display HTML markup on your blog:

<pre>Use a <span style="background: yellow;">span tag with style attribute</span> to hightlight words</pre>

How to escape and inside pre tags

<pre>
    PrimeCalc calc = new PrimeCalc();
    Func<int, int> del = calc.GetNextPrime;
</pre>

Escape HTML Chars In the Pre Tag

tl;dr

You need to parse the input HTML. Use the DOMDocument class to represent your document, parse the input, find all <pre> tags (using findElementsByTagName) and escape their content.

Code

Unfortunately, the DOM model is very low-level and forces you to iterate the child nodes of the <pre> tag yourself, to escape them. This looks as follows:

function escapeRecursively($node) {
    if ($node instanceof DOMText)
        return $node->textContent;

    $children = $node->childNodes;
    $content = "<$node->nodeName>";
    for ($i = 0; $i < $children->length; $i += 1) {
        $child = $children->item($i);
        $content .= escapeRecursively($child);
    }

    return "$content</$node->nodeName>";
}

Now this function can be used to escape every <pre> node in the document:

function escapePreformattedCode($html) {
    $doc = new DOMDocument();
    $doc->loadHTML($html);

    $pres = $doc->getElementsByTagName('pre');
    for ($i = 0; $i < $pres->length; $i += 1) {
        $node = $pres->item($i);

        $children = $node->childNodes;
        $content = '';
        for ($j = 0; $j < $children->length; $j += 1) {
            $child = $children->item($j);
            $content .= escapeRecursively($child);
        }
        $node->nodeValue = htmlspecialchars($content);
    }

    return $doc->saveHTML();
}

Test

$string = '<h1>Test</h1> <pre>Some <em>interesting</em> text</pre>';
echo escapePreformattedCode($string);

Yields:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><h1>Test</h1> <pre>Some <em>interesting</em> text</pre></body></html>

Note that a DOM always represents a complete document. Hence when the DOM parser gets a document fragment it fills in the missing information. This makes the output potentially different from the input.

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

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.

Put a bit of HTML inside a pre tag?

If you have no control over the emitted HTML, you can still encode it on the client side.

Here is how you would escape all markup inside <pre> tags using the jQuery library:

$(function() {
    var pre = $('pre');
    pre.html(htmlEncode(pre.html()));
});

function htmlEncode(value){ 
  return $('<div/>').text(value).html(); 
}

Edit: As requested, same code without using jQuery:

function encodePreElements() {
    var pre = document.getElementsByTagName('pre');
    for(var i = 0; i < pre.length; i++) {
        var encoded = htmlEncode(pre[i].innerHTML);
        pre[i].innerHTML = encoded;
    }
};

function htmlEncode(value) {
   var div = document.createElement('div');
   var text = document.createTextNode(value);
   div.appendChild(text);
   return div.innerHTML;
}

And run the encodePreElements after the DOM has been loaded:

<body onLoad='encodePreElements()'>
    <pre>Foo <b>bar</b></pre>
</body>

How do I wrap text in a pre tag?

The answer, from this page in CSS:

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}