Whitespace control – Liquid template language

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Whitespace control – Liquid template language</title> <meta name="description" content="An overview of controlling whitespace between code in the Liquid template language."> <meta name="author" content="Shopify"> <meta name="robots" content="index, follow"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <link rel="stylesheet" href="/liquid/css/main.css"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-32x.png" sizes="32x32"> <link rel="icon" type="image/png" href="/liquid/images/icons/water-drop-64x.png" sizes="64x64"> <link rel="canonical" href="https://shopify.github.io/liquid/basics/whitespace/"> <link rel="alternate" type="application/rss+xml" title="Liquid template language" href="/liquid/feed.xml" /> <meta property="og:site_name" content="Liquid template language"> <meta property="og:type" content="website"> <meta property="og:url" content="/liquid/basics/whitespace/"> <meta property="og:title" content="Whitespace control"> <meta property="og:description" content="An overview of controlling whitespace between code in the Liquid template language."> <meta name="twitter:site" content="Liquid template language"> <meta name="twitter:card" content="summary"> <meta name="twitter:url" content="https://shopify.github.io"> <meta name="twitter:title" content="Whitespace control"> <meta name="twitter:description" content="An overview of controlling whitespace between code in the Liquid template language.">  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-49178120-52"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-49178120-52'); </script> </head> <body> <div class="sidebar"> <header class="sidebar__logo" role="banner"> <a href="/liquid/">Liquid</a> </header><nav class="sidebar__nav"> <div class="sidebar__nav-interior"><h3 class="section__header" id="basics-section">Basics</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/basics/introduction/" class="section__link">Introduction</a> </li><li class="section__item"> <a href="/liquid/basics/operators/" class="section__link">Operators</a> </li><li class="section__item"> <a href="/liquid/basics/truthy-and-falsy/" class="section__link">Truthy and falsy</a> </li><li class="section__item"> <a href="/liquid/basics/types/" class="section__link">Types</a> </li><li class="section__item"> <a href="/liquid/basics/variations/" class="section__link">Variations of Liquid</a> </li><li class="section__item"> <a href="/liquid/basics/whitespace/" class="section__link section__link--is-active">Whitespace control</a> </li></ul><h3 class="section__header" id="tags-section">Tags</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/tags/control-flow/" class="section__link">Control flow</a> </li><li class="section__item"> <a href="/liquid/tags/iteration/" class="section__link">Iteration</a> </li><li class="section__item"> <a href="/liquid/tags/template/" class="section__link">Template</a> </li><li class="section__item"> <a href="/liquid/tags/variable/" class="section__link">Variable</a> </li></ul><h3 class="section__header" id="filters-section">Filters</h3> <ul class="section__links"><li class="section__item"> <a href="/liquid/filters/abs/" class="section__link">abs</a> </li><li class="section__item"> <a href="/liquid/filters/append/" class="section__link">append</a> </li><li class="section__item"> <a href="/liquid/filters/at_least/" class="section__link">at_least</a> </li><li class="section__item"> <a href="/liquid/filters/at_most/" class="section__link">at_most</a> </li><li class="section__item"> <a href="/liquid/filters/capitalize/" class="section__link">capitalize</a> </li><li class="section__item"> <a href="/liquid/filters/ceil/" class="section__link">ceil</a> </li><li class="section__item"> <a href="/liquid/filters/compact/" class="section__link">compact</a> </li><li class="section__item"> <a href="/liquid/filters/concat/" class="section__link">concat</a> </li><li class="section__item"> <a href="/liquid/filters/date/" class="section__link">date</a> </li><li class="section__item"> <a href="/liquid/filters/default/" class="section__link">default</a> </li><li class="section__item"> <a href="/liquid/filters/divided_by/" class="section__link">divided_by</a> </li><li class="section__item"> <a href="/liquid/filters/downcase/" class="section__link">downcase</a> </li><li class="section__item"> <a href="/liquid/filters/escape/" class="section__link">escape</a> </li><li class="section__item"> <a href="/liquid/filters/escape_once/" class="section__link">escape_once</a> </li><li class="section__item"> <a href="/liquid/filters/first/" class="section__link">first</a> </li><li class="section__item"> <a href="/liquid/filters/floor/" class="section__link">floor</a> </li><li class="section__item"> <a href="/liquid/filters/join/" class="section__link">join</a> </li><li class="section__item"> <a href="/liquid/filters/last/" class="section__link">last</a> </li><li class="section__item"> <a href="/liquid/filters/lstrip/" class="section__link">lstrip</a> </li><li class="section__item"> <a href="/liquid/filters/map/" class="section__link">map</a> </li><li class="section__item"> <a href="/liquid/filters/minus/" class="section__link">minus</a> </li><li class="section__item"> <a href="/liquid/filters/modulo/" class="section__link">modulo</a> </li><li class="section__item"> <a href="/liquid/filters/newline_to_br/" class="section__link">newline_to_br</a> </li><li class="section__item"> <a href="/liquid/filters/plus/" class="section__link">plus</a> </li><li class="section__item"> <a href="/liquid/filters/prepend/" class="section__link">prepend</a> </li><li class="section__item"> <a href="/liquid/filters/remove/" class="section__link">remove</a> </li><li class="section__item"> <a href="/liquid/filters/remove_first/" class="section__link">remove_first</a> </li><li class="section__item"> <a href="/liquid/filters/remove_last/" class="section__link">remove_last</a> </li><li class="section__item"> <a href="/liquid/filters/replace/" class="section__link">replace</a> </li><li class="section__item"> <a href="/liquid/filters/replace_first/" class="section__link">replace_first</a> </li><li class="section__item"> <a href="/liquid/filters/replace_last/" class="section__link">replace_last</a> </li><li class="section__item"> <a href="/liquid/filters/reverse/" class="section__link">reverse</a> </li><li class="section__item"> <a href="/liquid/filters/round/" class="section__link">round</a> </li><li class="section__item"> <a href="/liquid/filters/rstrip/" class="section__link">rstrip</a> </li><li class="section__item"> <a href="/liquid/filters/size/" class="section__link">size</a> </li><li class="section__item"> <a href="/liquid/filters/slice/" class="section__link">slice</a> </li><li class="section__item"> <a href="/liquid/filters/sort/" class="section__link">sort</a> </li><li class="section__item"> <a href="/liquid/filters/sort_natural/" class="section__link">sort_natural</a> </li><li class="section__item"> <a href="/liquid/filters/split/" class="section__link">split</a> </li><li class="section__item"> <a href="/liquid/filters/strip/" class="section__link">strip</a> </li><li class="section__item"> <a href="/liquid/filters/strip_html/" class="section__link">strip_html</a> </li><li class="section__item"> <a href="/liquid/filters/strip_newlines/" class="section__link">strip_newlines</a> </li><li class="section__item"> <a href="/liquid/filters/sum/" class="section__link">sum</a> </li><li class="section__item"> <a href="/liquid/filters/times/" class="section__link">times</a> </li><li class="section__item"> <a href="/liquid/filters/truncate/" class="section__link">truncate</a> </li><li class="section__item"> <a href="/liquid/filters/truncatewords/" class="section__link">truncatewords</a> </li><li class="section__item"> <a href="/liquid/filters/uniq/" class="section__link">uniq</a> </li><li class="section__item"> <a href="/liquid/filters/upcase/" class="section__link">upcase</a> </li><li class="section__item"> <a href="/liquid/filters/url_decode/" class="section__link">url_decode</a> </li><li class="section__item"> <a href="/liquid/filters/url_encode/" class="section__link">url_encode</a> </li><li class="section__item"> <a href="/liquid/filters/where/" class="section__link">where</a> </li></ul></div><script type="text/javascript"> document.getElementById("basics").scrollIntoView(); </script></nav> </div> <div class="content__overlay"></div> <main class="content__area" role="main"> <div class="content"> <button class="menu-button"> <span aria-hidden="true"><svg height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"/></svg></span> <span>Menu</span> </button> <h1>Whitespace control</h1> <p>In Liquid, you can include a hyphen in your tag syntax <code class="language-plaintext highlighter-rouge">{{-</code>, <code class="language-plaintext highlighter-rouge">-}}</code>, <code class="language-plaintext highlighter-rouge">{%-</code>, and <code class="language-plaintext highlighter-rouge">-%}</code> to strip whitespace from the left or right side of a rendered tag.</p> <p>Normally, even if it doesn’t print text, any line of Liquid in your template will still print a blank line in your rendered HTML:</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">my_variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"tomato"</span><span class="w"> </span><span class="p">%}</span> <span class="p">{{</span><span class="w"> </span><span class="nv">my_variable</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p>Notice the blank line before “tomato” in the rendered template:</p> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code> tomato </code></pre></div></div> <p>By including a hyphen in your <code class="language-plaintext highlighter-rouge">assign</code> closing delimiter, you can strip the whitespace following it from the rendered template:</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">my_variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"tomato"</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{{</span><span class="w"> </span><span class="nv">my_variable</span><span class="w"> </span><span class="p">}}</span> </code></pre></div></div> <p class="code-label">Output</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>tomato </code></pre></div></div> <p>If you don’t want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags (<code class="language-plaintext highlighter-rouge">{%-</code> and <code class="language-plaintext highlighter-rouge">-%}</code>):</p> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"John G. Chalmers-Smith"</span><span class="w"> </span><span class="p">%}</span> <span class="p">{%</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="ow">and</span><span class="w"> </span><span class="nv">username</span><span class="p">.</span><span class="nf">size</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="mi">10</span><span class="w"> </span><span class="p">%}</span> Wow, <span class="p">{{</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="p">}}</span> , you have a long name! <span class="p">{%</span><span class="w"> </span><span class="kr">else</span><span class="w"> </span><span class="p">%}</span> Hello there! <span class="p">{%</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span> </code></pre></div></div> <p class="code-label">Output without whitespace control</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code> Wow, John G. Chalmers-Smith , you have a long name! </code></pre></div></div> <p class="code-label">Input</p> <div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">assign</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"John G. Chalmers-Smith"</span><span class="w"> </span><span class="p">-%}</span> <span class="p">{%-</span><span class="w"> </span><span class="kr">if</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="ow">and</span><span class="w"> </span><span class="nv">username</span><span class="p">.</span><span class="nf">size</span><span class="w"> </span><span class="o">></span><span class="w"> </span><span class="mi">10</span><span class="w"> </span><span class="p">-%}</span> Wow, <span class="p">{{</span><span class="w"> </span><span class="nv">username</span><span class="w"> </span><span class="p">-}}</span> , you have a long name! <span class="p">{%-</span><span class="w"> </span><span class="kr">else</span><span class="w"> </span><span class="p">-%}</span> Hello there! <span class="p">{%-</span><span class="w"> </span><span class="kr">endif</span><span class="w"> </span><span class="p">%}</span> </code></pre></div></div> <p class="code-label">Output with whitespace control</p> <div class="language-text highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Wow, John G. Chalmers-Smith, you have a long name! </code></pre></div></div> </div> </main> <script src="/liquid/js/script.js"></script> </body> </html>

CINXE.COM

Whitespace control – Liquid template language