add support for wrapping code in script tempalte to avoid html parser #2684

demo.html

@@ -102,19 +102,19 @@
 
 				<section data-auto-animate>
 					<h2 data-id="code-title">With animations</h2>
-					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24">
+					<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers="|4,8-11|17|22-24"><script type="text/template">
 						import React, { useState } from 'react';
 
 						function Example() {
 						  const [count, setCount] = useState(0);
 
 						  return (
-						    &lt;div&gt;
+						    <div>
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+						      <p>You clicked {count} times</p>
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+						      <button onClick={() => setCount(count + 1)}>
 						        Click me
-						      &lt;/button&gt;
+						      </button>
-						    &lt;/div&gt;
+						    </div>
 						  );
 						}
 
@@ -122,15 +122,15 @@
 						  const [count, setCount] = useState(0);
 
 						  return (
-						    &lt;div&gt;
+						    <div>
-						      &lt;p&gt;You clicked {count} times&lt;/p&gt;
+						      <p>You clicked {count} times</p>
-						      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
+						      <button onClick={() => setCount(count + 1)}>
 						        Click me
-						      &lt;/button&gt;
+						      </button>
-						    &lt;/div&gt;
+						    </div>
 						  );
 						}
-					</code></pre>
+					</script></code></pre>
 				</section>
 
 				<section>

plugin/highlight/plugin.js

@@ -35,6 +35,15 @@ const Plugin = {
 
 		[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {
 
+			// Code can optionally be wrapped in script template to avoid
+			// HTML being parsed by the browser (i.e. when you need to
+			// include <, > or & in your code).
+			let substitute = block.querySelector( 'script[type="text/template"]' );
+			if( substitute ) {
+				// textContent handles the HTML entity escapes for us
+				block.textContent = substitute.innerHTML;
+			}
+
 			// Trim whitespace if the "data-trim" attribute is present
 			if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
 				block.innerHTML = betterTrim( block );