为什么玉忽略 \n 和空白？答案

【问题标题】：Why does jade ignore \n and white space?为什么玉忽略 \n 和空白？
【发布时间】：2015-11-14 02:26:02
【问题描述】：

我正在使用var generateCodeBlock = jade.compile('div !{text}', {pretty: true}); 生成一些基于 Jade 的 HTML 我想创造这样的东西

<div>   
    var json = {
        labelA: 'a',
        labelB: 2
       };
</div>

但是当我输入{text: 'var json = {\n labelA: 'a',\n labelB: 2\n };'} 时，它最终会创建<div class="setup"> var json = { labelA: 'a', labelB: 2 };</div>。我也尝试在jade.compile 中使用#{text}，但没有区别。为什么jade会使我的变量输入变平？

JSFiddle example

更新：我现在尝试使用

为模板创建一个单独的文件

block codeBlock
    div.codeBlock
        for part in code
            div(class="#{part.className}") !{part.text}

和jade.compileFile，它仍在生产var json = { labelA: 'a', labelB: 2 };

【问题讨论】：

标签： javascript html node.js templates pug

【解决方案1】：

Jade 不会忽略空格和换行符。如果您实际记录jade.compile($("#jadehi").html())(djson) 返回的内容，您会看到您在数据中输入的任何空格或换行符（如"Jade\n Test Page"）仍然存在。

忽略这些字符的是 HTML（或者更准确地说，浏览器如何解释 HTML）。正如这个问题中所解释的：

Why does the browser renders a newline as space?

而且，正如那里所建议的那样，也许使用 <pre> 元素会对您有所帮助。

【讨论】：