How to nest html inline tags after jade compilation?

Question

HTML

jade code:

.thumbnail
    .thumbnail-inner
        a(href="#")
            img(src="img-1.jpg")
            span.overlay

Compiles:

<div class="thumbnail">
    <div class="thumbnail-inner"><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a></div>
</div>

And you need:

<div class="thumbnail">
    <div class="thumbnail-inner">
        <a href="#">
            <img src="img-1.jpg">
            <span class="overlay"></span>
        </a>
    </div>
</div>

Answer 1

At one time (a year ago) I was looking for a solution and did not find it, most likely nothing has changed. The only thing you can add a comment:

.thumbnail
    .thumbnail-inner
        // Ссылка 1 
        a(href="#")
            img(src="img-1.jpg")
            span.overlay
        // Ссылка 2 
        a(href="#")
            img(src="img-1.jpg")
            span.overlay

<div class="thumbnail">
    <div class="thumbnail-inner">
        <!-- Ссылка 1 --><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a>
        <!-- Ссылка 2 --><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a>
    </div>
</div>

1. Using this plugin , you can more flexibly control the output code and disable pretty from jade.
2. You can also open Jade sources, there is an array with inline tags (jade/lib/inline-tags.js), you can remove the necessary tags from the list and they will be rendered as block tags.