Search code examples
javascripthtmlhandlebars.jstemplatingmetalsmith

Handlebars wraps <!DOCTYPE html>

I am trying to get my metalsmith setup working, nothing fancy.

In my build.js I have:

…
handlebars.registerHelper('doctype', function() {
  return new handlebars.SafeString('<!DOCTYPE html>');
});
…

in my partial template header.hbt I have:

{{doctype}}
<html>
…

And the result html begins with:

<p>&lt;!DOCTYPE html&gt;</p>

– which is obviously not what I need.

Any suggestions?

PS. Using a plain doctype definition in my layout file had the same effect. Using handlebars ^4.0.5.

Edit 1: After trying around a bit, i can supply another symptom: The result of a SafeString() call seems to be wrapped in a <p> tag if it is placed before the <html> block. This is not specific to the doctype declaration, »normal« html elements seem to be affected as well.

Edit 2: Now i have distilled 2x2 cases for the functioning of safeString():

a) a conventional element (e.g. <div>) inside the <html> block gets rendered, as expected, without changes.

b) a conventional element before the <html> block gets rendered ok, but is placed inside a <p> tag.

c) a doctype element inside the <html> block gets rendered as pure text, like this: &lt;!DOCTYPE html&gt;

d) a doctype element before the <html> block will be rendered in the same manner but wrapped in a <p> element.

Solution

  • Seems to be a metalsmith-related matter, not inherent to handlebars. A given (erroneous!) order of plugin invocations causes the issue: calling use(layouts(…)) before calling use(markdown(…)) is the cause. (so probably the markdown plugin does the wrapping.) Sorry for the trouble.