panoply / vscode-liquid

💧Liquid language support for VS Code
https://marketplace.visualstudio.com/items?itemName=sissel.shopify-liquid
Other
173 stars 22 forks source link

How is HTML being injected/embedded? #168

Closed IHIutch closed 6 months ago

IHIutch commented 1 year ago

I've been working on an extension for twig files (see: https://github.com/kaermorchen/twig-language-server) and so I've been poking around this repo for guidance (it's been really helpful!). One thing I can't seem to get working correctly is letting the default HTML syntax highlighter work as intended between Twig blocks. This extension handles this well, but I don't see where this is being handled.

In various other repos (and in the one mentioned above), I've manually added patterns for HTML tags. That seems like its unnecessary? Anyway, any guidance you have would be appreciated. Thanks!

Here's an example of what I have now:

image

vs how I expect it to work based on the work from this repo

image
panoply commented 1 year ago

Take a peak in the next branch it might be more helpful.

IHIutch commented 1 year ago

I'll take a look, thanks. Is there a specific place to get started? I feel like I'm way out of my depth working with syntax highlighting 😅

panoply commented 1 year ago

TextMate Grammars are bit of a mixed bad tbh, it's mostly a trial and error thing. They can be a tad painful overall. Having looked over the grammar file very briefly, it looks like you are overwriting the markup extendable. Maybe used the derivative (e.g: text.html.derivative). Both the Liquid and Twig template languages have cross-over similarities. My advice would be approaching the grammar architecture at the delimiter level.

The next branch has the v4 grammar overhaul which is a lot more refined than the current version, so maybe cut and copy from that file for your extension.

Let me know how you go and if you need any advice etc just message me!