Passing HTML in JSON as data in Assemble

Question

I am working on a project that requires multilanguage support. I decided to utilize Assemble (more specifically grunt-assemble) since it was already part of the project toolbox so my current setup uses JSON file(s) as data/text input for handlebar templates.

The site is responsive and there is a requirement to have certain level of control over text using break lines <br /> or non-breaking spaces   to avoid orphaned words. Some sentences require mentioned tag or html entity to be included in the string otherwise I'd be forced to split sentence word by word and combine hardcoded html with json data reference. Imagine something like this:

<p>{{word_1}}<br />{{word_2}}</p>

This approach is also not very translation friendly, since a different language might not require line break at all.

To avoid this I've tried to pass html via JSON like this:

{ "sentence" : "word<br />word" }

Assemble output, however, is literal, so instead or of functional tag I get its string version and page literally displays word<br />word. Same for  

What is (if any) proper notation for passing html tags or entities from JSON to handlebar templates via Assemble?

Answer 1

Handlebars escapes HTML by default, but you can avoid escaping with the triple-stash format {{{ }}}. Take a look at the following .hbs page:

---
title: Test
htmlData: This is some <br/> html in data
---
<p>double-stash: {{htmlData}}</p>
<p>triple-stash: {{{htmlData}}}</p>

results in:

double-stash: This is some <br/> html in data

triple-stash: This is some
html in data