blocks|key|971366|text|你真的需要格式良好的html吗？即使您尝试在一个编辑器中输出看起来不错的内容，它在另一个编辑器中也可能看起来很奇怪。诚然，我不知道您需要html做什么，但我会尝试使用chrome开发工具或Firefox的firebug。这些工具使您可以很好地查看DOM而不是html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971367|如果你真的-真的需要格式良好的html，那么试着使用EJS而不是jade。这意味着你必须自己格式化html。|971368|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

blocks|key|971428|text|基于oliver的建议，这里有一种快速而肮脏的方式来查看美化的html|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971429|1)下载tidy|offset|length|971430|2)将这个添加到你的.bashrc中|971431|function+tidyme()+{
curl+$1+%7C+tidy+-indent+-quiet+-output+tidy.html+;+open+-a+'google+chrome'+tidy.html
}|code-block|syntax|javascript|971432|3)运行|971433|$+tidyme+localhost:3000/path|971434|open命令仅在macs上有效。希望这能有所帮助！|971435|entityMap|0|LINK|mutability|MUTABLE|url|http://tidy.sourceforge.net/#source^0|0|4|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

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

1) download <a href="http://tidy.sourceforge.net/#source" rel="nofollow">tidy</a> 

2) add this to your .bashrc

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

3) run 

<pre><code>$ tidyme localhost:3000/path
</code></pre>

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

blocks|key|971472|text|要在Jade/Express中对html输出进行“美观格式化”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971473|app.set('view+options',+{+pretty:+true+});|code-block|syntax|javascript|971474|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>app.set('view options', { pretty: true });
</code></pre>

blocks|key|971550|text|Jade本身有一个“漂亮”的选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971551|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()+);|code-block|syntax|javascript|971552|...gets命令如下：|971553|<!DOCTYPE+html>
<html>
++<body>
++++<div+id="foo">I+am+a+foo+div!
++++</div>
++</body>
</html>|971554|我看起来并不是很老练，但对于我所追求的--能够实际调试我的视图生成的HTML+--来说，这是很好的。|971555|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

There is a "pretty" option in Jade itself:

<pre><code>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() );
</code></pre>

...gets you this:

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;body&gt;
 &lt;div id="foo"&gt;I am a foo div!
 &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

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.

blocks|key|971615|text|在express+4.x中，将以下代码添加到您的app.js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971616|if+(app.get('env')+===+'development')+{
++app.locals.pretty+=+true;
}|code-block|syntax|javascript|971617|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>if (app.get('env') === 'development') {
 app.locals.pretty = true;
}
</code></pre>

blocks|key|756043|text|如果您正在使用控制台进行编译，则可以使用类似以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|756044|$+jade+views/+--out+html+--pretty|code-block|syntax|javascript|756045|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$ jade views/ --out html --pretty
</code></pre>

blocks|key|971697|text|在express+4.x中，将以下代码添加到您的app.js：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|971698|app.locals.pretty+=+app.get('env')+===+'development';|code-block|syntax|javascript|971699|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>app.locals.pretty = app.get('env') === 'development';
</code></pre>

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?

How can I get Express to output nicely formatted HTML?

当使用ExpressforHTML时，我注意到它输出的Node.js代码没有任何换行符或制表符。虽然下载它可能更有效，但在开发过程中它的可读性不是很好。如何让Express输出格式良好的HTML？

问如何让Express输出格式良好的HTML？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Express输出格式良好的HTML？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何让Express输出格式良好的HTML？
EN