What about Line Breaks in Jade?

Question

I'm pretty sure that this is a no-brainer but I didn't find any snippet of sample code. What's the best way to insert line breaks (aka the good ol' br/)?

As far as I can see if I put a "br" at the beginning of an empty line, it is rendered as <br/> but if I have to show several lines of text, the resulting code is quite verbose:

.poem 
 p 
 | Si chiamava Tatiana, la sorella... 
 br 
 | Noi siamo i primi, almeno lo crediamo
 br 
 | Che un tale nome arditamente nella
 br 
 | Cornice d’un romanzo introduciamo.
 br 
 | E che dunque? E’ piacevole, sonoro.
 br 
 | Lo so che a molti privo di decoro 
 br 
 | Apparirà, già fuori moda, e degno
 br 
 | Piuttosto d’un ancella, certo segno, 
 br 
 | confessiamolo pur senza paura,
 br 
 | di quanto s’è noialtri al gusto avversi
 br 
 | nei nostri nomi (a non parlar di versi). |br
 br 
 | Credemmo conquistare la cultura,
 br 
 | e non ne abbiamo preso, in conclusione,
 br 
 | che la ricerca dell’affettazione.

Is there a better way to solve this? (incidentally I'm asking for the same thing with the image tag...)

• Hacknightly: I was going to get around to asking this, thank you +1
• rjminchuk: MDN suggests caution using the line break element. developer.mozilla.org/en-US/docs/Web/HTML/Element/… I like the white-space: pre solution!

Answer 1

The cleanest and easiest solution is to use the style attribute white-space: pre; eg:

.poem 
 p(style='white-space:pre;')
 | Si chiamava Tatiana, la sorella... 
 | Noi siamo i primi, almeno lo crediamo
 | Che un tale nome arditamente nella
 | Cornice d’un romanzo introduciamo.
 | E che dunque? E’ piacevole, sonoro.
 | Lo so che a molti privo di decoro 
 | Apparirà, già fuori moda, e degno
 | Piuttosto d’un ancella, certo segno, 
 | confessiamolo pur senza paura,
 | di quanto s’è noialtri al gusto avversi
 | nei nostri nomi (a non parlar di versi). |br
 | Credemmo conquistare la cultura,
 | e non ne abbiamo preso, in conclusione,
 | che la ricerca dell’affettazione.

• BMiner: I agree. It looks like the white-space rule has good browser support, as well. Thanks!
• Luis Sieira: @JGallardo what's the best way, then? By the way, I'd use whitespace: pre-wrap instead, to avoid the content overflow it's container
• Segev -CJ- Shmueli: I would use whitespace: pre-wrap -or- whitespace: pre-line
• Charles Wood: This doesn't seem to work here in 2016 :/ I'm using Pug in node and the whitespace is being removed.
• giovannipds: Prefer pre-line. There's a comparison table here

Answer 2

I figured it out. Just go ahead and throw a good ol' fashioned <br /> tag in there. You'll be golden : )

p
 |hey this is my <br />
 |broken paragraph!

UPDATE: Jade now supports using just br for line breaks.

• generalhenry: the pipes aren't needed in the current version of jade
• Matteo: @generalhenry: Actually, I'm working with a xml doctype and, if I don't use pipes, the first word of the line is used as tag, AFAIK.
• GijsjanB: +1 This is the cleanest solution, but as stated by Matteo, the pipes are needed!
• ptim: pretty sure there needs to be a space after those pipes, or you could add a period: p. and skip the pipes in the indented content
• Hacknightly: There is no space necessary after the pipe. At least not in Jade 1.3.1

Answer 3

This doesn't seem to be an answer, so:

You can also do it by adding inline br tags using Jade/Pug's inline tag format, e.g.:

p.
 Some text on the first line.#[br]
 Some text on the second line.

Produces:

 <p>Some text on the first line.<br>
 Some text on the second line.
 </p>

• Gagandeep Singh: Thanks .. I was looking for a break to work among html tags

Answer 4

so that you're aware.. if you're pulling this information.. say from an SQL database where you've already manually entered in line breaks (say in a textarea of a form) you can do the following on the server to your output

var contentParse = function(content){
 content = content.replace(/\n?\r\n/g, '<br />' );
 return content;
};

and then in jade use

!{content}

the ! lets jade know that you're inserting raw html into the variable you're trying to render out

source: https://github.com/visionmedia/jade#tag-text

• joeytwiddle: That's fine until the content contains some actual HTML, e.g. <script src=.....>. If you are inserting raw HTML, then you should probably escape special HTML chars, such as < > and &. Jade's runtime.js has an escape() function which appears to escape some of these.
• R891: I think that it should be something like div!= content in the Jade (Pug?) template.

Answer 5

robustly with a div per line:

p.poem 
 .line Si chiamava Tatiana, la sorella... 
 .line Noi siamo i primi, almeno lo crediamo
 .line Che un tale nome arditamente nella
 .line Cornice d’un romanzo introduciamo.
 .line E che dunque? E’ piacevole, sonoro.
 .line Lo so che a molti privo di decoro 
 .line Apparirà, già fuori moda, e degno
 .line Piuttosto d’un ancella, certo segno, 
 .line confessiamolo pur senza paura,
 .line di quanto s’è noialtri al gusto avversi
 .line nei nostri nomi (a non parlar di versi).
 .line Credemmo conquistare la cultura,
 .line e non ne abbiamo preso, in conclusione,
 .line che la ricerca dell’affettazione.

