search

pugjs / pug

Pug – robust, elegant, feature rich template engine for Node.js
https://pugjs.org
21.69k stars 1.95k forks source link

how to output inline tag in a new line #2936

Closed Nurjaman57 closed 6 years ago

Nurjaman57 commented 6 years ago

Hi i am wondering how i can output inline tag into a new line so the end result will look like this

HTML #1

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>

HTML #2

<a class="lang-toggle" href="#" data-toggle="dropdown">
  <span>UK</span>
  <img src="assets/img/flags/UK.png" alt="UK">
  <span class="ti-angle-down"> </span>
</a>

Here is my pug file for html #1

.dropdown-menu(aria-labelledby='dropdownMenuLink')
  a.dropdown-item(href='#') Action
  a.dropdown-item(href='#') Another action                
  a.dropdown-item(href='#') Something else here

Here is my pug file for html #2

a(href='#', data-toggle='dropdown', class='lang-toggle')
 span UK
 img(src='assets/img/flags/UK.png', alt="UK")
 span.ti-angle-down

Many thanks in advance :)

ForbesLindesay commented 6 years ago

Pug does not produce "beautified" html, it produces html that works correctly in the browser. If you want additional whitespace, you must add it explicitly. e.g.

.dropdown-menu(aria-labelledby='dropdownMenuLink')
  = '\n'
  a.dropdown-item(href='#') Action
  = '\n'
  a.dropdown-item(href='#') Another action      
  = '\n'          
  a.dropdown-item(href='#') Something else here  
  = '\n'

If you just want prettier output, you can try running the output of pug through an html beautifier, but this should only ever be done for debugging.