Syntax highlighting for JSON-T Squarespace templates

I created a custom grammar extension, and learned regular expressions along the way.

When I used to work with Squarespace a lot, I thought it would be nice if the JSON-Template tags — the template language Squarespace uses for its custom templates — were highlighted in my editor like Liquid or other languages. The main JSON-T spec is quite minimal, but Squarespace has added a bunch of additional filters and directives, so I was often bouncing between the two documentation sites. I used to be quite intimidated by Regular Expressions, but this project was like an intensive course and now I use RegEx all the time! Sites like RegExr and regex101 were invaluable in trying out different patterns and eventually internalising how they work.

I started with an extension for Atom, and later ported it to Sublime Text and VS Code. The Sublime Text version was by far the most cumbersome, mainly due to being a lot harder to publish the extension itself. Working with XML and CSON (a CoffeeScript flavour of JSON) isn’t always a treat either. I’d really like to consolidate these repositories and have a single primary instance of the grammar that can be built for the different formats.

Although I don’t work with custom Squarespace templates much these days, I’d like to revisit this and see if I could improve some of the RegEx patterns.