Express에서 멋진 형식의 HTML을 출력하려면 어떻게해야합니까?
Express for Node.js를 사용할 때 줄 바꿈 문자 나 탭없이 HTML 코드를 출력한다는 것을 알았습니다. 다운로드하는 것이 더 효율적일 수 있지만 개발 중에는 읽기가 쉽지 않습니다.
Express에서 멋진 형식의 HTML을 출력하려면 어떻게해야합니까?
당신의 메인 app.js또는 그 안에있는 것 :
익스프레스 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;
});
익스프레스 2.x
app.configure('development', function(){
app.use(express.errorHandler());
app.set('view options', { pretty: true });
});
development의 '못생긴'으로 더 많은 효율성을 원하기 때문에 예쁜 글씨를 넣었 습니다 production. NODE_ENV=production프로덕션 환경에 배포 할 때는 환경 변수를 설정하십시오 . 이것은 sh'스크립트'필드에서 사용 package.json하고 시작하기 위해 실행 되는 스크립트를 사용 하여 수행 할 수 있습니다 .
Express 3 는 다음과 같은 이유로이를 변경 했습니다.
"view options"설정은 더 이상 필요하지 않으며 app.locals는 res.render ()와 병합 된 로컬 변수이므로 [app.locals.pretty = true는 res.render (view, {pretty : 진실 }).
Jade / Express에서 html 출력을 "pretty-format"하려면 :
app.set('view options', { pretty: true });
Jade 자체에는 "pretty"옵션이 있습니다.
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을 디버깅 할 수있는 능력-괜찮습니다.
express 4.x에서 이것을 app.js에 추가하십시오.
if (app.get('env') === 'development') {
app.locals.pretty = true;
}
콘솔을 사용하여 컴파일하는 경우 다음과 같은 것을 사용할 수 있습니다.
$ jade views/ --out html --pretty
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.
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>
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!
In express 4.x, add this to your app.js:
app.locals.pretty = app.get('env') === 'development';
참고URL : https://stackoverflow.com/questions/5276892/how-can-i-get-express-to-output-nicely-formatted-html
'Programing' 카테고리의 다른 글
| .ToList (), .AsEnumerable (), AsQueryable ()의 차이점은 무엇입니까? (0) | 2020.05.30 |
|---|---|
| Angular 2 다른 모듈의 컴포넌트 사용 (0) | 2020.05.30 |
| 문자열을 n 문자 세그먼트로 나누려면 어떻게해야합니까? (0) | 2020.05.30 |
| V8에서이 코드 스 니펫을 사용하여 <=가 <보다 느린 이유는 무엇입니까? (0) | 2020.05.30 |
| httpd : ServerName에 127.0.0.1을 사용하여 서버의 정규화 된 도메인 이름을 안정적으로 확인할 수 없습니다. (0) | 2020.05.30 |