9

I'm having a hard time removing the newline between elements in an each statement in a pug js template (formerly jade)

My code looks like this. I'd like to have no whitespace between the li elements when the HTML is rendered, so I'm attempting to use comments between them.

mixin nav(links)
  ul.nav <!--
    each link in links
      |-->
      li(class=(section == link.key ? 'active' : null)): a(href=link.href)= link.label
      |<!--
    |-->

Right now this is giving me this result:

<ul class="nav"><!---->
  <li class="active"><a href="/">Home</a></li><!---->
  <li><a href="/foo">Foo</a></li><!---->
  <li><a href="/bar">Bar</a></li><!---->
  <li><a href="/yada">Yada</a></li><!---->
</ul>

Is there a good way to tell pug I want no whitespace between these elements, or is this a limitation of the language? I'm using KeystoneJS which, in the development environment, will tell the pug interpreter to prettify the HTML. I'd like the product to be consistent across development to production (and not write a workaround in CSS that is negated by the minification in the production environment)

Ivan G.
  • 700
  • 8
  • 19
  • Pug renders everything on a single line, so this must be caused by keystone.js. – Graham Oct 05 '18 at 00:04
  • I'm voting to close this question as off-topic because this is an enhancement request for pug and should be posted in the pug github issues area. – Graham Oct 28 '18 at 02:47

2 Answers2

1

There is a "pretty" property in pug config. Pug adds whitespace to the resulting HTML if it is set to true (false by default). This is probably the cause of your problem. https://pugjs.org/api/reference.html

Artem Bozhko
  • 1,744
  • 11
  • 12
0

Remove the | (pipe) character from the template, and the comments. If you still have new lines, then it is Keystone.js that is making the new lines.

The reason to remove the | character is because according to the official PugJS website,

You could add one or more empty piped lines — a pipe with either spaces or nothing after it. This will insert whitespace in the rendered HTML.

VFDan
  • 831
  • 10
  • 26