-
Notifications
You must be signed in to change notification settings - Fork 450
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for Liquid #393
Comments
Here's a Liquid example: <ul id="products">
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
Only {{ product.price | price }}
{{ product.description | prettyprint | paragraph }}
</li>
{% endfor %}
</ul> It looks like ERB. Using http://prettydiff.com/ (/cc @prettydiff) I think it works right now: Input: <ul id="products">
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
Only {{ product.price | price }}
{{ product.description | prettyprint | paragraph }}
</li>
{% endfor %}
</ul> Output: <ul id="products">
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
Only {{ product.price | price }} {{ product.description | prettyprint | paragraph
}}
</li>
{% endfor %}
</ul> @hughker please play around with Pretty Diff's beautification at http://prettydiff.com/ and let me know if that does work. If so, then this could be added very soon. |
@Glavin001 seems to work pretty well. I see some things are breaking onto another line such as shown in your example with the |
Great! I am open to reviewing Pull Requests for adding this language and using Pretty Diff as the beautifier. See https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md#how-to-add-a-language for details, and let me know if anyone has any questions. |
@hughker I am writing a new markup parser from scratch: http://prettydiff.com/ignore/testlocation/prettydiff.com.xhtml That should provide superior support using half the code and execute 5x faster. Please let me know if you experience any bugs. The new parser is not released yet as I am still performing edge case testing. |
@prettydiff the new markup parser works great! I used the same code sample provided by @Glavin001 and it provided the following code: <ul id="products">
{% for product in products %}
<li>
<h2>{{ product.name }}</h2>
Only
{{ product.price | price }}
{{ product.description | prettyprint | paragraph }}
</li>
{% endfor %}
</ul> Would the new parser still be able to integrate with this? |
@hughker The new parser was released shortly after my prior comment. It should do everything you need. |
+1 for liquid support! |
+1 for liquid support |
+1 for liquid support! |
+1 for liquid support |
You guys please try passing Liquid samples through http://prettydiff.com/?m=beautify and let me know if there are problems. If this works well then I will write the pull request. |
@prettydiff definitely! Thank you. |
@prettydiff link to provide feedback/track issues? |
@prettydiff awesome! I'll get the team here using it and we can get some feedback for you. |
@prettydiff what code type have you found works best with liquid? I've tried |
@macdonaldr93 when I first opened this I tried |
@hughker sweet thanks! I'm going to keep testing and hopefully some other guys on the team will help out too so that we can get this into Atom Beautify. |
Please feel free to open Pretty Diff issues for advanced defects. If I am made aware of problems I can provide an opinion or resolution. If I have no idea then it won't get any better. |
@prettydiff I just want to confirm here that the intention of adding Liquid is to actually select Liquid as the language in Atom. We're probably going to develop our own syntax hightlighting so it would be nice if this was in it's own language rather than improved the existing |
@prettydiff I've added two issues. I will continue to log any issues with the |
Yes, a more specific language grammar would be ideal. It would be less ideal to identify this as ERB in the case that support for these languages diverge into the future. Yes, the liquid issue prefix will be very helpful... thank you. |
Great! Well I'll continue testing on a daily basis. Look forward to getting this liquid beautifier and language added to Atom. |
@prettydiff Thanks for your work on this! |
Support added to Pretty Diff v1.16.28. |
You rock! @prettydiff just out of curiosity, when would you expect this to be added to Atom Beautify? |
@macdonaldr93 : You can uninstall and reinstall Atom Beautify to trigger a fresh and up-to-date installation of Pretty Diff dependency. |
@macdonaldr93 You don't need any special grammar to trigger support. HTML grammar with Pretty Diff as the beautifier is good enough to get the full benefits. It would be nice to specify Liquid as a grammar (if it isn't already there) so as to call out support, though. The fastest way to get that though is to modify a couple files in Atom Beautify and submit a pull request. |
@Glavin001 thanks! @prettydiff just to confirm though, the HTML grammar wouldn't be using the new Liquid Template code type though? That's where we'd have to add Liquid grammar to Atom Beautify? |
@macdonaldr93 I only hide template features behind options and flags in the case of collisions. In this case the The only exception is when one of the delimiters occurs inside a JavaScript string and is not complete, for instance: |
@prettydiff that would be invalid Liquid syntax anyway since it is compiled before any javascript can run. +1 for everything you are doing 👊 |
@rickydazla Pretty Diff has had some updates since my previous comment that may fix this and other issues. Would you mind passing some code through the tool (http://prettydiff.com/) and let me know if quickly spot defects. |
@prettydiff yes: ✨ b.e.a.u.t.i.f.u.l! |
@prettydiff I did find an error when applying to a file of type e.g. this: margin: 0 {{ some_variable }}em; .... became this: margin: 0{{some_variable}}em; The removal of spacing in between the curly braces is ok (although not really necessary, I think it looks nicer with), but the removal of space after the zero is an obvious issue. |
@rickydazla I opened a defect for that minor item. I am currently away at a military school right now, so this weekend would be the earliest I could get to it. I have opened A LOT of issues since yesterday (first time being back online in 5 weeks), so I will get to it as quickly as I can. |
Do what you gotta do brother man, I'll be sitting here writing fugly code! |
Any clear instructions on how to add .LIQUID support? I don't see a Liquid option... |
Instructions on adding a new language (such as Liquid) can be found at https://github.com/Glavin001/atom-beautify/blob/master/docs/add-languages-and-beautifiers.md#how-to-add-a-language |
I am closing this issue as Liquid support is long since added to Pretty Diff. Please follow the guidance from Glavin for extending language support in Atom Beautify. |
Pull Requests welcome! Let me know if you have any questions. |
It's been a while since anyone has made comment on this. Is this still being worked on? I'm having formatting issues as described above. The frontmatter is getting inlined as mentioned on issue #261. Liquid tags are also breaking as shown below: Input Before Beautification<section class="about">
<div class="wrap">
{% regionblock about_quote, type: text %}
<p>Some paragraph text.</p>
{% endregionblock %}
{% regionblock about_image, type: image %}
<img src="/assets/images/about/about.jpg" class="img-fluid">
{% endregionblock %}
</div>
</section> Expected Output<section class="about">
<div class="wrap">
{% regionblock about_quote, type: text %}
<p>Some paragraph text.</p>
{% endregionblock %}
{% regionblock about_image, type: image %}
<img src="/assets/images/about/about.jpg" class="img-fluid">
{% endregionblock %}
</div>
</section> Output Using JS Beautify<section class="about">
<div class="wrap">
{% regionblock about_quote, type: text %}
<p>Some paragraph text.</p>
{% endregionblock %} {% regionblock about_image, type: image %}
<img src="/assets/images/about/about.jpg" class="img-fluid"> {% endregionblock %}
</div>
</section> Output Using Pretty Diff<section class="about">
<div class="wrap">
{% regionblock about_quote,
type: text %}
<p>Some paragraph text.</p>
{% endregionblock %}
{% regionblock about_image,
type: image %}
<img src="/assets/images/about/about.jpg" class="img-fluid">
{% endregionblock %}
</div>
</section> I realize these are custom tags, but it would seem anything inside the Also, the above is only if I highlight the single section. When I try to beautify the entire file with frontmatter present, Pretty Diff errors:
I've created a Gist of the full file if it's helpful. Software VersionsOS Linux (Ubuntu 17.10) $ uname -r
4.13.0-21-generic Atom $ atom -v
Atom : 1.22.1
Electron: 1.6.15
Chrome : 56.0.2924.87
Node : 7.4.0 Atom-Beautify
|
Any update on this? |
Would love to see support for Liquid if possible: https://github.com/Shopify/liquid
The text was updated successfully, but these errors were encountered: