How to escape curly brackets in Liquid templates

Josh Sherman
1 min read
Software Development

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;.

Join the Conversation

Good stuff? Want more?

Weekly emails about technology, development, and sometimes sauerkraut.

100% Fresh, Grade A Content, Never Spam.

Related Articles