javascript - Jade lang - 如何手动添加新行？

Question

我有这样的代码

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

它转换为

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

预期结果：

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

如何获得正确的缩进？

我已经尝试Whitespace Removal: > and <了来自http://scalate.fusesource.org/documentation/jade-syntax.html的规则，但它们不起作用。我做错了什么？

Answer 1

可以使用此类命令手动添加之间的新行

= "\n"

所以当你的代码看起来像这样时：

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

产生以下输出：

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

唯一的问题是这个命令会破坏制表缩进。

在项目问题页面上找到

Answer 2

您可以使用html模块来美化您的 html。将以下内容添加到您的代码中：

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

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

你的输出将是

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

确保您使用的是最新的beautify-html.js。