Jade - Controlling line-breaks in the HTML output

William Owen picture William Owen · Aug 8, 2012 · Viewed 7.2k times · Source

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

Todd Carter picture Todd Carter · Nov 23, 2012

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>