Escape Liquid template tags in Jekyll posts
Have you ever tried to add some Liquid tags in your Jekyll powered blog posts as a code snippet? The Jekyll normally interpreting Liquid tags in posts even if they are in code block.
After some searches, I find two simple methode to escape Liquid tags in Jekyll posts. I tried both and they both works on my blog including this post.
Solution 1
if we wrap any thing in posts with {% raw %} and {% endraw %} tags, they will escape from formatting in Jekyll.
If we want to display a liquid tag as a word in paragraph, we want to wrap our liquid tag with {% raw %} and {% endraw %} tags.
For example, the markdown {% raw %}{{ page.date }}{% endraw %} is converted in to {{ page.date }} in HTML output.
If we want to display a liquid tag as a span of code in paragraph, additionally we want to wrap our liquid tag with backtick quotes (`).
Consider the same example, the markdown {% raw %}`{{ page.date }}`{% endraw %} is converted in to {{ page.date }} in HTML.
We can use this same escaping method for Liquid tags in code blocks. But if our code block have any other language tags (especially HTML), we want to use syntax highlighting for that language tags with and tags like below example.
{% highlight html %}{% raw %}
\\our code block with Liquid & HTML tags comes here
{% endraw %}{% endhighlight %}
Solution 2
I also find a stack overflow answer about this issue. It use a different method by escaping characters of liquid markup.
Let’s say we want to display {% hello %}, then we want to type {{ "{%" }} hello %} and if we want to display {{ hello }}, then we want to type {{ "{{" }} hello }}.
Next time, when you want to display code snippet with Liquid tag in your Jekyll blog, use this tips and make beautiful code snippets in your Jekyll blog.
Recent Posts
- Automating Release Generation with GitHub Actions
- WP CLI Commands to Bulk Delete Entries in WordPress Database
- Split a Single CSV File into Multiple Files Using the Split Command - Bash
- Migrating code repo from BitBucket to GitHub
- Streamlining Development - Our Journey with Git, Bitbucket, and Jira
Your Questions / Comments
If you found this article interesting, found errors, or just want to discuss about it, please get in touch.