如何获得Express输出格式良好的HTML？

303

在主app.js或什么是它的位置：

快速4.x的

if (app.get('env') === 'development') { 
    app.locals.pretty = true; 
}

快车3.x的

app.configure('development', function(){ 
    app.use(express.errorHandler()); 
    app.locals.pretty = true; 
});

快速2.X

app.configure('development', function(){ 
    app.use(express.errorHandler()); 
    app.set('view options', { pretty: true }); 
});

我把漂亮的打印development，因为你在production想用“丑陋”更高的效率。在生产中部署时，请确保设置环境变量NODE_ENV=production。这可以通过在package.json的“脚本”字段中使用的sh脚本完成，并执行该脚本以启动。

快递3 changed这是因为：

的 “视图选项” 设置不再是必要的，app.locals是局部变量与res.render（）的，所以[app.locals合并。 pretty = true与传递res.render（view，{pretty：true}）相同。

来源

2012-08-04 23:41:39 EhevuTov

+1

请更改接受的答案，因为它是迄今为止的正确答案。 – Val 2013-05-18 12:41:59

+2

这应该是被接受的答案。 – whirlwin 2013-06-26 13:19:21

+1

终于看到了大家的意见，接受了更改 – Stephen 2013-07-24 20:48:41

0

你真的需要格式化好的html吗？即使你试图在一个编辑器中输出看起来不错的东西，它在另一个编辑器中看起来也可能很奇怪。当然，我不知道你需要什么html，但我会尝试使用Chrome开发工具或Firefox的萤火虫。这些工具可以让您更好地了解DOM而不是HTML。

如果你确实需要格式良好的html，那就试试用EJS代替玉。这意味着你不得不自己格式化HTML。

来源

2011-03-14 11:13:39

+0

我现在更喜欢ejs了与它合作了一段时间。我想我对某些事情非常在意。 – Stephen 2011-04-07 18:06:19

0

可以使用tidy

就拿这件玉文件：

foo.jade

h1 MyTitle 

p 
    a(class='button', href='/users/') show users 

table 
    thead 
    tr 
     th Name 
     th Email 
    tbody 
    - var items = [{name:'Foo',email:'[email protected]'}, {name:'Bar',email:'[email protected]'}] 
    - each item in items 
     tr 
     td= item.name 
     td= item.email

现在你可以用节点testjade.js foo.jade处理它> output.html：

testjade.js

var jade = require('jade'); 
var jadeFile = process.argv[2]; 
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){ 
    console.log(html); 
});

会给你s.th.像：

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>My Title</title><link rel="stylesheet" href="/stylesheets/style.css"/><script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script></head><body><div id="main"><div ><h1>MyTitle</h1><p><a href="https://stackoverflow.com/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>[email protected]</td></tr><tr><td>Bar</td><td>[email protected]</td></tr></tbody></table></div></div></body></html

然后用整洁-m运行它通过整洁output.html将导致：

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta name="generator" content= 
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /> 
<title>My Title</title> 
<link rel="stylesheet" href="/stylesheets/style.css" type= 
"text/css" /> 
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"> 
</script> 
</head> 
<body> 
<div id="main"> 
<div> 
<h1>MyTitle</h1> 
<p><a href="https://stackoverflow.com/users/" class="button">show users</a></p> 
<table> 
<thead> 
<tr> 
<th>Name</th> 
<th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>Foo</td> 
<td>[email protected]</td> 
</tr> 
<tr> 
<td>Bar</td> 
<td>[email protected]</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</body> 
</html>

来源

2011-04-27 09:26:15 oliver

0

建立奥利弗的建议，继承人快速d肮脏的方式来查看HTML美化

1）下载tidy

2）添加到您的.bashrc

function tidyme() { 
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html 
}

3）运行

$ tidyme localhost:3000/path

打开命令只能在Mac电脑。希望有所帮助！

来源

2011-06-11 20:32:54 ebaum

+0

不知道缩进选项...很好！我使用vim内置的formater。 – oliver 2011-07-16 09:27:33

50

要 “漂亮格式” HTML输出在玉/快递：

app.set('view options', { pretty: true });

来源

2011-09-29 01:05:48

+3

**伟大的解决方案！**我希望它可以匹配布局/页面之间的缩进水平。 – Stephen 2011-10-04 14:57:13

+34

已过时。 Express 3的工作原理有所不同，请参阅EhevuTov撰写的文章。 – 2012-08-22 11:39:57

7

有翡翠本身就是一个 “漂亮” 的选项：

var jade = require("jade"); 

var jade_string = [ 
    "!!! 5", 
    "html", 
    " body", 
    "  #foo I am a foo div!" 
].join("\n"); 

var fn = jade.compile(jade_string, { pretty: true }); 
console.log(fn());

...让你这一点：

<!DOCTYPE html> 
<html> 
    <body> 
    <div id="foo">I am a foo div! 
    </div> 
    </body> 
</html>

我似乎不是很复杂的，但对于后我什么 - 在能力实际调试我的看法产生HTML - 它只是罚款。

来源

2012-02-06 01:20:46

+3

如果您只需要使用Webkit或Firebug检查器“检查”HTML，就可以调试HTML。这总是会生成一个完美格式化的DOM树。 – Roshambo 2012-10-08 14:31:11

+0

@Roshambo是真的，但在树中导航非常耗费时间，当你可以更快地扫描源代码（有时） – Val 2013-05-18 12:43:11

6

在Express 4.x版添加到您的app.js：

if (app.get('env') === 'development') { 
    app.locals.pretty = true; 
}

来源

2014-05-20 22:24:26 alarive

+0

在这里工作 - 谢谢！在我的情况下，我没有'env'var set。你可以用这一个行添加到主.js文件：* process.env.NODE_ENV =“发展”; * – gnB 2015-06-01 17:21:08

+0

你为什么给这个答案，如果其他的答案已经是给这个解决方案？ – nbro 2015-11-18 10:20:31

+0

我是第一个给这个答案，对方的回答是事后更新。 – alarive 2015-11-18 13:02:43

2

如果您使用故障恢复控制台来编译，那么你可以使用这样的事情：

$ jade views/ --out html --pretty

来源

2015-07-26 16:50:38

0

在快递4.x中，将此添加到您的app.js：

app.locals.pretty = app.get('env') === 'development';

来源

2017-10-13 14:11:01 petkovic43

如何获得Express输出格式良好的HTML？

回答

相关问题