rodbMW

index.html

<pre><code id="content" class="language-liquid">

</code></pre>
aa

rodbmw.markdown

rodbMW

A Pen by Noah Pryor on CodePen.

License.

script.babel

(function(Prism) {

Prism.languages.liquid = {
  keyword: /\b(?:tablerow|endtablerow|if|endif|break|for|endfor|assign|ifchanged|endifchanged|case|endcase|include|continue|capture|endcapture|decrement|unless|endunless|increment|comment|endcomment|raw|endraw|cycle|javascript_tag|endjavascript_tag|google_analytics_tag|content_for|endcontent_for|yield|paginate|endpaginate|csrf_meta_tags|admin_header|preenrollment_form|blog_pagination|site_meta|favicons|purchase_form|cache|endcache|publiccache|endpubliccache|instant_checkout|endinstant_checkout|render_liquid|endrender_liquid|course_pagination|purchase|endpurchase|alert_messages|enroll_or_scroll_button|lecture_completion_data|csrf_param|zebra_stripe_css)\b/,
		'variable-delimiter': {
			pattern: /\{\{|\}\}$/,
			alias: 'punctuation'
		},
  	'tag-delimiter': {
			pattern: /\{\%|\%\}$/,
			alias: 'punctuation'
		},
		'string': /(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,
		'number': /\b0x[\dA-Fa-f]+\b|(?:\b\d+\.?\d*|\B\.\d+)(?:[Ee][+-]?\d+)?/,
		'boolean': /\b(?:true|false)\b/,

  operator: {
    pattern: /(^|[^.])(?:\+[+=]?|-[-=]?|!=?|<<?=?|>>?>?=?|==?|&[&=]?|\|[|=]?|\*=?|\/=?|%=?|\^=?|[?:~])/m,
    lookbehind: true
  },
  		variable: /[^!"#%&'()*+,.\/;<=>@\[\\\]^`{|}~\s]+/,

  function: {
    pattern: /(^|[\s;|&])(?:append|prepend|capitalize|cycle|cols|increment|decrement|abs|at_least|at_most|ceil|compact|concat|date|default|divided_by|downcase|escape|escape_once|first|floor|join|last|lstrip|map|minus|modulo|newline_to_br|plus|remove|remove_first|replace|replace_first|reverse|round|rstrip|size|slice|sort|sort_natural|split|strip|strip_html|strip_newlines|times|truncate|truncatewords|uniq|upcase|url_decode|url_encode|include|paginate)(?=$|[\s;|&])/,
    lookbehind: true
  }
};
  
  	Prism.hooks.add('before-tokenize', function(env) {
		var handlebarsPattern = /\{\%[\s\S]+?\%\}|\{\{[\s\S]+?\}\}/g;
		Prism.languages['markup-templating'].buildPlaceholders(env, 'liquid', handlebarsPattern);
	});

	Prism.hooks.add('after-tokenize', function(env) {
		Prism.languages['markup-templating'].tokenizePlaceholders(env, 'liquid');
	});
}(Prism));

const str = `
<div>
  <img src="https://example.com/img.png" />

  <a href="{{course.url}}"> {{course.name}}</a>
  {{'course.cta' | i18n }}
  
  {% if 2 == 3 %}
  {% endif %}
  {% if course.bundle? %}
    It's a bundle yo
  {% endif %}
</div>

`;

const target = document.querySelector("#content");

const highlighted = Prism.highlight(str, Prism.languages.liquid);
target.innerHTML = highlighted

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-markup-templating.js"></script>

styles

<link href="https://rawgit.com/PrismJS/prism/master/themes/prism-dark.css" rel="stylesheet" />