Jade lang - how to add a new line manually?

Question

Jade lang - how to add a new line manually?

I have a code like this

ul.nav
    li.item
        a(href='#')
        ul
            li
                a(href='#')

It converts to

<ul class="nav">
    <li class="item"><a href="#"></a>
        <ul>
            <li><a href="#"></a></li>
        </ul>
    </li>
</ul>

Expected result:

<ul class="nav">
    <li class="item">
        <a href="#"></a>
        <ul>
            <li>
                <a href="#"></a>
            </li>
        </ul>
    </li>
</ul>

How can I get a right indentation?

I have tried Whitespace Removal: > and < rules from http://scalate.fusesource.org/documentation/jade-syntax.html, but they don't work. What I am doing wrong?

javascript
html
node.js
jade
template-engine

Answer 1

Manually new lines between can be added with such command

= "\n"

so when your code looks like this:

ul.nav
li.item
    a(href='#')
    ul
        li
            = "\n"
            a(href='#')

following output is produced:

<ul class="nav">
  <li class="item"><a href="#"></a>
    <ul>
      <li>
<a href="#"></a>
      </li>
    </ul>
  </li>
</ul>

the only problem is that this command breaks tabulation indents.

Found on project issues page

Answer 2

You could use the html module to even more beautify your html. Add the following to your code:

var html = require('html');
var fn = jade.compile('string of jade', options);  // standard jade example

console.log(html.prettyPrint(fn()))

Your output will be

<ul class="nav">
  <li class="item">
    <a href="#"></a>
    <ul>
        <li>
            <a href="#"></a>
        </li>
    </ul>
  </li>
</ul>

Make sure you are using the latest beautify-html.js.