Skip to documentation content

Liquid Markup

Liquid Markup

Using the <liquid-markup> tag to run Liquid inside HTML content fields, with caveats for the editor.

<liquid-markup> is a special kind of tag that is only valid inside HTML content fields. Markup inside of the <liquid-markup> and </liquid-markup> tags will be evaluated before being output to the template. There are a few things to be aware of before using this tag, however:
• The template code can be hidden from the wysiwyg editor by using <liquid-markup protected>. Users will still be able to edit the code in source mode, though.
• Due to limitations of the HTML editor, the <liquid-markup> tag cannot contain any nested tags - or anything that looks like a nested tag. If the HTML editor thinks that it does contain a nested tag it will fail (unless it is protected - see above).
• You can use any content inside a <liquid-markup> tag, but if you use < and > signs you should leave a space around them to prevent the editor from mistaking them for opening and closing tags (see previous point).
• Do not attempt to use HTML-encoded entities inside an unprotected <liquid-markup> tag. The editor will automatically un-encode them and you will become frustrated. Double-encoding does not help. If you need to output html-encoded entities (eg: &amp;, &lt;, &quot;, etc...), either do it outside of the <liquid-markup> tag or make it protected.
• Do not use the {% raw %} ... {% endraw %} liquid syntax inside a <liquid-markup> tag. Close the tag instead. Alternatively, utilize the {% literal %} ... {% endliteral %} syntax.
• You can have multiple <liquid-markup> tags inside a content area if needed (eg: <liquid-markup>{% if test %}</liquid-markup><div>The {% characters do something special</div><liquid-markup>{% endif %}</liquid-markup>).
Example Run Liquid inside an HTML content fieldThe liquid-markup tag evaluates Liquid inside an HTML content field before that HTML is output.
HTML
<p>Office hours</p>
<liquid-markup>
{% if request.query_params.hours == "extended" -%}
<p>Open until 8pm.</p>
{%- else -%}
<p>Open until 5pm.</p>
{%- endif %}
</liquid-markup>
Output
<p>Office hours</p>
<p>Open until 5pm.</p>

Hide markup from the WYSIWYG editor with protected

HTML
<liquid-markup protected>
{% if request.query_params.debug == "1" -%}
<p>Debug is on.</p>
{%- endif %}
</liquid-markup>
Output
<p>Debug is on.</p>

Without the protected attribute, the markup is visible and editable in the WYSIWYG editor. With the protected attribute, the markup is NOT visible in the WYSIWYG editor and cannot easily be accidentally modified or removed by a user without swtiching to code view.