Question

Whenever I render a JADE template, I get all HTML in a single line. This makes it difficult to read in view-source mode. How can I tell JADE to create HTML which is properly indented?

Here is my template:

#application
  p#docs
    a(href='/docs/index.html') Documentation

  p#user-input
    input#msg(name='msg', size='50')
    input#submit(name='submit', type='submit', value='Send a Message')

  ul#messages

Answer 1

In Jade’s compiling options set pretty to true.

Which can be done in multiple ways depending of how you are compiling them

• From the command line pass the -P or --pretty flag.
• From express 3.x: app.locals.pretty = true;

(express 2.x used a different syntax: app.set('view options', { pretty: true });, see migration guide: https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x)

Then you can do the following

#test.     // <-- notice the dot
    Lorem Ipsum is simply dummy text of 
    the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy 
    text ever since the 1500s ,
    when an unknown printer took a galley of type and scrambled 

which will produce

<div id="test">
    Lorem Ipsum is simply dummy text of 
    the printing and typesetting industry. 
    Lorem Ipsum has been the industry's standard dummy 
    text ever since the 1500s ,
    when an unknown printer took a galley of type and scrambled 
</div>