Html

Html

{{ html }}

Properties of {{ html }} objects
Name Type Description
is_valid Boolean True if the value is not empty
value String The HTML input. If there are any <liquid-markup> tags, they will be evaluated exactly once. Multiple references to value will yield the same result
plain_value String The HTML input exactly as it was entered. Anytags will NOT be evaluated before returning the result
interpreted_value String Identical to value, except that template code insidetags will be evaluated every time interpreted_value is referenced
default_value String The default value (plain/uninterpreted) for this field if no value is specified
field_id String The identifier for this field
label String The label for this field
output String Same as value - except that output is clickable in the preview site while value is not. May include additional markup in the editor preview to make it easier to edit content

Allows any valid HTML input. May also include <liquid-markup> tags.

Related

{{ tags }}

Contains multiple tags.

{{ error_page }}

{{ code }}

{{ menu_item }}

{{ calendar_entry }}

{{ blog_post }}

string

Can be any text, from the empty string ("") to the full HTML output of the template. When used alone in a conditional, all strings evaluates as true - even if they are empty or a value such as "0" or "false".

{{ template }}

{{ snippet }}

{{ article }}

{{ time }}

Represents a specific instant in a specific timezone.

{{ author }}

{{ gallery_item }}

{{ tag }}

html_encode filter

Encode a string to be output as HTML. All special HTML characters will be converted to their equivalent HTML character entities (eg: &lt; becomes &lt;). This is functionally identical to the "escape" filter, though it may be more intuitive in some contexts - such as when using both the html_encode and html_decode filters to execute more advanced string manipulation.

html_encode

Examples

Encode a string for output inside other HTML markup.

Encode HTML entities in a string

Copy
<p title="{{"<p>A string with HTML & other characters</p>" | html_encode}}">...
<p title="&lt;p&gt;A string with HTML &amp; other characters&lt;/p&gt;">...

Related

{{ html }}

html_decode filter

Decodes any encoded HTML entities (eg: &amp;lt; becomes &lt;)

html_decode

Examples

Decode any encoded HTML entities inside a string.

Decode HTML entities in a string

Copy
{{"&lt;p&gt;A string with HTML &amp; other characters&lt;/p&gt;" | html_decode}}
<p>A string with HTML & other characters</p>

Related

{{ html }}

strip_html filter

Removes all HTML tags from a string

strip_html

This filter uses simple pattern matching to remove HTML tags. If the input is poorly formatted or contains unusual character sequences - particularly involving the &#39;&lt;&#39; and &#39;&gt;&#39; characters - this could result in unexpected behavior.

Examples

Demonstrates how to strip HTML from an input string.

Strip HTML from an input string

Copy
{{'<p>The quick brown fox jumps over the lazy dog.</p>' | strip_html}}
The quick brown fox jumps over the lazy dog.
{% capture input -%}
<script>... this will strip script blocks ...</script>
<style>... this will also strip style blocks ...</style>
<!-- and this will strip HTML comments -->
<p title="this will strip the open and close tags but leave the content intact">The quick brown fox jumps over the lazy dog.</p>
<br />
<img src="..." alt="note that this will also strip images" />
{%- endcapture -%}
{{input | strip_html | strip}}
The quick brown fox jumps over the lazy dog.

Could result in unexpected behavior with poorly formatted input

{% capture input -%}
//script outside of a script tag
if (a < b)
doSomething();
if(a > b)
doSomethingElse();
//endscript
{%- endcapture -%}
{{input | strip_html | strip}}
//script outside of a script tag
if (a b)
doSomethingElse();
//endscript

Could result in unexpected behavior with poorly formatted input

{% capture input -%}
<p>The following invalid markup contains an unescaped &gt; character in an HTML attribute:
<input type="button" onclick="if(a>b) doSomething();" value="Do Something" /></p>
{%- endcapture -%}
{{input | strip_html | strip}}
The following invalid markup contains an unescaped &gt; character in an HTML attribute:
b) doSomething();" value="Do Something" />

Related

{{ html }}

Examples

Demonstrates how to strip HTML from an input string.

Strip HTML from an input string

Copy
{{'<p>The quick brown fox jumps over the lazy dog.</p>' | strip_html}}
The quick brown fox jumps over the lazy dog.
{% capture input -%}
<script>... this will strip script blocks ...</script>
<style>... this will also strip style blocks ...</style>
<!-- and this will strip HTML comments -->
<p title="this will strip the open and close tags but leave the content intact">The quick brown fox jumps over the lazy dog.</p>
<br />
<img src="..." alt="note that this will also strip images" />
{%- endcapture -%}
{{input | strip_html | strip}}
The quick brown fox jumps over the lazy dog.

Could result in unexpected behavior with poorly formatted input

{% capture input -%}
//script outside of a script tag
if (a < b)
doSomething();
if(a > b)
doSomethingElse();
//endscript
{%- endcapture -%}
{{input | strip_html | strip}}
//script outside of a script tag
if (a b)
doSomethingElse();
//endscript

Could result in unexpected behavior with poorly formatted input

{% capture input -%}
<p>The following invalid markup contains an unescaped &gt; character in an HTML attribute:
<input type="button" onclick="if(a>b) doSomething();" value="Do Something" /></p>
{%- endcapture -%}
{{input | strip_html | strip}}
The following invalid markup contains an unescaped &gt; character in an HTML attribute:
b) doSomething();" value="Do Something" />

Encode a string for output inside other HTML markup.

Encode HTML entities in a string

Copy
<p title="{{"<p>A string with HTML & other characters</p>" | html_encode}}">...
<p title="&lt;p&gt;A string with HTML &amp; other characters&lt;/p&gt;">...

Decode any encoded HTML entities inside a string.

Decode HTML entities in a string

Copy
{{"&lt;p&gt;A string with HTML &amp; other characters&lt;/p&gt;" | html_decode}}
<p>A string with HTML & other characters</p>

Demonstrates how to dynamically render html tags using var.

Dynamically render html tags using var

Copy
<!-- This example uses a unicode variant of angle brackets (<>) to prevent the characters being escaped.
You will want to replace the angle brackets if you intend to copy/paste this example. -->

{% var tagtype = "div" %}
〈{{tagtype}}〉
{% if true %}
{% var tagtype = "span" %}
〈{{tagtype}}〉Some Content 〈/{{tagtype}}〉
{% endif %}
〈/{{tagtype}}〉

Escape HTML characters in a string for output inside other HTML markup.

Escape HTML characters in a string

Copy
<p title="{{"<p>A string with HTML & other characters</p>" | escape}}">...
<p title="&lt;p&gt;A string with HTML &amp; other characters&lt;/p&gt;">...

Escape HTML characters in a string for output inside other HTML markup. If HTML characters have already been escaped, do not &quot;double-escape&quot; them.

Escape HTML characters in a string once

Copy
<p title="{{"&lt;p&gt;A string with some characters encoded & others not encoded&lt;/p&gt;" | escape_once}}">...
<p title="&lt;p&gt;A string with some characters encoded &amp; others not encoded&lt;/p&gt;">...