xobs/fa23-si
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add code animation example to demo.html

Browse Source
This commit is contained in:
Hakim El Hattab
2020-03-01 10:21:30 +01:00
parent e2a2c2c022
commit d0188cb438
2 changed files with 82 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
demo.html
View File

@ -88,6 +88,42 @@
</p>
</section>
<section data-auto-animate>
<h2 data-id="code-title">Pretty Code</h2>
<pre data-id="code-animation"><code class="hljs" data-trim data-line-numbers>
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
...
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
</section>
<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|4,8-11">
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
</section>
<section>
<h2>Point of View</h2>
<p>
@ -239,27 +275,6 @@
</div>
</section>
<section>
<h2>Pretty Code</h2>
<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="https://highlightjs.org/usage/">highlight.js</a>.</p>
</section>
<section>
<h2>Marvelous List</h2>
<ul>