Search code examples
node.jshandlebars.jstemplate-enginehtml-escape-characters

node.js and Handlebars: HTML compiled is escaped


Im using handlebars in a node aplication, and I have trouble.

This is the template index.html

{{CONTENT}}

This is the code

var fs = require("fs");
var handlebars = require("handlebars");

var data = {
    CONTENT: "<b>Hello world!</b>"
};

var templateFile = fs.readFileSync('./index.html', 'utf8');
var template = handlebars.compile( templateFile );
var html = template(data);

The problem is that the tags <B> are escaped to &lt;B&gt;

How can I avoid this?


Solution

  • From handlebarsjs.com :

    Handlebars HTML-escapes values returned by a {{expression}}. If you don't want Handlebars to escape a value, use the "triple-stash".

    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{{body}}}
      </div>
    </div>
    

    with this context:

    {
      title: "All about <p> Tags",
      body: "<p>This is a post about &lt;p&gt; tags</p>"
    }
    

    results in:

    <div class="entry">
      <h1>All About &lt;p&gt; Tags</h1>
      <div class="body">
        <p>This is a post about &lt;p&gt; tags</p>
      </div>
    </div>
    

    However from my point of view it may defeat the purpose of having a template separated than you're js file.

    If you use precompile then use noEscape option:

    handlebars.precompile(content, {noEscape: true})