ES6: Template strings + interpolation

Author: Golmote

components/prism-javascript.js

@@ -11,6 +11,25 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 	}
 });
 
+Prism.languages.insertBefore('javascript', 'string', {
+	'template-string': {
+		pattern: /`(?:\\`|\\?[^`])*`/,
+		inside: {
+			'interpolation': {
+				pattern: /\$\{[^}]+\}/,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\$\{|\}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			'string': /[\s\S]+/
+		}
+	}
+});
+
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {
 		'script': {

components/prism-javascript.min.js

@@ -50,6 +50,24 @@ <h2>A division operator on the same line as a regex</h2>
 <pre><code>var foo = 1/2, bar = /a/g;
 var foo = /a/, bar = 3/4;</code></pre>
 
+<h2>ES6 features</h2>
+<pre><code>// Regex "y" and "u" flags
+/[a-zA-Z]+/gimyu
+
+// for..of loops
+for(let x of y) { }
+
+// Modules: import
+import { foo as bar } from "file.js"
+
+// Template strings
+`Only on ${y} one line`
+`This template string ${x} is on
+
+multiple lines.`
+`40 + 2 = ${ 40 + 2 }`
+`The squares of the first 3 natural integers are ${[for (x of [1,2,3]) x*x].join(', ')}`</code></pre>
+
 <h2>Known failures</h2>
 <p>There are certain edge cases where Prism will fail.
 	There are always such cases in every regex-based syntax highlighter.
@@ -61,4 +79,11 @@ <h3>Comment-like substrings</h3>
 <pre><code>"foo /* bar */ baz"; "foo // bar";</code></pre>
 
 <h3>Two quotes of the same type (i.e. both single or both double) inside a regex</h3>
-<pre><code>foo = /"foo"/;</code></pre>
+<pre><code>foo = /"foo"/;</code></pre>
+
+<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>

examples/prism-javascript.html

@@ -588,6 +588,25 @@ Prism.languages.insertBefore('javascript', 'keyword', {
 	}
 });
 
+Prism.languages.insertBefore('javascript', 'string', {
+	'template-string': {
+		pattern: /`(?:\\`|\\?[^`])*`/,
+		inside: {
+			'interpolation': {
+				pattern: /\$\{[^}]+\}/,
+				inside: {
+					'interpolation-punctuation': {
+						pattern: /^\$\{|\}$/,
+						alias: 'punctuation'
+					},
+					rest: Prism.languages.javascript
+				}
+			},
+			'string': /[\s\S]+/
+		}
+	}
+});
+
 if (Prism.languages.markup) {
 	Prism.languages.insertBefore('markup', 'tag', {
 		'script': {