Problem with indentation in Blade views

Doesn't Atom have auto-formatter and some Blade plugins?

And show us the blade file, view-source is basically worthless in 2018, lol, I forgot that feature even existed. Why do you care if your source is formatted or not once compiled? You should care that your actual source file is fine, not the compiled dist.

Why is this bothering you?

@crnkovic , @topvillas : Customers do also look at this. Watching video tutorials on Laracasts I have noticed that HTML source code is well indented so the question has arisen spontaneously.

@crnkovic : I'm using language-blade plugin for Atom

I worked with many agencies and not a single customer ever cared about how my code is formatted. I literally haven't seen anyone open view-source in like 5 years. Inspect element yes, but that's 'auto-formatted'. If it's really bugging you, run it through the minifier and you're good. IMHO you shouldn't care about how you actual rendered HTML is formatted and I'm pretty sure 99% of web developers will tell you the same :)

@crnkovic : OK so I should not take care of it but how do Laracasts tutorials come with HTML well indented? They also use ATOM.

Would you link me to the video where Jeffrey opens up ? I'm not sure he ever did that, lol

Also, read this https://www.codebyamir.com/blog/view-source-vs-inspect-element

I don't think you'll get it cleaned up in all instances. Think about it. Add up the spaces in the view where the include is, plus the space on the first line of the include...

Like if you have a view partial with indented code like

                <div>hey, cool</div>
                <div>yeah</div>

and then you include that, like in the middle of another view

        <div>@include('view-partial')</div>

How would you expect the final output to be? Something like

        <div>                <div>hey, cool</div>
                <div>yeah</div></div>

It's literally just inserting one chunk of formatted html (including spaces and newlines) into another. Each on their own look fine, but when you add one into the other, it messes it up, which is understandable.

@crnkovic : Laravel 5.4 From Scratch, episode 11, time 12:15

Also in Pass Data to Your Views, Layouts and Structure, Rendering Posts

@Cronix , @crnkovic : I have to accept the inevitable. Thank you for the your replies!

@Tetravalence Probably the best you can do is have the includes on their own lines, and all the way on the left margin. It will won't be perfect, but it will help. It depends on the formatting of what you're including as well though.

Like if you took the above example, and used the include like

        <div>
@include('view-partial')
        </div>

it would come out like

        <div>
                <div>hey, cool</div>
                <div>yeah</div>
        </div>

@tetravalence, @cronix,

I was bothered by this as well, and as this will not be fixed in Laravel itself I decided to fix this in a package that extends on the blade compiler. The regex that finds the blade syntax in templates now includes any horizontal whitespace leading up to the blade statement, and passes it on to the resulting PHP statement that renders the content. After any newline in the replaced content the spacing is then added, and if the replaced content doesn't have a trailing newline it is added as well. Hope this helps anyone that comes across this!

I have been building a tool that generates html that people can copy and paste. I came up with this method to help with the indentation problem:

function indent($text, $indents, $tabLength = 4)
{
    return collect(explode("\n", $text))->map(function ($line, $index) use ($indents, $tabLength) {
            for ($i = 1; $i <= $indents * $tabLength; $i++) {
                $line = ' ' . $line;
            }

        return $line;
    })->join("\n");
}