如何在Express中输出漂亮的html？
我注意到，虽然使用Express的Node.js，它输出的HTML代码没有任何换行符或制表符。 虽然在技术上可以更有效地下载，但并不是很漂亮。
我怎么能得到它打印不错的格式化的HTML？
在你的主app.js或它的地方是什么：
Express 4.x
if (app.get('env') === 'development') { app.locals.pretty = true; }
Express 3.x
app.configure('development', function(){ app.use(express.errorHandler()); app.locals.pretty = true; });
Express 2.x
app.configure('development', function(){ app.use(express.errorHandler()); app.set('view options', { pretty: true }); });
我把这个漂亮的印刷品放在development因为在production “丑陋”会让你更高效。 确保在NODE_ENV=production环境中部署环境variablesNODE_ENV=production production。 这可以通过在package.json的'script'字段中使用sh脚本来完成，然后执行该脚本来启动。
Express 3 改变了这个，因为：
app.locals是与res.render（）合并的局部variables，所以[app.locals.pretty = true与传递res.render（view，{pretty ：true}）。
要在Jade / Express中“格式化”html输出，请执行以下操作：
app.set('view options', { pretty: true });
Jade本身有一个“漂亮”的选项：
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>
我似乎不是非常复杂，但对于我后来的 – 实际上debugging我的观点产生的HTML的能力 – 这就好了。
在express 4.x中，添加到你的app.js中：
if (app.get('env') === 'development') { app.locals.pretty = true; }
如果你正在使用控制台编译，那么你可以使用这样的东西：
$ jade views/ --out html --pretty
你真的需要格式良好的HTML吗？ 即使你试图在一个编辑器中输出看起来不错的东西，在另一个编辑器中也可能看起来很奇怪。 当然，我不知道你需要的HTML，但我会尝试使用铬开发工具或Firefox的萤火虫。 这些工具可以让您更好地了解DOM而不是HTML。
如果你确实需要很好的格式化HTML，那就试试用EJS代替玉。 这意味着你不得不格式化自己的HTML虽然。
你可以使用整洁
拿这个玉文件为例：
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:'foo@bar'}, {name:'Bar',email:'bar@bar'}] - 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); });
会给你。 喜欢：
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="/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>foo@bar</td></tr><tr><td>Bar</td><td>bar@bar</td></tr></tbody></table></div></div></body></html
然后使用tidy -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="/users/" class="button">show users</a></p> <table> <thead> <tr> <th>Name</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Foo</td> <td>foo@bar</td> </tr> <tr> <td>Bar</td> <td>bar@bar</td> </tr> </tbody> </table> </div> </div> </body> </html>
以oliver的build议为基础，inheritance人查看美化html的快捷方式
1）下载整洁
2）将此添加到您的.bashrc
function tidyme() { curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html }
3）跑步
$ tidyme localhost:3000/path
打开命令只适用于mac。 希望有所帮助！
在express 4.x中，添加到你的app.js中：
app.locals.pretty = app.get('env') === 'development';
