How to escape curly brackets in Liquid templates

My blog is generated by Jekyll. Jekyll uses Liquid for it’s templates. I include
a decent amount of source code in my articles and sometimes the syntax collides
with Liquid’s own syntax.

Then this happens:

 Liquid Warning: Liquid syntax error (line 34): Expected end_of_string but found comparison

When that, happens, I have to remember how the hell to escape the curly
brackets to play nice with Liquid again.

Fortunately, this doesn’t come up too often. It’s usually when passing around
raw objects in React.js:

 <Component prop={{ some: 'stuff' }} />

And more recently as I’ve been talking about GitHub Action’s workflow syntax:

if: ${{ $condition }}

Usually I’ll immediately attempt to use backslashes like I would do in most
other languages, but that just leaves you with {{ in your posts instead.

The trick with the curly brackets is to treat them like a variable and use
Liquid’s syntax to output the string like so:

{{ '{{' }}

Since you only need to escape the opening curly brackets, that’s all you need to
do.

If you’re working outside of code snippets, you could just use the HTML entities
as well, &#123; and &#125;.

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.


If you found this article helpful, please consider buying me a coffee.