What about Line Breaks in Jade?
node.jsPugnode.js Problem Overview
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...)
node.js Solutions
Solution 1 - node.js
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.
Solution 2 - node.js
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.
Solution 3 - node.js
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>
Solution 4 - node.js
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
Solution 5 - node.js
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.
Solution 6 - node.js
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)
Solution 7 - node.js
this also works well.
div
pre
| this is line 1
| this is line 2
Solution 8 - node.js
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.
Solution 9 - node.js
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;
*/
Solution 10 - node.js
.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.
Solution 11 - node.js
Just in case you have not used the year filter on the first search: https://stackoverflow.com/questions/34643483/how-to-add-br-tag-with-jade-html
Put the text on a new line with a preceding |:
p first line
br
| second line
Solution 12 - node.js
Try this:
- for(var i = 0; i < 10; i++)
| hello
| world