Liquid

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

Source code:

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

#97on PLDB

16Years Old

11kRepos

\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 }); }); })

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

Liquid website
Liquid is developed on GitHub and has 9,596 stars
Liquid docs
There are at least 11,459 Liquid repos on GitHub
Liquid first developed in https://github.com/Shopify
PLDB estimates there are currently 325 job openings for Liquid programmers.
file extensions for Liquid include liquid
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".

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>

Liquid - Template language

Language features