How to escape liquid template tags?

TemplatesLiquid

Templates Problem Overview


This sounds very easy, however I couldn't find it anywhere in the docs. How can I write {% this %} in a liquid template, without it being processed by the engine?

Templates Solutions


Solution 1 - Templates

it is possible to disable liquid processing engine using the raw tag:

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

will display

{% this %}

Solution 2 - Templates

For future searchers, there is a way to escape without plugins, use the code below:

{{ "{% this " }}%}

and for tags, to escape {{ this }} use:

{{ "{{ this " }}}}

There is also a jekyll plugin for this which makes it a whole lot easier: https://gist.github.com/1020852

> Raw tag for jekyll. Keeps liquid from parsing text betweeen {% raw %} > and {% endraw %}

Reference

Solution 3 - Templates

You can escape liquid tags in Jekyll posts using {% raw %} {% endraw %} i.e

{% raw %}
  {% for post in site.posts %}
     {{ post.content }}
  {% endfor %}

{% endraw %}

will produce

  {% for post in site.posts %}
     {{ post.content }}
  {% endfor %}

Solution 4 - Templates

BTW:

If you want to display {{ "{% this " }}%}in Jekyll, you can code like this:

{{ "{{ " }}"{{ "{% this" }} " }}{{ "}}%}

To escape {{ "{{ this " }}}} use:

{{ "{{ " }}"{{ "{{ this" }} " }}{{ "}}}}

Solution 5 - Templates

There is another option: to use HTML special characters codes for replacing the curly braces with its matching codes:

> - replace each { with { > - replace each } with }

For more details about this solution see: http://www.tikalk.com/devops/curly_brances_workaround/

Solution 6 - Templates

I found a omnipotent way to display any text with curly braces. You can assign plain text to a variable, and display it.

{% assign var = "{{ sth }}" %}
{{ var }}

Solution 7 - Templates

As mentioned here also, plain {% raw %} and {% endraw %} are only the second best solution since those are shown if you look up the Markdown on normal github.com.

The best way is to put {% raw %} and {% endraw %} in HTML comments:

<!-- {% raw %} -->
something with curlky brackets like { this } and { that }
<!-- {% endraw %} -->

Due to the HTML comments it is seen by Github as a comment. In Github pages the raw tags will prevent the parsing of the curly brackets in between the tags.

Solution 8 - Templates

I tried {% raw %} something {% endraw %} ,

and {{ "{% this " }}%}. But they both don't work.

finally, my working answer is {{ "{%" xxx }} something }}.

My code:

{{ "{%" }} extends 'xadmin/base_site.html' %}
{{ "{%" }} block nav_form %}
    <h3>{{ "{{" }} title }}</h3>
    {{ "{%" }} for i in context1 %}
        <p>{{ "{{" }} i }}</p>
    {{ "{%" }} endfor %}
{{ "{%" }} endblock %}

The result:

{% extends 'xadmin/base_site.html' %}
{% block nav_form %}
    <h3>{{ title }}</h3>
    {% for i in context1 %}
        <p>{{ i }}</p>
    {% endfor %}
{% endblock %}

Solution 9 - Templates

Allows output of Liquid code on a page without being parsed.

{% raw %}{{ 5 | plus: 6 }}{% endraw %} equals 11.

{{ 5 | plus: 6 }} equals 11.

For more details about this solution see: https://www.shoplazza.dev/docs/theme-tags

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAttila O.View Question on Stackoverflow
Solution 1 - TemplatesEtienneView Answer on Stackoverflow
Solution 2 - TemplatesKhaja MinhajuddinView Answer on Stackoverflow
Solution 3 - TemplatesAhmed BouchefraView Answer on Stackoverflow
Solution 4 - TemplatesleimingView Answer on Stackoverflow
Solution 5 - TemplatesyorammiView Answer on Stackoverflow
Solution 6 - TemplatesMoreFreezeView Answer on Stackoverflow
Solution 7 - TemplatesliquidatView Answer on Stackoverflow
Solution 8 - Templates陈 章View Answer on Stackoverflow
Solution 9 - Templatestim888View Answer on Stackoverflow