为什么玉不理\n而白space？

Question

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

<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 };

Answer 1

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

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

Why does the browser renders a newline as space?

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

为什么玉不理\n而白space？

Why does jade ignore \n and white space?

html

javascript

templates

node.js

pug