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

This commit is contained in:
Hakim El Hattab 2020-06-05 10:47:24 +02:00
parent 6772518c5a
commit 37d8337411
4 changed files with 23 additions and 14 deletions

View File

@ -102,19 +102,19 @@
<section data-auto-animate> <section data-auto-animate>
<h2 data-id="code-title">With animations</h2> <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'; import React, { useState } from 'react';
function Example() { function Example() {
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
return ( 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 Click me
&lt;/button&gt; </button>
&lt;/div&gt; </div>
); );
} }
@ -122,15 +122,15 @@
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
return ( 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 Click me
&lt;/button&gt; </button>
&lt;/div&gt; </div>
); );
} }
</code></pre> </script></code></pre>
</section> </section>
<section> <section>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -35,6 +35,15 @@ const Plugin = {
[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) { [].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 // Trim whitespace if the "data-trim" attribute is present
if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) { if( block.hasAttribute( 'data-trim' ) && typeof block.innerHTML.trim === 'function' ) {
block.innerHTML = betterTrim( block ); block.innerHTML = betterTrim( block );