JavaScript: Add support for one level of nesting inside template stri…

…ngs. Fix #1397
PrismJS · Apr 22, 2018 · db2d0eb · db2d0eb
1 parent d95f8fb
commit db2d0eb
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 13 deletions.
diff --git a/components/prism-javascript.js b/components/prism-javascript.js
@@ -22,23 +22,24 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 
 Prism.languages.insertBefore('javascript', 'string', {
 	'template-string': {
-		pattern: /`(?:\\[\s\S]|[^\\`])*`/,
+		pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
 		greedy: true,
 		inside: {
 			'interpolation': {
-				pattern: /\$\{[^}]+\}/,
+				pattern: /\${[^}]+}/,
 				inside: {
 					'interpolation-punctuation': {
-						pattern: /^\$\{|\}$/,
+						pattern: /^\${|}$/,
 						alias: 'punctuation'
 					},
-					rest: Prism.languages.javascript
+					rest: null // See below
 				}
 			},
 			'string': /[\s\S]+/
 		}
 	}
 });
+Prism.languages.javascript['template-string'].inside['interpolation'].inside.rest = Prism.languages.javascript;
 
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {

diff --git a/components/prism-javascript.min.js b/components/prism-javascript.min.js
diff --git a/examples/prism-javascript.html b/examples/prism-javascript.html
@@ -74,7 +74,4 @@ <h2>Known failures</h2>
 
 <h3>String interpolation containing a closing brace</h3>
 <pre><code>`${ {foo:'bar'}.foo }`
-`${ '}' }`</code></pre>
-
-<h3>String interpolation containing an unescaped back-tick</h3>
-<pre><code>`${ '`' }`</code></pre>
+`${ '}' }`</code></pre>
diff --git a/prism.js b/prism.js
@@ -745,23 +745,24 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 
 Prism.languages.insertBefore('javascript', 'string', {
 	'template-string': {
-		pattern: /`(?:\\[\s\S]|[^\\`])*`/,
+		pattern: /`(?:\\[\s\S]|\${[^}]+}|[^\\`])*`/,
 		greedy: true,
 		inside: {
 			'interpolation': {
-				pattern: /\$\{[^}]+\}/,
+				pattern: /\${[^}]+}/,
 				inside: {
 					'interpolation-punctuation': {
-						pattern: /^\$\{|\}$/,
+						pattern: /^\${|}$/,
 						alias: 'punctuation'
 					},
-					rest: Prism.languages.javascript
+					rest: null // See below
 				}
 			},
 			'string': /[\s\S]+/
 		}
 	}
 });
+Prism.languages.javascript['template-string'].inside['interpolation'].inside.rest = Prism.languages.javascript;
 
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {

diff --git a/tests/languages/javascript/issue1397.test b/tests/languages/javascript/issue1397.test
@@ -0,0 +1,21 @@
+`${`a string`}`
+
+----------------------------------------------------
+
+[
+	["template-string", [
+		["string", "`"],
+		["interpolation", [
+			["interpolation-punctuation", "${"],
+			["template-string", [
+				["string", "`a string`"]
+			]],
+			["interpolation-punctuation", "}"]
+		]],
+		["string", "`"]
+	]]
+]
+
+----------------------------------------------------
+
+Checks for nested template strings. See #1397