What about Line Breaks in Jade?

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...)

---

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.

---

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.

---

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>

---

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

---

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.

---

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)

---

this also works well.

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

---

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.

---

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;
*/

---

.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.

---

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

---

Try this:

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