files/reveal.js/demo.html in reveal-ck-3.9.2 vs files/reveal.js/demo.html in reveal-ck-4.0.0
- old
+ new
@@ -10,17 +10,18 @@
<meta name="author" content="Hakim El Hattab">
<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>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
@@ -91,12 +92,15 @@
<h2>Point of View</h2>
<p>
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>
<section>
<h2>Touch Optimized</h2>
<p>
@@ -193,20 +197,20 @@
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</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">
<h2>... and GIFs!</h2>
</section>
@@ -215,37 +219,44 @@
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2>
<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">
<h2>Background Transitions</h2>
<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 ) {
+ <pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
+import React, { useState } from 'react';
- var nodes = document.querySelectorAll( selector );
+function Example() {
+ const [count, setCount] = useState(0);
- for( var i = 0, len = nodes.length; i < len; i++ ) {
- var node = nodes[i];
-
- if( !node.className ) {
- node.className += ' roll';
- }
- }
- }
+ 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>
</section>
@@ -382,29 +393,27 @@
</div>
</div>
- <script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
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' },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});