Passing HTML to JSON as data in Assemble
I am working on a project that requires multilingual support. I decided to use Assemble (more specifically grunt-assemble) as it was already part of the project toolbox, so my current setup is using JSON files as input / text for the helm templates.
The site is responsive and there is a need for some level of control over the text using break lines <br />
or non-breaking spaces
to avoid orphaned words. Some suggestions require mentioning a tag or html object to be included in the string, otherwise I would be forced to split the sentence with a word and concatenate the hardcoded html with a json data link. Imagine something like this:
<p>{{word_1}}<br />{{word_2}}</p>
This approach is also not very convenient for translation, as the other language may not require line breaks.
To avoid this, I tried to pass html through JSON like this:
{ "sentence" : "word<br />word" }
The collected output, however, is a literal, so instead of a function tag or a function tag, I get a lowercase version of it, and the page literally renders word<br />word
. The same for
What is (if any) the correct notation for passing html tags or entities from JSON to helm templates via Assemble?
source to share
Handles interfere with HTML by default, but you can avoid escaping with a three-line 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>
leads to:
double-stash: This is some <br/> html in data
triple-stash: This is some
html in data
source to share