Liquid: Added Markup support, missing tokens, and other improvements (#…

…2950)

components.json

@@ -732,6 +732,7 @@
 		},
 		"liquid": {
 			"title": "Liquid",
+			"require": "markup-templating",
 			"owner": "cinhtau"
 		},
 		"lisp": {

components/prism-liquid.js

@@ -1,12 +1,61 @@
 Prism.languages.liquid = {
-	'keyword': /\b(?:comment|endcomment|if|elsif|else|endif|unless|endunless|for|endfor|case|endcase|when|in|break|assign|continue|limit|offset|range|reversed|raw|endraw|capture|endcapture|tablerow|endtablerow)\b/,
-	'number': /\b0b[01]+\b|\b0x(?:\.[\da-fp-]+|[\da-f]+(?:\.[\da-fp-]+)?)\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?[df]?/i,
-	'operator': {
-		pattern: /(^|[^.])(?:\+[+=]?|-[-=]?|!=?|<<?=?|>>?>?=?|==?|&[&=]?|\|[|=]?|\*=?|\/=?|%=?|\^=?|[?:~])/m,
+	'comment': {
+		pattern: /(^\{%\s*comment\s*%\})[\s\S]+(?=\{%\s*endcomment\s*%\}$)/,
 		lookbehind: true
 	},
-	'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
-	}
+	'delimiter': {
+		pattern: /^\{(?:\{\{|[%\{])-?|-?(?:\}\}|[%\}])\}$/,
+		alias: 'punctuation'
+	},
+	'string': {
+		pattern: /"[^"]*"|'[^']*'/,
+		greedy: true
+	},
+	'keyword': /\b(?:as|assign|break|continue|cycle|decrement|echo|else|elsif|(?:end)?(?:capture|case|comment|for|form|if|paginate|style|raw|tablerow|unless)|in|include|increment|limit|liquid|offset|range|render|reversed|section|when|with)\b/,
+	'function': [
+		{
+			pattern: /(\|\s*)\w+/,
+			lookbehind: true,
+			alias: 'filter'
+		},
+		{
+			// array functions
+			pattern: /(\.\s*)(?:first|last|size)/,
+			lookbehind: true
+		}
+	],
+	'boolean': /\b(?:true|false|nil)\b/,
+	'range': {
+		pattern: /\.\./,
+		alias: 'operator'
+	},
+	// https://github.com/Shopify/liquid/blob/698f5e0d967423e013f6169d9111bd969bd78337/lib/liquid/lexer.rb#L21
+	'number': /\b\d+(?:\.\d+)?\b/,
+	'operator': /[!=]=|<>|[<>]=?|[|?:=-]|\b(?:and|or|contains(?=\s))\b/,
+	'punctuation': /[.,\[\]()]/
 };
+
+Prism.hooks.add('before-tokenize', function (env) {
+	var liquidPattern = /\{%\s*comment\s*%\}[\s\S]*?\{%\s*endcomment\s*%\}|\{(?:%[\s\S]*?%|\{\{[\s\S]*?\}\}|\{[\s\S]*?\})\}/g;
+	var insideRaw = false;
+
+	Prism.languages['markup-templating'].buildPlaceholders(env, 'liquid', liquidPattern, function (match) {
+		var tagMatch = /^\{%-?\s*(\w+)/.exec(match);
+		if (tagMatch) {
+			var tag = tagMatch[1];
+			if (tag === 'raw' && !insideRaw) {
+				insideRaw = true;
+				return true;
+			} else if (tag === 'endraw') {
+				insideRaw = false;
+				return true;
+			}
+		}
+
+		return !insideRaw;
+	});
+});
+
+Prism.hooks.add('after-tokenize', function (env) {
+	Prism.languages['markup-templating'].tokenizePlaceholders(env, 'liquid');
+});

plugins/autoloader/prism-autoloader.js

@@ -88,6 +88,7 @@
 		],
 		"less": "css",
 		"lilypond": "scheme",
+		"liquid": "markup-templating",
 		"markdown": "markup",
 		"markup-templating": "markup",
 		"mongodb": "javascript",

tests/languages/liquid/boolean_feature.test

@@ -0,0 +1,26 @@
+{% if true and false and false or true %}
+
+{% nil %}
+
+----------------------------------------------------
+
+[
+	["liquid", [
+		["delimiter", "{%"],
+		["keyword", "if"],
+		["boolean", "true"],
+		["operator", "and"],
+		["boolean", "false"],
+		["operator", "and"],
+		["boolean", "false"],
+		["operator", "or"],
+		["boolean", "true"],
+		["delimiter", "%}"]
+	]],
+
+	["liquid", [
+		["delimiter", "{%"],
+		["boolean", "nil"],
+		["delimiter", "%}"]
+	]]
+]

tests/languages/liquid/comment_feature.test

@@ -0,0 +1,61 @@
+My name is Wilson Abercrombie{% comment %}, esquire{% endcomment %}.
+
+{% assign verb = "turned" %}
+{% comment %}
+{% assign verb = "converted" %}
+{% endcomment %}
+Anything you put between {% comment %} and {% endcomment %} tags
+is {{ verb }} into a comment.
+
+----------------------------------------------------
+
+[
+	"My name is Wilson Abercrombie",
+	["liquid", [
+		["delimiter", "{%"],
+		["keyword", "comment"],
+		["delimiter", "%}"],
+		["comment", ", esquire"],
+		["delimiter", "{%"],
+		["keyword", "endcomment"],
+		["delimiter", "%}"]
+	]],
+	".\r\n\r\n",
+
+	["liquid", [
+		["delimiter", "{%"],
+		["keyword", "assign"],
+		" verb ",
+		["operator", "="],
+		["string", "\"turned\""],
+		["delimiter", "%}"]
+	]],
+
+	["liquid", [
+		["delimiter", "{%"],
+		["keyword", "comment"],
+		["delimiter", "%}"],
+		["comment", "\r\n{% assign verb = \"converted\" %}\r\n"],
+		["delimiter", "{%"],
+		["keyword", "endcomment"],
+		["delimiter", "%}"]
+	]],
+
+	"\r\nAnything you put between ",
+	["liquid", [
+		["delimiter", "{%"],
+		["keyword", "comment"],
+		["delimiter", "%}"],
+		["comment", " and "],
+		["delimiter", "{%"],
+		["keyword", "endcomment"],
+		["delimiter", "%}"]
+	]],
+	" tags\r\nis ",
+	["liquid", [
+		["delimiter", "{{"],
+		" verb ",
+		["delimiter", "}}"]
+	]],
+	" into a comment."
+]