Nithin Bekal About

Highlighting liquid code in Jekyll

02 Aug 2023

Recently I discovered that any liquid code we put in a Jekyll post gets evaluated by the liquid engine. This means that if you put in a code snippet for listing posts, you will see the actual HTML rendered, with all the posts.

As an example, try putting some liquid tags inside a markdown code block:

{{ "foo" | upcase }}

This is going to look like this:


So how are we seeing the raw liquid code above? There are two ways we can prevent liquid code from being evaluated.

The first option is to wrap the code in the {% raw %} tag. This would look like this:

{% raw %} {{ "foo" | upcase }} {% endraw %}

The second option is to use HTML entities like { and } for the opening and closing curly braces, respectively. We would need to type something like this in the markdown file:

{{ "foo" | upcase }}

Unfortunately, if we put this inside markdown fenced code blocks using ```, the actual entity will be rendered as-is rather than the intended character. We will need to explicitly wrap the code with <pre> and <code> tags to make this work.

Meta problem: How do we print the raw/endraw tags?

At this point, you might be wondering: If the raw/endraw tags are used to escape the other tags, how is the {% endraw %} tag appearing on this page? Because if you tried wrapping {% endraw %} itself inside another set of raw/endraw tags, it will look like this:

{% raw %}{% endraw %}{% endraw %}

The first endraw tag will terminate the block, and we will end up with a liquid error!

To solve this problem, we will need to break up these tags so that the opening tag token “{%” is a separate liquid variable. You might want to put this line before the code block, or it will appear as an empty line.

{% assign open = "{%" %}

Now to render the {% raw %} tag, we can do something like this:

{{ open }} raw %}

We can now go back to printing the code with raw and endraw tags. To display the string “{% raw %}{% endraw %}{% endraw %}”, we need to write:

{{ open }} raw %}{{ open }} endraw %}{{ open }} endraw %}

In case you are wondering, what kind of liquid code did it take to print the code block above, here you are:

{% raw %}{{ open }} raw %}{{ open }} endraw %}{{ open }} endraw %}{% endraw %}

Now, we really have to stop. If you’re curious what it took to print this line, you can always look up the markdown code for this post.

Here are a couple of other articles that helped me figure out how to escape liquid tags in Jekyll. (Bonus: you can look at their markdown source to see it in action.)

PS. I couldn’t help it. Here’s the liquid code for that last code block. This time, I really am done! ;)

{{ open }} raw %}{% raw %}{{ open }} raw %}{{ open }} endraw %}{{ open }} endraw %}{% endraw %}{{ open }} endraw %}
Hi, I’m Nithin! This is my blog about programming. Ruby is my programming language of choice and the topic of most of my articles here, but I occasionally also write about Elixir, and sometimes about the books I read. If you want to subscribe to this blog, the feed is available here.