How to add new lines into a variable passed into pug

Question

I am trying to pass values that need to include new lines/brake lines into pug files.

So far I have tried

var value1 = "value 1";
var value2 = "value 2";
var infromation = "\n" + value1 + "\n" + value2;
res.render('pugfile', { information: information });

but when this is rendered in pug through

p Your messages are: #{information}

The html is rendered as

<p> 
value 1
value 2
</p>

but the new line is not shown on the displayed webpage, which is the problem. Please help?

score 0 · Accepted Answer · answered Apr 27 '19 at 05:08

0

instead of putting \n for newline, use <br> for break. And also you need to escape the string. For reference check this.

Try this.

  let value1 = "value 1";
  let value2 = "value 2";
  // let information = "\n" + value1 + "\n" + value2;
  let information = "<br>" + value1 + "<br>" + value2;
  res.render("index", { information: information });

And in pug template

p Your messages are: !{information}

Please check here for working code

answered Apr 27 '19 at 05:08

IRSHAD

1,582
11
16

Ill give it a try and get back to you – Outlander Apr 27 '19 at 13:25
Ok. Please let me know whether it worked for you. :) – IRSHAD Apr 28 '19 at 02:39

score 0 · Answer 2 · answered Oct 20 '21 at 10:14

This is an old thread but if you are using data from users then it's very dangerous to use un-escaped values like !{information}, it's safer to split the string by the newlines and use standard escaped strings:

p Your messages are:
  each str, indx in String(information).split('\n')
    if indx > 0
      br
    | #{str}

How to add new lines into a variable passed into pug

2 Answers2