Liquid - Template language

Liquid is an open source template language created in 2008 by Tobias Lütke.

#79on PLDB

16Years Old

11kRepos

Download source code:

git clone https://github.com/Shopify/liquid

\n`, language: 'liquid', minimap: { enabled: false }, scrollbar: { vertical:"hidden", horizontal: "hidden", handleMouseWheel:false, }, overviewRulerLanes: 0, hideCursorInOverviewRuler: true, overviewRulerBorder: false, wordWrap: 'on', //lineNumbers: 'off', glyphMargin: false, folding: false, // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882 lineDecorationsWidth: 10, lineNumbersMinChars: 2 }); }); }) Homepage · Source Code · Docs

Liquid markup language. Safe, customer facing template language for flexible web apps.

Tags: template language
Liquid is developed on GitHub and has 10,950 stars
There are at least 11,459 Liquid repos on GitHub
Early development of Liquid happened in https://github.com/Shopify
Liquid is written in Ruby, Liquid, YAML, Markdown
The Google BigQuery Public Dataset GitHub snapshot shows 947 users using Liquid in 1k repos on GitHub
Monaco package for syntax highlighting Liquid
Pygments supports syntax highlighting for Liquid
GitHub supports syntax highlighting for Liquid
Indeed.com has 325 matches for "liquid engineer".
5 PLDB concepts link to Liquid: 11ty, Ace Editor, Liquid, mochajs, Pygments

Example from Linguist:

<h3>We have wonderful products!</h3>
<ul id="products">
  <div id="productpage">
    <div id="productimages"><div id="productimages-top"><div id="productimages-bottom">
      {% for image in product.images %}
        {% if forloop.first %}
          <a href="{{ image | product_img_url: 'large' }}" class="productimage" rel="lightbox">
            <img src="{{ image | product_img_url: 'medium'}}" alt="{{product.title | escape }}" />
          </a>
        {% else %}
          <a href="{{ image | product_img_url: 'large' }}" class="productimage-small" rel="lightbox">
            <img src="{{ image | product_img_url: 'small'}}" alt="{{product.title | escape }}" />
          </a>
        {% endif %}
      {% endfor %}
    </div></div></div>

    <h2>{{ product.title }}</h2>

    <ul id="details" class="hlist">
      <li>Vendor: {{ product.vendor | link_to_vendor }}</li>
      <li>Type: {{ product.type | link_to_type }}</li>
    </ul>

    <small>{{ product.price_min | money }}{% if product.price_varies %} - {{ product.price_max | money }}{% endif %}</small>

    <div id="variant-add">
      <form action="/cart/add" method="post">

        <select id="variant-select" name="id" class="product-info-options">
          {% for variant in product.variants %}
            <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
          {% endfor %}
        </select>

        <div id="price-field" class="price"></div>

      <div style="text-align:center;"><input type="image" name="add" value="Add to Cart" id="add" src="{{ 'addtocart.gif' | asset_url }}" /></div>
      </form>
    </div>

    <div class="description textile">
      {{ product.description }}
    </div>
  </div>

  <script type="text/javascript">
  <!--
    // prototype callback for multi variants dropdown selector
    var selectCallback = function(variant, selector) {
      if (variant && variant.available == true) {
        // selected a valid variant
        $('add').removeClassName('disabled'); // remove unavailable class from add-to-cart button
        $('add').disabled = false;           // reenable add-to-cart button
        $('price-field').innerHTML = Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}");  // update price field
      } else {
        // variant doesn't exist
        $('add').addClassName('disabled');      // set add-to-cart button to unavailable class
        $('add').disabled = true;              // disable add-to-cart button
        $('price-field').innerHTML = (variant) ? "Sold Out" : "Unavailable"; // update price-field message
      }
    };

    // initialize multi selector for product
    Event.observe(document, 'dom:loaded', function() {
      new Shopify.OptionSelectors("variant-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
    });
  -->
  </script>
</ul>

Language features

Feature	Supported	Example	Token
Booleans	✓		true false