如何让 Express 输出格式良好的 HTML?

发布于 2024-10-21 05:20:52 字数 121 浏览 8 评论 0原文

当使用 Express for Node.js 时,我注意到它输出的 HTML 代码没有任何换行符或制表符。虽然下载起来可能更高效,但在开发过程中可读性不太好。

如何让 Express 输出格式良好的 HTML?

When using Express for Node.js, I noticed that it outputs the HTML code without any newline characters or tabs. Though it may be more efficient to download, it's not very readable during development.

How can I get Express to output nicely formatted HTML?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

娇纵 2024-10-28 05:20:52

在您的主 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< /strong>

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

我将漂亮的文字放在开发中,因为您会希望通过生产中的“丑陋”提高效率。在生产环境中部署时,请务必设置环境变量 NODE_ENV=product。这可以通过在 package.json 的“script”字段中使用并执行启动的 sh 脚本来完成。

Express 3 更改了这一点,因为:

不再需要“view options”设置,app.locals 是与 res.render() 合并的局部变量,因此 [app.locals.pretty = true 与传递 res.render(view , { 漂亮: true })。

In your main app.js or what is in it's place:

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

I put the pretty print in development because you'll want more efficiency with the 'ugly' in production. Make sure to set environment variable NODE_ENV=production when you're deploying in production. This can be done with an sh script you use in the 'script' field of package.json and executed to start.

Express 3 changed this because:

The "view options" setting is no longer necessary, app.locals are the local variables merged with res.render()'s, so [app.locals.pretty = true is the same as passing res.render(view, { pretty: true }).

猫九 2024-10-28 05:20:52

要在 Jade/Express 中“格式化”html 输出:

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

To "pretty-format" html output in Jade/Express:

app.set('view options', { pretty: true });
万水千山粽是情ミ 2024-10-28 05:20:52

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>

我似乎不是很老练,但对于我所追求的——
能够实际调试我的视图生成的 HTML —— 这很好。

There is a "pretty" option in Jade itself:

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() );

...gets you this:

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

I doesn't seem to be very sophisticated but for what I'm after -- the
ability to actually debug the HTML my views produce -- it's just fine.

瑕疵 2024-10-28 05:20:52

在express 4.x中,将其添加到您的app.js中:

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

In express 4.x, add this to your app.js:

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}
一桥轻雨一伞开 2024-10-28 05:20:52

如果您使用控制台进行编译,那么您可以使用如下内容:

$ jade views/ --out html --pretty

If you are using the console to compile, then you can use something like this:

$ jade views/ --out html --pretty

在express 4.x中,将其添加到您的app.js中:

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

In express 4.x, add this to your app.js:

app.locals.pretty = app.get('env') === 'development';
我早已燃尽 2024-10-28 05:20:52

您真的需要格式良好的 html 吗?即使您尝试在一个编辑器中输出看起来不错的内容,在另一个编辑器中也可能看起来很奇怪。当然,我不知道你需要 html 做什么,但我会尝试使用 chrome 开发工具或 Firefox 的 firebug。这些工具可以让您更好地了解 DOM 而不是 html。

如果您确实需要格式良好的 html,那么请尝试使用 EJS 而不是 jade。这意味着你必须自己格式化 html。

Do you really need nicely formatted html? Even if you try to output something that looks nice in one editor, it can look weird in another. Granted, I don't know what you need the html for, but I'd try using the chrome development tools or firebug for Firefox. Those tools give you a good view of the DOM instead of the html.

If you really-really need nicely formatted html then try using EJS instead of jade. That would mean you'd have to format the html yourself though.

天赋异禀 2024-10-28 05:20:52

你可以使用tidy

以这个jade文件为例:

foo.jade< /strong>

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

现在你可以使用 node 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 通过 tidy 运行它会产生:

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>

you can use tidy

take for example this jade file:

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

now you can process it with node 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);
});

will give you s.th. like:

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

then running it through tidy with tidy -m output.html will result in:

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>
ˇ宁静的妩媚 2024-10-28 05:20:52

根据奥利弗的建议,这是一种查看美化 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

open 命令仅适用于 Mac。希望有帮助!

building off of oliver's suggestion, heres a quick and dirty way to view beautified html

1) download tidy

2) add this to your .bashrc

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

3) run

$ tidyme localhost:3000/path

the open command only works on macs. hope that helps!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文