168

Express for Node.js を使用すると、HTML コードが改行文字やタブなしで出力されることに気付きました。ダウンロードしたほうが効率的かもしれませんが、開発中はあまり読みにくくなります。

Express で適切にフォーマットされた HTML を出力するにはどうすればよいですか?

4

9 に答える 9

51

Jade/Express で HTML 出力を「整形」するには:

app.set('view options', { pretty: true });
于 2011-09-29T01:05:48.143 に答える
7

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 を実際にデバッグする機能) については、まったく問題ありません。

于 2012-02-06T01:20:46.213 に答える
7

Express 4.x では、これを app.js に追加します。

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}
于 2014-05-20T22:24:26.660 に答える
4

コンソールを使用してコンパイルしている場合は、次のようなものを使用できます。

$ jade views/ --out html --pretty
于 2015-07-26T16:50:38.097 に答える
0

適切にフォーマットされた html が本当に必要ですか? あるエディターで見栄えの良いものを出力しようとしても、別のエディターでは奇妙に見えることがあります。確かに、html が何のために必要なのかはわかりませんが、chrome 開発ツールまたは Firefox の firebug を使用してみます。これらのツールを使用すると、html ではなく DOM をよく見ることができます。

適切にフォーマットされた html が本当に必要な場合は、jade の代わりに EJS を使用してみてください。ただし、html を自分でフォーマットする必要があることを意味します。

于 2011-03-14T11:13:39.473 に答える
0

あなたはきれいに使うことができます

たとえば、次の jade ファイルを使用します。

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

あなたに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="/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>
于 2011-04-27T09:26:15.160 に答える
0

オリバーの提案から構築された、美化された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

open コマンドは Mac でのみ機能します。それが役立つことを願っています!

于 2011-06-11T20:32:54.527 に答える