How are Liquid filter names syntax-highlighed using src/mode/liquid_highlight_rules.js?

[TomasHubelbauer]

Hi, this is a novice question, I don't have any experience with Ace nor TextMate which I know from the documentation is what the Ace syntax highlighting rule grammars are inspired by: https://ace.c9.io/#nav=higlighter (Defining Tokens section mentions this).

I am working on adding support for Jekyll built-in filters to LiquidJS. See here for a couple of sample PRs:

• feat: Add support for the Jekyll push filter harttle/liquidjs#611
• feat: Add support for the Jekyll sample filter harttle/liquidjs#612

LiquidJS has its own website and a Playground section on it which uses Ace and the liquid mode to highlight Liquid code.
There is no custom grammar or anything, just the OOTB Ace mode for Liquid.

The syntax highlighting highlights existing filters a given color, but the new filters I added aren't highlighted the same way.
I am wondering how I can continue to make the filters I contributed work the same way as the internal ones end to end.
It seems that to fix the syntax highlighting I should not look into LiquidJS but instead the Ace Liquid grammar, so that's what I am trying to do.

I found these two files relevant to the Liquid mode:

• https://github.com/ajaxorg/ace/blob/master/src/mode/liquid.js
• https://github.com/ajaxorg/ace/blob/master/src/mode/liquid_highlight_rules.js

I am having trouble making sense of how these files highlight even the existing filters though, much less how I can make them highlight the new filters I added.

This is what the LiquidJS Playground looks like now:

You can see the existing filter split gets highlighted correctly but my filter push doesn't.
Looking back at the two files I linked above, can anyone help me connect the dots as to how even the existing filter is matched by the mode rule set to make it highlighted like this? And if you'd be so patient, help me understand what changes I need to do to make my filters highlight the same way?

What's interesting though is that when I put the same exact code into the Ace Kitchen Sink site, they both highlight correctly:
https://ace.c9.io/build/kitchen-sink.html

Maybe this has to do with the LiquidJS repository after all as it applies a theme to Ace which might be contributing to the highlighting logic? I continue investigating.

I hope I am not being rude by tagging @panoply here as I've seen you've edited the Liquid mode rule set recently. Also @nightwing do you mind if I tag you here as well as someone who is likely to know?

I have not found any existing discussions relating to Liquid.

Thanks!

[panoply]

Hey @TomasHubelbauer

So this is likely version related in liquidjs as you can test your filters in the Kitchen Sink. (Change the theme to "Ace Tomorrow Night" to replicate the liquidjs theme playground) and highlighting will work as intended.

Additional Context

The PR I made in March for Ace actually already supports what you are seeking to achieve. The old grammar file for Liquid used by Ace didn't support custom filters and only a predefined set of filters would highlight (see diff commit ). Anyway, this is likely why your custom filters are not highlighting in the liquidjs playground, because the playgrounds version of Ace is using the old grammars.

Take a look at the original PR I made back in March here, which will hopefully help you a bit: #5098

I am having trouble making sense of how these files highlight even the existing filters though, much less how I can make them highlight the new filters I added.

In terms of your custom Jekyll Filters. The current grammars for Liquid will automatically apply highlighting (as per the kitchen-sink). So there is actually no need for a PR here (in Ace) as the approach I introduced makes sense of filters and character sequences which follow these two basic matches: https://github.com/ajaxorg/ace/blob/master/src/mode/liquid_highlight_rules.js#L221-L229 ~ this also aligns with official Liquid structures.

Maybe this has to do with the LiquidJS repository after all as it applies a theme to Ace which might be contributing to the highlighting logic? I continue investigating.

Is the liquidjs playground using the latest version of Ace?

---

Sidenote: I've written Liquid grammar for Syntax highlighting in Monaco (Monarch), VS Code (TextMate) and Ace and also got custom PrismJS Liquid flavors floating around. If you need any additional logic here, I'd be happy to share them with you.

[TomasHubelbauer]

Hi! Thank you so much for the detailed response and the additional context, it is much appreciated!

You were right this ended up being a simple old version issue, in the hindsight, I should have checked this first. :D The maintainer of LiquidJS has since updated Ace to latest.

I am glad to see the generalized approach to filter name highlighting is already in. I expected to find some list of filter names, but this is much more flexible! Also thanks for the offer to share your other Liquid related work with me. I don't have any use for it at the moment, like I said, I am just a novice at both Jekyll and Liquid and me working on this right now is more of a happenstance, but if that ever changes, I will be sure to contact you!