Jekyll document autoformat problem.

[Serhioromano]

Please look here microsoft/vscode#24088

Is this an issue for this plugin?

[edheltzel]

@Serhioromano I can confirm the formatting issues with "editor.formatOnSave": true for HTML files with Front-Matter. But, if I change the grammar of the file from plain HTML to Liquid HTML The formatting issues go away.

[Serhioromano]

Yes the problem goes away but formatting also goes away. It no longer format this document. So I have to manually format it with is inconvenient.

May be you have to add formatting options for Liquid HTML documents.

[edheltzel]

@Serhioromano I'll have to dig into the docs of VS Code a little more to see how to get HTML formatting for the Liquid Languages Support - But that might need to be referenced in the repo.

[Serhioromano]

I added new comment in VS Code topic because I think it should be general formatting issue.

Also there is a thread in Beautifier repository
beautifier/js-beautify#510

[jel111]

Is there some problem with Handlebars being the same syntax? I forgot the term for changing that so the syntax is different. Do you know what that is called? Thanks!

[edheltzel]

@jel111 I believe it is really more of a front-matter issue vs the curly brackets
check out this: microsoft/vscode#24088 (comment)

As for the term, I think you might be saying grammar? (VSCode calls it “Language Mode”)

[edheltzel]

@Serhioromano as I mentioned in microsoft/vscode#24088 (comment)

---

For anyone else having formatting issues:

consider installing VSCode prettydiff extension to format your liquid tags

[jel111]

Thanks.

[michellecarrasco]

Thanks for the tip @ginfuru
However, this is not working for frontmatter tags.
You can try this example:

--- 
layout: default 
---

<div class="row">
    <div class="large-2 column">
        <ul class="menu vertical">
            {% assign sorted = site.docs | sort:"order" %} {% for post in sorted %}
            <li class="{% if page.url == post.url %}active{% endif %}"><a href={{ post.url }}>{{ post.menu }}</a></li>
            {% endfor %}
        </ul>
    </div>
    <div class="large-10 column">
        <header class="post-header">
            <h1 class="post-title">{{ page.title | escape }}</h1>
        </header>
        {{ content }}
    </div>
</div>

on the prettydiff demo site: http://prettydiff.com/
Note: You have to try with the beautify function that you can select with the top radio button.

Here is the (non-working with Jekyll 3.7.3) result:

--- layout: default ---

<div class="row">
...
</div>

Note: I also tried with the vscode plugin and I got the same result.
Note 2: The demo site doesn't seems to use the last build but it was built after the GH issues were fixed: https://github.com/prettydiff/prettydiff/issues?utf8=%E2%9C%93&q=liquid%20