:escape

The :escape filter replaces reserved HTML characters & < > " with their corresponding HTML entities to display these characters as text. See the HTML entity documentation.

Enable filter

Defaults, the filter is disabled. If this filter is used, it must be enabled in webpack.config.js.

Use the Pug loader options in the webpack config:

{
  test: /.pug$/,
  loader: '@webdiscus/pug-loader',
  options: {
    // enable embedded filters
    embedFilters: {
      escape: true, // enable the :escape filter
    },
  },
},

Escape a block

Pug template:

pre: code: :escape
  <!-- Comment -->
  <div class="container">
    <p>&copy; Copyright M&M'S</p>
    <script>
      const body = document.querySelector("body");
    </script>
  </div>

Generated HTML:

<pre>
  <code>
    &lt;!-- Comment --&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;p&gt;&amp;copy; Copyright M&amp;M'S&lt;/p&gt;
      &lt;script&gt;
        const body = document.querySelector(&quot;body&quot;);
      &lt;/script&gt;
    &lt;/div&gt;
  </code>
</pre>

Result, what you see in a browser:

<!-- Comment -->
<div class="container">
  <p>&copy; Copyright M&M'S</p>
  <script>
    const body = document.querySelector("body");
  </script>
</div>

Escape a string

Pug template:

:escape The <strong> element has the closing </strong> tag.

Result:

The <strong> element has the closing </strong> tag.

Escape inline syntax

Pug template:

div.
  The #[:escape <html>] element is the root element.<br>
  Inside the #[:escape <html>] element there is a #[:escape <body>] element.

Result:

The <html> element is the root element.
Inside the <html> element there is a <body> element.