Highlight JS tagged template literals (#1931)

This adds support for highlighting embedded languages in JavaScript tagged template literals.
PrismJS · Jul 21, 2019 · c884428 · c884428
1 parent 452d5c7
commit c884428
Show file tree

Hide file tree

Showing 21 changed files with 901 additions and 41 deletions.
diff --git a/components.js b/components.js
diff --git a/components.json b/components.json
@@ -466,6 +466,18 @@
 			],
 			"owner": "RunDevelopment"
 		},
+		"js-templates": {
+			"title": "JS Templates",
+			"require": "javascript",
+			"peerDependencies": [
+				"css",
+				"css-extras",
+				"graphql",
+				"markdown",
+				"markup"
+			],
+			"owner": "RunDevelopment"
+		},
 		"json": {
 			"title": "JSON",
 			"owner": "CupOfTea696"
@@ -750,7 +762,8 @@
 			"require": ["markup", "javascript"],
 			"peerDependencies": [
 				"jsdoc",
-				"js-extras"
+				"js-extras",
+				"js-templates"
 			],
 			"owner": "vkbansal"
 		},
@@ -892,6 +905,7 @@
 		"typescript": {
 			"title": "TypeScript",
 			"require": "javascript",
+			"peerDependencies": "js-templates",
 			"alias": "ts",
 			"owner": "vkbansal"
 		},

diff --git a/components/prism-javascript.js b/components/prism-javascript.js
@@ -61,11 +61,16 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 
 Prism.languages.insertBefore('javascript', 'string', {
 	'template-string': {
-		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|[^\\`])*`/,
+		pattern: /`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,
 		greedy: true,
 		inside: {
+			'template-punctuation': {
+				pattern: /^`|`$/,
+				alias: 'string'
+			},
 			'interpolation': {
-				pattern: /\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
+				pattern: /((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,
+				lookbehind: true,
 				inside: {
 					'interpolation-punctuation': {
 						pattern: /^\${|}$/,

diff --git a/components/prism-javascript.min.js b/components/prism-javascript.min.js