Jade - Controlling line-breaks in the HTML output

Question

I have a simple search form I wish to implement using Jade.

form
    input(
        type="text"
        size="16"
        placeholder="Enter your keywords")
    input(
        type="button"
        value="Search")

The output is rendered as:

<form>
      <input type="text" size="16" placeholder="Enter your keywords">
      <input type="button" value="Search">
</form>

This is perfect except that the line-break is causing a space between my button and the search button. I need no space between the textbox and the button. I need the code to render like this:

<form>
      <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">
</form>

However I am using this project to create code that will need to be read in its HTML form, and can't simple remove white space from my project as a whole.

Is there a way I could output my form as indicated whilst retaining white spacing and line-breaking in the rest of my document?

Answer 1

I was looking for the same thing and came across this: http://scalate.fusesource.org/documentation/jade-syntax.html

Under Plain text: Whitespace Removal: > and <

I was having an issue with whitespace inside an <a> tag:

a.external(href={"http://foo.bar/" + reference.dxLink.get})
  |CrossRef

resulted in

<a href="http://foo.bar/10.1002/rmv.439">
                  CrossRef
</a>

Adding < to the end of the line:

a.external(href={"http://foo.bar/" + reference.dxLink.get})<
  |CrossRef

resulted in

<a href="http://foo.bar/10.1002/rmv.439">CrossRef</a>

Answer 2

If this is Jade for Node JS you can force jade to remove or add whitespace with the 'pretty' paramater

var jade = require('./../')
  , path = __dirname + '/whitespace.jade'
  , str = require('fs').readFileSync(path, 'utf8')
  , fn = jade.compile(str, { filename: path, pretty: true });

You could put your form template in a separate file (ex:myform.jade) and set pretty to false for that template when you load, or create a helper for this same purpose.

Answer 3

I also had this problem. locals.pretty is set to true under development as I want to read the rendered html. The space between two inputs would cause style problem.

My current solution is to use raw html for that two inputs:

form
  <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search">

This mixes a little none-jade text but renders the inputs without the extra space between them.