Improve syntax highlighting and handling

[adrianocr]

I'm interested in helping improve the syntax highlighting and handling but I am not sure where to start yet. Any resources on the .tmLanguage file or vscode syntax highlighting you recommend?

Namely I think we should introduce better javascript <script> tag handling in the syntax highlighting. As of now if you have {{ variable }} inside of objects if often reads it as an error and the highlighting gets all messed up from that point on until you close the </script> block.

Additionally it'd be awesome if we could handle the new {% stylesheet %} {% endstylesheet %} blocks as a <style></style> block and the new {% javascript %} {% endjavascript %} block as a <script></script> block.

And lastly handling for {% schema %} {% endschema %} blocks as Javascript/JSON.

Those are all pretty much Section (https://help.shopify.com/themes/development/theme-editor/sections) related.

[turansadri]

These all would be excellent and also it would be nice to have highlighting for liquid tags which are used inside strings. For example in this case <div class="someclass {{ moreclasses }}"></div> the {{ }} tags are not highlighted.

[benzittlau]

I ran into the issue @turansadri is describing here while working in Jekyll. It's a very common thing to have some conditional logic inside an HTML tag in that use case (in particular for controlling styling), so having the syntax highlighting for liquid break in that case is pretty impactful.

Here's an example piece of code that sees this issue:

{% if page.url == "/" %}style="color: red;"{% endif %}>
<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>

What it appears as in VSCode with the current version of this extension. Note that the first usage is highlighted correctly, but the syntax highlighting on the exact same code is broken inside the html tag:

Liquid Language Support: 0.1.1
VSCode: 1.32.3