pugjs (jade template) - remove newlines in block statement

user_7983959 0
Viewed 896

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)

keystonejs pug node.js html javascript
2 Answers

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

user_75288290

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.

user_106374440
Related