nodejs, jade escape markup

Question

I have an Express app using the default Jade view engine. When I try to render HTML as-is in a <pre> element, it gets rendered as actual DOM elements instead of literal characters.

h1 Code Sample
pre
  code
    <div>some text</div>

Output:

<h1>Code Sample</h1>
<pre>
  <code>
    <div>some text</div>
  </code>
</pre>

How do I escape the HTML so that it gets rendered as follows?

<h1>Code Sample</h1>
<pre>
  <code>
    &lt;div&gt;some text&lt;/div&gt;
  </code>
</pre>

Answer 1

As an addition, here is another use case which you need to consider:

If you are extrapolating the HTML content using the #{...}, it will still give the wrong output. For that use case, you need the !{...} alternative.

So,

div= varname

becomes

div!= varname

---

And

div #{varname} is extrapolated badly

becomes

div !{varname} is extrapolated perfectly

Answer 2

Jade uses the bang to force unescaped output. So you turn regular output to unescaped output with the following construct: !=
If your content is inside an div tag you could do the following:

div!= content