unable to escape In pug lang

Question

So i have some user defined HTML generated using QuillJS (wysiwyg editor). as far as display / editing the text inside the editor is concerened it is working fine, but when i try to show the same data on a page using !{var} on my pug page it shows as string "....my HTML code here...."

-----Here is how it looks when i fetch it from DB----

 "<h1 class=\"ql-align-center\">Essential things to think about before starting a blog</h1><p><br></p><h2 class=\"ql-align-center\">​It takes several ingredients to create a delicious blog&l
    t;/h2><p><br></p><p class=\"ql-align-justify\">It has been exactly 3 years since I wrote my first blog series entitled “Flavorful Tuscany”, but starting it was definitely not easy. Back then, I didn’t know much about blogging, let alone think that one day it could become <strong>my full-time job</strong>. Even though I had many recipes and food-related stories to tell, it never crossed my mind that I could be sharing them with the whole world.</p><p class=\"ql-align-justify\">I am now a <strong>full-time blogger</strong> and the curator of the <a href=\"https://ckeditor.com/ckeditor-4/#\" target=\"_blank\">Simply delicious newsletter</a>, sharing stories about traveling and cooking, as well as tips on how to run a successful blog.</p><p class=\"ql-align-justify\">If you are tempted by the idea of creating your own blog, please think about the
    following:</p><ul><li class=\"ql-align-justify\">Your story
    (what do you want to tell your audience)</li><li class=\"ql-align-justify\">Your audience (who do you write for)</li><li class=\"ql-align-justify\">Your blog name and design</li></ul>"

---------and here is how is looks on the in chrome DevTools----

<div class="text-justify" id="description">
&lt;h1 class="ql-align-center"&gt;Essential things to think about before starting a blog&lt;/h1&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;h2 class="ql-align-center"&gt;​It takes several ingredients to create a delicious blog&lt;/h2&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;p class="ql-align-justify"&gt;It has been exactly 3 years since I wrote my first blog series entitled “Flavorful Tuscany”, but starting it was definitely not easy. Back then, I didn’t know much about blogging, let alone think that one day it could become &lt;strong&gt;my full-time job&lt;/strong&gt;. Even though I had many recipes and food-related stories to tell, it never crossed my mind that I could be sharing them with the whole world.&lt;/p&gt;&lt;p class="ql-align-justify"&gt;I am now a &lt;strong&gt;full-time blogger&lt;/strong&gt; and the curator of the &lt;a href="https://ckeditor.com/ckeditor-4/#" target="_blank"&gt;Simply delicious newsletter&lt;/a&gt;, sharing stories about traveling and cooking, as well as tips on how to run a successful blog.&lt;/p&gt;&lt;p class="ql-align-justify"&gt;If you are tempted by the idea of creating your own blog, please think about the following:&lt;/p&gt;&lt;ul&gt;&lt;li class="ql-align-justify"&gt;Your story (what do you want to tell your audience)&lt;/li&gt;&lt;li class="ql-align-justify"&gt;Your audience (who do you write for)&lt;/li&gt;&lt;li class="ql-align-justify"&gt;Your blog name and design&lt;/li&gt;&lt;/ul&gt;  
</div>

What am i doing wrong..

1. i tried to save it into a new var and pass it separately to the template.
2. i tried alternatives to string Interpolation methods i got via google.

Answer 1

@sean was right, the code was escaping but not in the database but before it even went to db, apprantly a plugin 'xss-clean' was converting the HTML tag to HTML Entites.

Here is the sample of that value which can even be seen in the Question:

<h1 class=\"ql-align-center\">

With that Plugin disabled the unescaping started to work..

I would strongly recommend other who might face the same issue, to check for the such small anamolies and handle them as one of the step in there debugging process.

PS: i switched from Xss-Clean to Helmet along with a alternative to Xss-clean.