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>

如何才能获得正确的缩进？

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

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>

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

找到项目问题page

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。

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

2 个答案: