Как я могу получить Express для вывода красиво отформатированного HTML? - PullRequest
Новая
       14

Как я могу получить Express для вывода красиво отформатированного HTML?

164 голосов
/ 11 марта 2011

При использовании Express для Node.js я заметил, что он выводит код HTML без каких-либо символов новой строки или вкладок.Хотя загрузка может быть более эффективной, она не очень удобочитаема во время разработки.

Как заставить Express выводить красиво отформатированный HTML?

Ответы [ 9 ]

311 голосов
/ 05 августа 2012

В вашем основном app.js или что находится на его месте:

Экспресс 4.x 

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

Экспресс 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, который вы используете в поле «script» package.json и выполняете для запуска.

Express 3 изменил это потому что:

Настройка «view options» больше не нужна, app.locals - это локальные переменные, объединенные с res.render (), поэтому [app.locals.pretty = true - это то же самое, что и передача res.render (view, {pretty: true}).

50 голосов
/ 29 сентября 2011

Для вывода «симпатичного формата» html в Jade / Express: 

app.set('view options', { pretty: true });
7 голосов
/ 21 мая 2014

В Express 4.x добавьте это в ваш app.js: 

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}
7 голосов
/ 06 февраля 2012

В самой 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, который производят мои представления, - это прекрасно.

4 голосов
/ 26 июля 2015

Если вы используете консоль для компиляции, вы можете использовать что-то вроде этого: 

$ jade views/ --out html --pretty
0 голосов
/ 13 октября 2017

В Express 4.x добавьте это в ваш app.js: 

app.locals.pretty = app.get('env') === 'development';
0 голосов
/ 12 июня 2011

, основываясь на предложении Оливера, вот быстрый и грязный способ просмотра прекрасного html

1) download tidy

2) добавьте это в свой .bashrc 

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

3) выполнить 

$ tidyme localhost:3000/path

команда открытия работает только на Mac.надеюсь, что это поможет!

0 голосов
/ 27 апреля 2011

вы можете использовать приборка

возьмем, к примеру, этот нефритовый файл:

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 с помощью 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>
0 голосов
/ 14 марта 2011

Вам действительно нужен красиво отформатированный HTML?Даже если вы попытаетесь вывести что-то, что выглядит хорошо в одном редакторе, это может выглядеть странно в другом.Конечно, я не знаю, для чего нужен HTML, но я бы попробовал использовать инструменты разработки Chrome или Firebug для Firefox.Эти инструменты дают вам хорошее представление о DOM вместо html.

Если вам действительно нужно красиво отформатированный html, попробуйте использовать EJS вместо jade.Это означало бы, что вам придется самостоятельно форматировать HTML.

...