diff options
Diffstat (limited to 'demo.html')
| -rw-r--r-- | demo.html | 61 |
1 files changed, 35 insertions, 26 deletions
@@ -12,13 +12,14 @@ <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/theme/black.css" id="theme"> <!-- Theme used for syntax highlighting of code --> - <link rel="stylesheet" href="lib/css/zenburn.css"> + <link rel="stylesheet" href="lib/css/monokai.css"> <!-- Printing and PDF exports --> <script> @@ -93,7 +94,10 @@ Press <strong>ESC</strong> to enter the slide overview. </p> <p> - Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out. + Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out. + </p> + <p> + (NOTE: Use ctrl + click in Linux.) </p> </section> @@ -195,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"><section data-background="image.png"></code></pre> + <pre><code class="hljs html"><section data-background="image.png"></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;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></code></pre> + <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></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;"><section data-background-video="video.mp4,video.webm"></code></pre> + <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-video="video.mp4,video.webm"></code></pre> </div> </section> <section data-background="http://i.giphy.com/90F8aUepslB84.gif"> @@ -217,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"> @@ -225,25 +229,32 @@ <p> You can override background transitions per-slide. </p> - <pre><code class="hljs" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre> + <pre><code class="hljs html" style="word-wrap: break-word;"><section data-background-transition="zoom"></code></pre> + </section> + + <section data-background-iframe="https://hakim.se" data-background-interactive> + <div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;"> + <h2>Iframe Backgrounds</h2> + <p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p> + </div> </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 < len; i++ ) { - var node = nodes[i]; - - if( !node.className ) { - node.className += ' roll'; - } - } - } + <pre><code class="hljs" data-trim data-line-numbers="4,8-9"> +import React, { useState } from 'react'; + +function Example() { + const [count, setCount] = useState(0); + + return ( + <div> + <p>You clicked {count} times</p> + <button onClick={() => setCount(count + 1)}> + Click me + </button> + </div> + ); } </code></pre> <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> @@ -384,7 +395,6 @@ Reveal.addEventListener( 'customevent', function() { </div> - <script src="lib/js/head.min.js"></script> <script src="js/reveal.js"></script> <script> @@ -393,17 +403,16 @@ Reveal.addEventListener( 'customevent', function() { Reveal.initialize({ controls: true, progress: true, - history: true, center: true, + hash: true, transition: 'slide', // none/fade/slide/convex/concave/zoom // More info https://github.com/hakimel/reveal.js#dependencies dependencies: [ - { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, - { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, + { src: 'plugin/highlight/highlight.js', async: true }, { src: 'plugin/search/search.js', async: true }, { src: 'plugin/zoom-js/zoom.js', async: true }, { src: 'plugin/notes/notes.js', async: true } |