How to get around forced indent on block elements?

[MattTreichelYeah]

I have an <a> tag with an <svg> tag within it.

a(href='#') Link
    svg
        use(xlink:href="icons.svg#alert")

This outputs as

<a href="#">Link
    <svg>
        <use xlink:href="icons.svg#alert"></use>
    </svg>
</a>

My problem with this is the line-break & indent Pug "pretty" formats with with means the hyperlink has a character space underlined between the text and the SVG. If I was using an <i> or <img> tag I wouldn't have this problem because they're treated as inline tags, and wouldn't be formatted.

What are my options for removing this underlined space and have the SVG within the <a> tag? I've looked into turning off the "pretty" compiler option for just this small section, but do I have any other solution? I see mention of pug-parser plugins to override the parser, would it be possible to tell it to treat an <svg> tag as inline? Is this doable in the current Jade version? Is this a bad idea?

[TimothyGu]

We recommend not using the pretty mode at all. In fact, we have plans to deprecate it.

[MattTreichelYeah]

Interesting, so what would solutions be if you planned to output HTML that you planned for further stages of human modifications to be made to?

[qm3ster]

There's no reason why pug should be doing the pretty-printing, other than if it would expose how the source file was formatted. Since pug has significant indents and newlines, there is only one way to write most things. This means no special information can exist that would need to be retained, and you would benefit just as much by using any other project's beautifier to inflate the html.

[MattTreichelYeah]

I guess that is a valid point. I'll have to consider another Beautifier then. Thanks for the explanation.

[ForbesLindesay]

I think the conclusion you should be drawing is: don't beautify your html. It's just sending unnecessary white space over the wire and much more error prone. Stop doing it.

[MattTreichelYeah]

We create our HTML in Jade which a later team then integrates our backend/business rules into. I'm not fully sure how the process works, but it's been valuable for them to have our cleanly formatted HTML to make those changes. Our priority isn't to send it over the wire like that.

But sure, if you think it's a bad idea, maybe there's a better way to do it. I'm just saying we've found it valuable for passing our work along to the next team.

[jeromew]

I understand that human interaction with the generated html is facilitated by pretty printing.

Pug does not have "pretty printing" (jade had some pretty printing in the past) because pretty printing is too opiniated (each developer may want its own pretty printing configuration) and creates too much work for a feature that is not used in browsers.

It has already been discussed that pretty-printing should be a post-processing task when using pug : render your file with pug and then pretty-print them with an external tool such as http://www.html-tidy.org/ for instance. There seem to be a node wrapper here - https://github.com/gagern/node-libtidy

[MattTreichelYeah]

Yeah, thanks for the thoughts. We can definitely consider doing that instead.

[chharvey]

Try the plain-text pipe

a(href='#')
    | Link
    svg
        use(xlink:href="icons.svg#alert")

[MattTreichelYeah]

That outputs the same as my example, so doesn't help. Thanks though.