Questions Concepts
GitHub icon

Liquid

Liquid - Template language

< >

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 15Years 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.


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 Token Example
Booleans true false

View source

- Build the next great programming language · Search · Add Language · Features · Creators · Resources · About · Blog · Acknowledgements · Queries · Stats · Sponsor · Traffic · Traffic Today · Day 305 · feedback@pldb.com · Logout