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>

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>

• javascript
• node.js
• pug

5 Answers 5

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

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

Actually the OP asks for the escaping, not the unescaping. Which I ran into today.

Let assume, that you have varName variable with <b>FooBar</b> content.

Then this template will use the escaped value:

#foobar= varName

so it becomes:

<div id="foobar">&lt;b&gt;FooBar&lt;/b&gt;</div>

If you use the bang operator:

#foobar!= varName

jade won't escape it, so it becomes:

<div id="foobar"><b>FooBar</b></div>

This is the official way:

code= '<div>This code is' + ' <escaped>!</div>'
<code>&lt;div&gt;This code is &lt;escaped&gt;!&lt;/div&gt;</code>

http://jade-lang.com/reference/#unescapedbufferedcode

It's not built in to Jade, but you can do it with a filter:
(This can be added anywhere at the top of app.js.)

require('jade').filters.escape = function( block ) {
  return block
    .replace( /&/g, '&'  )
    .replace( /</g, '&lt;'   )
    .replace( />/g, '&gt;'   )
    .replace( /"/g, '&quot;' )
    .replace( /#/g, '&#35;'  )
    .replace( /\\/g, '\\\\'  )
    .replace( /\n/g, '\\n'   );
}

Then use the 'escape' filter in your jade file:

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

Output:

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

Source: Embedding escaped code in a Jade template