or simply with a pre:

style pre.poem { font-family:ariel }

pre.poem 
 Si chiamava Tatiana, la sorella... 
 Noi siamo i primi, almeno lo crediamo
 Che un tale nome arditamente nella
 Cornice d’un romanzo introduciamo.
 E che dunque? E’ piacevole, sonoro.
 Lo so che a molti privo di decoro 
 Apparirà, già fuori moda, e degno
 Piuttosto d’un ancella, certo segno, 
 confessiamolo pur senza paura,
 di quanto s’è noialtri al gusto avversi
 nei nostri nomi (a non parlar di versi). 
 Credemmo conquistare la cultura,
 e non ne abbiamo preso, in conclusione,
 che la ricerca dell’affettazione.

• Russell Leggett: not to nitpick, but according to a strict doctype, p tags can only contain inline elements, so your first example may not pass validation, depending on the doctype.

Answer 6

I was able to do the following after @haxxxton

app.use(function(req, res, next){
 var contentParse = function (content){
 content = content.replace(/\n?\r\n/g, '<br />' );
 return content;
 };
 res.locals.contentParse = contentParse;
 next();
});

For example, it can be used in a jade template using the function p!= contentParse(post.description)

• JGallardo: oh no no no. This is far too complicated

Answer 7

this also works well.

div
 pre
 | this is line 1
 | this is line 2

Answer 8

Give your paragraph a style to keep the newlines and end the p line with a dot:

.poem 
 p(style="white-space: pre-line;").
 Si chiamava Tatiana, la sorella... 
 Noi siamo i primi, almeno lo crediamo
 Che un tale nome arditamente nella
 Cornice d’un romanzo introduciamo.
 E che dunque? E’ piacevole, sonoro.
 Lo so che a molti privo di decoro 
 Apparirà, già fuori moda, e degno
 Piuttosto d’un ancella, certo segno, 
 confessiamolo pur senza paura,
 di quanto s’è noialtri al gusto avversi
 nei nostri nomi (a non parlar di versi).
 Credemmo conquistare la cultura,
 e non ne abbiamo preso, in conclusione,
 che la ricerca dell’affettazione.

Answer 9

I was generating a SASS file from PUG template and I needed each item on a new line.
This is what worked for me:

//- custom-variables.pug
//- GENERATE COLORS
each color, idx in colors
 | #{idx}: #{color};
 |

const pug = require("pug");
const colors = {
 $primary: "#0074d9",
 $secondary: "#ff4136",
 $green: "green",
};
// Compile the source code
const compiledFunction = pug.compileFile("./scripts/custom-variables.pug");
console.log(compiledFunction({ colors }));
// outputs:
/*
$primary: #0074d9;
$secondary: #ff4136;
$green: green;
*/

Answer 10

.poem: pre(style="font-family: unset").
 Si chiamava Tatiana, la sorella... 
 Noi siamo i primi, almeno lo crediamo
 Che un tale nome arditamente nella
 Cornice d’un romanzo introduciamo.
 E che dunque? E’ piacevole, sonoro.
 Lo so che a molti privo di decoro 
 Apparirà, già fuori moda, e degno
 Piuttosto d’un ancella, certo segno, 
 confessiamolo pur senza paura,
 di quanto s’è noialtri al gusto avversi
 nei nostri nomi (a non parlar di versi).
 Credemmo conquistare la cultura,
 e non ne abbiamo preso, in conclusione,
 che la ricerca dell’affettazione.

or

.poem: p(style="white-space: pre-wrap").
 Si chiamava Tatiana, la sorella... 
 Noi siamo i primi, almeno lo crediamo
 Che un tale nome arditamente nella
 Cornice d’un romanzo introduciamo.
 E che dunque? E’ piacevole, sonoro.
 Lo so che a molti privo di decoro 
 Apparirà, già fuori moda, e degno
 Piuttosto d’un ancella, certo segno, 
 confessiamolo pur senza paura,
 di quanto s’è noialtri al gusto avversi
 nei nostri nomi (a non parlar di versi).
 Credemmo conquistare la cultura,
 e non ne abbiamo preso, in conclusione,
 che la ricerca dell’affettazione.

• Tyler2P: A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it.

Answer 11

Just in case you have not used the year filter on the first search: How to add br tag with Jade HTML

Put the text on a new line with a preceding |:

p first line
br
| second line

Answer 12

Try this:

- for(var i = 0; i < 10; i++)
 | hello
 | world

• Maximillian Laumeister: Thank you for posting an answer to this question! Code-only answers are discouraged on Stack Overflow, because a code dump with no context doesn't explain how or why the solution will work, making it difficult for the original poster (or any future readers) to understand the logic behind it. Please, edit your question and include an explanation of your code so that others can benefit from your answer. Thanks!