Meteor: How to render line breaks?

Question

I have the following variable: \"hello↵↵world\". (the value is coming from a textarea)

The problem is when I ask Meteor to display it with {{content}}, everything ap

Answer 1

Wrap with

<pre> Any amount of formatting. </pre>

Answer 2

One way is to create a handlebar helper:

Handlebars.registerHelper 'breaklines', (text) ->
    text = text.replace /(\r\n|\n|\r)/gm, '<br>'
    return text

and then to do so: (do not forget the three brackets!)

{{{breaklines content}}}

Answer 3

just use <br> it is enough no more troubles.

Answer 4

<pre> worked fine for me until I had long lines of text. By default it disables line wrapping and long lines break the page layout or are cut off.

You could probably get around it with white-space: pre-wrap; but what I ended up doing was create a Spacebars-Helper that escapes the text first and then replaces all breaks with <br/>

UI.registerHelper('breaklines', function(text, options) {
  text = s.escapeHTML(text);
  text = text.replace(/(\r\n|\n|\r)/gm, '<br/>');
  return new Spacebars.SafeString(text);
});

I would then use the helper in my templates in the following way:

{{breaklines title}}

escapeHTML is part of Underscore.string, a collection of string manipulation extensions that you can pull in with meteor add underscorestring:underscore.string, but any other way of escaping html should work fine as well.

Answer 5

If you're using bootstrap using the <pre> tag will come with some style that you probably don't want... If you want to avoid that you can solve this with some simple CSS:

.pre {
  white-space: pre;
}

and then just wrap your content with that class:

<span class="pre">{{content}}</span>