169

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?

9 Answers 9

317

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

9
  • 1
    Please change the accepted answer to this as it's the right answer to date.
    – Val
    May 18, 2013 at 12:41
  • This worked, but I had to install a bunch of extra dependencies, namely promise, uglify-js, css and lexical-scope before it would run again (it would build, but crash on first request). I only added that one line.
    – CWSpear
    Oct 21, 2013 at 22:51
  • 2
    How to do that in Express 4.x ? May 20, 2014 at 16:21
  • 3
    @AntonioSalvati try app.locals.pretty = true
    – Huei Tan
    May 25, 2014 at 2:21
  • 1
    This is an awesome answer, exactly what I was looking for. It's refreshing to see how this is done for different versions of Express. I've searched for other issues and found answers that didn't mention what version of Express it was for. Oct 8, 2014 at 22:33
51

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

app.set('view options', { pretty: true });
2
  • 3
    Great solution! I wish it would match indent levels between layout/page too.
    – Stephen
    Oct 4, 2011 at 14:57
  • 35
    Outdated. Express 3 works a little different, see post written by EhevuTov.
    – user673046
    Aug 22, 2012 at 11:39
7

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.

2
  • 3
    If debugging HTML is all you're after you could always just 'inspect' the HTML using the Webkit or Firebug inspector. That always generates a perfectly formatted DOM tree.
    – Roshambo
    Oct 8, 2012 at 14:31
  • @Roshambo true, but navigating through the tree is time consuming, when u can just scan the source quicker (sometimes)
    – Val
    May 18, 2013 at 12:43
7

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

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}
3
  • Worked here - thanks! In my case I didn't have the 'env' var set. You can add it to the main .js file with this one line : process.env.NODE_ENV = 'development';
    – Gene Bo
    Jun 1, 2015 at 17:21
  • Why are you giving this answer if other answers already are giving this solution?
    – nbro
    Nov 18, 2015 at 10:20
  • I was the first to give this answer, the other answer was updated afterwards.
    – alarive
    Nov 18, 2015 at 13:02
4

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

$ jade views/ --out html --pretty
1

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

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

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.

1
  • I like ejs better now that I've worked with it for a while. I guess I'm just very particular about some things.
    – Stephen
    Apr 7, 2011 at 18:06
0

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>
0

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!

1
  • didn't know about the indent option...nice! I was using vim's built in formater.
    – oliver
    Jul 16, 2011 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.