aboutsummaryrefslogtreecommitdiff
path: root/demo.html
diff options
context:
space:
mode:
authorHakim El Hattab <hakim.elhattab@gmail.com>2019-03-08 15:07:59 +0100
committerHakim El Hattab <hakim.elhattab@gmail.com>2019-03-08 15:07:59 +0100
commitcef864a7be9abe6e53810a83f6a577e83433cc66 (patch)
tree9702d5aee3fa889ef41258ce4f5a3d654b5fad5f /demo.html
parentb6e136776ac73319140bea81e68a4e03c5269dc0 (diff)
downloadperl-software-in-gnu-guix-cef864a7be9abe6e53810a83f6a577e83433cc66.tar
perl-software-in-gnu-guix-cef864a7be9abe6e53810a83f6a577e83433cc66.tar.gz
highlight plugin updates; support for line numbers and highlighting specific lines
Diffstat (limited to 'demo.html')
-rw-r--r--demo.html38
1 files changed, 19 insertions, 19 deletions
diff --git a/demo.html b/demo.html
index b24ba18..ac273d5 100644
--- a/demo.html
+++ b/demo.html
@@ -199,16 +199,16 @@
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2>
- <pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
+ <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tiled Backgrounds</h2>
- <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
+ <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2>
- <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
+ <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div>
</section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
@@ -221,7 +221,7 @@
<p>
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
</p>
- <pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
+ <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
</section>
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
@@ -229,25 +229,25 @@
<p>
You can override background transitions per-slide.
</p>
- <pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
+ <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
</section>
<section>
<h2>Pretty Code</h2>
- <pre><code class="hljs" data-trim contenteditable>
-function linkify( selector ) {
- if( supports3DTransforms ) {
-
- var nodes = document.querySelectorAll( selector );
-
- for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
- var node = nodes[i];
-
- if( !node.className ) {
- node.className += ' roll';
- }
- }
- }
+ <pre><code class="hljs line-numbers" data-trim data-highlight-lines="4,8-9">
+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="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>