I just want to understand why its doing it. Call me odd, but I like to be able to have easy to read HTML and yes I'm generating this using the '-pretty' option. I realize it's syntactically the same but what am I doing that is triggering it to do the span on the same line with the button (its parent in the DOM).

Pug Equivalent description : nav(class='.') I've stripped non-relevant class and other stuff from the example below to simplify. I've got the following HTML that I'm trying to capture in pug and having an issue with spans. +row('Email', 'data.email')(ngbindhtml='getTrusted(data.email)' ngShow='data.email & data.email != ''')īut at this point, its barely a template and I might as well just copy and paste, since I am already writing all the attributes for each row out separately even though they could be vastly simplified if I could just use string interpolation within attributes inside a pug mixin.Pug newbie here - I'm in the process of implementing repetitive html in pug just to get my feet wet. Add the views At this point, we will download the Eventually template from HTML5UP. This will add express and pug as dependencies in our package.json file. To install both Express and pug we will run the command as below: npm i -save express pug. +row('Telephone', 'data.telephone')(ngbindhtml='getTrusted(data.telephone)' ngShow='data.telephone & data.telephone != ''') We will need Express as our web application framework on top of Node.js and we will use Pug. +row('Registration', 'data.registration')(ngShow='data.registration & data.registration != ''') +row('Donation', 'data.donation')(ngShow='data.donation & data.donation != ''') +row('Check-in', 'data.checkin')(ngShow='data.checkin & data.checkin != ''') +row('Accommodation', 'data.accommodation')(ngShow='data.accommodation & data.accommodation != ''') +row('Venue', 'data.venue')(ngShow='data.venue & data.venue != ''') Span(class='preserve-newlines' ng-bind-html!=attributes.ngbindhtml)= ''

Pug template span