Merge branch 'dev' into hash-problem

2019-03-21 09:03:27 +01:00 · 2019-03-21 09:03:27 +01:00 · b5fe0f8126
commit b5fe0f8126
parent b4c6c92033 01874c6e70
61 changed files with 2050 additions and 820 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -1,5 +1,5 @@
 language: node_js
 node_js:
-  - 4
+  - 11
 after_script:
  - npm run build -- retire
--- a/Gruntfile.ts
+++ b/Gruntfile.ts
@ -1,7 +1,11 @@
 /* global module:false */
 module.exports = function(grunt) {
-	var port = grunt.option('port') || 8000;
-	var root = grunt.option('root') || '.';
+	const sass = require('node-sass');
+
+	require('load-grunt-tasks')(grunt);
+
+	let port = grunt.option('port') || 8000;
+	let root = grunt.option('root') || '.';

 	if (!Array.isArray(root)) root = [root];

@ -15,7 +19,7 @@ module.exports = function(grunt) {
 				' * http://revealjs.com\n' +
 				' * MIT licensed\n' +
 				' *\n' +
-				' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' +
+				' * Copyright (C) 2019 Hakim El Hattab, http://hakim.se\n' +
 				' */'
 		},

@ -35,6 +39,10 @@ module.exports = function(grunt) {
 		},

 		sass: {
+			options: {
+				implementation: sass,
+				sourceMap: false
+			},
 			core: {
 				src: 'css/reveal.scss',
 				dest: 'css/reveal.css'
@ -145,27 +153,10 @@ module.exports = function(grunt) {
 			options: {
 				livereload: true
 			}
-		},
-
-		retire: {
-			js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
-			node: [ '.' ]
 		}

 	});

-	// Dependencies
-	grunt.loadNpmTasks( 'grunt-contrib-connect' );
-	grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
-	grunt.loadNpmTasks( 'grunt-contrib-jshint' );
-	grunt.loadNpmTasks( 'grunt-contrib-qunit' );
-	grunt.loadNpmTasks( 'grunt-contrib-uglify' );
-	grunt.loadNpmTasks( 'grunt-contrib-watch' );
-	grunt.loadNpmTasks( 'grunt-autoprefixer' );
-	grunt.loadNpmTasks( 'grunt-retire' );
-	grunt.loadNpmTasks( 'grunt-sass' );
-	grunt.loadNpmTasks( 'grunt-zip' );
-
 	// Default task
 	grunt.registerTask( 'default', [ 'css', 'js' ] );

--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2019 Hakim El Hattab, http://hakim.se, and reveal.js contributors

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -23,6 +23,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
 - [Ready Event](#ready-event)
 - [Auto-sliding](#auto-sliding)
 - [Keyboard Bindings](#keyboard-bindings)
+- [Vertical Slide Navigation](#vertical-slide-navigation)
 - [Touch Navigation](#touch-navigation)
 - [Lazy Loading](#lazy-loading)
 - [API](#api)
@ -41,6 +42,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
  - [Fullscreen mode](#fullscreen-mode)
  - [Embedded media](#embedded-media)
  - [Stretching elements](#stretching-elements)
+  - [Resize Event](#resize-event)
  - [postMessage API](#postmessage-api)
 - [PDF Export](#pdf-export)
 - [Theming](#theming)
@ -225,7 +227,7 @@ We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise
 ```javascript
 Reveal.initialize({
 	// Options which are passed into marked
-	// See https://github.com/chjj/marked#options-1
+	// See https://marked.js.org/#/USING_ADVANCED.md#options
 	markdown: {
 		smartypants: true
 	}
@ -259,7 +261,11 @@ Reveal.initialize({
 	// Display the page number of the current slide
 	slideNumber: false,

-	// Push each slide change to the browser history
+	// Add the current slide number to the URL hash so that reloading the
+	// page/copying the URL will return you to the same slide
+	hash: false,
+
+	// Push each slide change to the browser history. Implies `hash: true`
 	history: false,

 	// Enable keyboard shortcuts for navigation
@ -280,6 +286,9 @@ Reveal.initialize({
 	// Change the presentation direction to be RTL
 	rtl: false,

+	// See https://github.com/hakimel/reveal.js/#navigation-mode
+	navigationMode: 'default',
+
 	// Randomizes the order of slides each time the presentation loads
 	shuffle: false,

@ -326,6 +335,12 @@ Reveal.initialize({
 	// Enable slide navigation via mouse wheel
 	mouseWheel: false,

+	// Hide cursor if inactive
+	hideInactiveCursor: true,
+
+	// Time before the cursor is hidden (in ms)
+	hideCursorTime: 5000,
+
 	// Hides the address bar on mobile devices
 	hideAddressBar: true,

@ -423,9 +438,6 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
 ```javascript
 Reveal.initialize({
 	dependencies: [
-		// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
-		{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
-
 		// Interpret Markdown in <section> elements
 		{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 		{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
@ -451,8 +463,6 @@ You can add your own extensions using the same syntax. The following properties
 - **callback**: [optional] Function to execute when the script has loaded
 - **condition**: [optional] Function which must return true for the script to be loaded

-To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
-
 ### Ready Event

 A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
@ -506,6 +516,21 @@ Reveal.configure({
 });
 ```

+### Vertical Slide Navigation
+
+Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action:
+
+<img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450">
+
+#### Navigation Mode
+You can finetune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available:
+
+| Value                         | Description |
+| :---------------------------  | :---------- |
+| default                       | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). |
+| linear                        | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). |
+| grid                          | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.<br><br>Consider a deck with six slides ordered in two vertical stacks:<br>`1.1`&nbsp;&nbsp;&nbsp;&nbsp;`2.1`<br>`1.2`&nbsp;&nbsp;&nbsp;&nbsp;`2.2`<br>`1.3`&nbsp;&nbsp;&nbsp;&nbsp;`2.3`<br><br>If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. |
+
 ### Touch Navigation

 You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.
@ -516,7 +541,7 @@ If there's some part of your content that needs to remain accessible to touch ev

 When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.

-To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible.
+To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements.

 ```html
 <section>
@ -529,6 +554,12 @@ To enable lazy loading all you need to do is change your `src` attributes to `da
 </section>
 ```

+#### Lazy Loading Iframes
+Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.
+
+When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.
+
+
 ### API

 The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
@ -585,6 +616,9 @@ Reveal.isLastSlide();
 Reveal.isOverview();
 Reveal.isPaused();
 Reveal.isAutoSliding();
+
+// Returns the top-level DOM element
+getRevealElement(); // <div class="reveal">...</div>
 ```

 ### Custom Key Bindings
@ -863,7 +897,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {

 ### Code syntax highlighting

-By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)).
+By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)).

 ```javascript
 Reveal.initialize({
@ -903,6 +937,12 @@ Reveal.configure({ slideNumber: true });
 //  "c/t": 	flattened slide number / total slides
 Reveal.configure({ slideNumber: 'c/t' });

+// You can provide a function to fully customize the number:
+Reveal.configure({ slideNumber: function() {
+    // Ignore numbering of vertical slides
+    return [ Reveal.getIndices().h ];
+}});
+
 // Control which views the slide number displays on using the "showSlideNumber" value:
 //     "all": show on all views (default)
 // "speaker": only show slide numbers on speaker notes view
@ -958,6 +998,16 @@ Limitations:
 - Only direct descendants of a slide section can be stretched
 - Only one descendant per slide section can be stretched

+### Resize Event
+
+When reveal.js changes the scale of the slides it fires a resize event. You can subscribe to the event to resize your elements accordingly.
+
+```javascript
+Reveal.addEventListener( 'resize', function( event ) {
+	// event.scale, event.oldScale, event.size
+} );
+```
+
 ### postMessage API

 The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:
@ -994,7 +1044,7 @@ Reveal.initialize({

 ## PDF Export

-Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver.
+Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a web server.
 Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.

 ### Separate pages for fragments
@ -1170,7 +1220,7 @@ Reveal.initialize({

 	// Don't forget to add the dependencies
 	dependencies: [
-		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
 		{ src: 'plugin/multiplex/master.js', async: true },

 		// and if you want speaker notes
@ -1200,7 +1250,7 @@ Reveal.initialize({

 	// Don't forget to add the dependencies
 	dependencies: [
-		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
 		{ src: 'plugin/multiplex/client.js', async: true }

 		// other dependencies...
@ -1242,7 +1292,7 @@ Reveal.initialize({

 	// Don't forget to add the dependencies
 	dependencies: [
-		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
 		{ src: 'plugin/multiplex/client.js', async: true }

 		// other dependencies...
@ -1266,7 +1316,7 @@ Reveal.initialize({

 	// Don't forget to add the dependencies
 	dependencies: [
-		{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true },
+		{ src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
 		{ src: 'plugin/multiplex/master.js', async: true },
 		{ src: 'plugin/multiplex/client.js', async: true }

@ -1291,6 +1341,8 @@ Reveal.initialize({
 	math: {
 		mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
 		config: 'TeX-AMS_HTML-full'  // See http://docs.mathjax.org/en/latest/config-files.html
+		// pass other options into `MathJax.Hub.Config()`
+		TeX: { Macros: macros }
 	},

 	dependencies: [
@ -1302,7 +1354,7 @@ Reveal.initialize({
 Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.

 #### MathJax in Markdown
-If you want to include math inside of a presentation written in Markdown you need to wrap the forumla in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
+If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:

 ```
 `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
@ -1312,4 +1364,4 @@ If you want to include math inside of a presentation written in Markdown you nee

 MIT licensed

-Copyright (C) 2018 Hakim El Hattab, http://hakim.se
+Copyright (C) 2019 Hakim El Hattab, http://hakim.se
--- a/css/reset.css
+++ b/css/reset.css
@ -0,0 +1,30 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
--- a/css/reveal.css
+++ b/css/reveal.css
@ -3,47 +3,24 @@
 * http://revealjs.com
 * MIT licensed
 *
- * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2019 Hakim El Hattab, http://hakim.se
 */
-/*********************************************
- * RESET STYLES
- *********************************************/
-html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
-.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
-.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
-.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
-.reveal b, .reveal u, .reveal center,
-.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
-.reveal fieldset, .reveal form, .reveal label, .reveal legend,
-.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
-.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
-.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
-.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
-.reveal time, .reveal mark, .reveal audio, .reveal video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline; }
-
-.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
-.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
-  display: block; }
-
 /*********************************************
 * GLOBAL STYLES
 *********************************************/
-html,
-body {
+html {
  width: 100%;
  height: 100%;
+  height: 100vh;
+  height: calc( var(--vh, 1vh) * 100);
  overflow: hidden; }

 body {
+  height: 100%;
+  overflow: hidden;
  position: relative;
  line-height: 1;
+  margin: 0;
  background-color: #fff;
  color: #000; }

@ -272,7 +249,7 @@ body {
    visibility: hidden;
    opacity: 0;
    -webkit-appearance: none;
-    -webkit-tap-highlight-color: transparent; }
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  .reveal .controls .controls-arrow:before,
  .reveal .controls .controls-arrow:after {
    content: '';
@ -366,10 +343,16 @@ body {
  .reveal .controls .enabled.fragmented:hover {
    opacity: 1; }

+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+  display: none; }
+
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
  bottom: 1.4em;
  right: 5.5em; }

+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
  bottom: 1.4em;
  right: 0.5em; }
@ -486,12 +469,8 @@ body {
  width: 100%;
  height: 100%;
  overflow: hidden;
-  -ms-touch-action: none;
-      touch-action: none; }
-
-@media only screen and (orientation: landscape) {
-  .reveal.ua-iphone {
-    position: fixed; } }
+  -ms-touch-action: pinch-zoom;
+      touch-action: pinch-zoom; }

 .reveal .slides {
  position: absolute;
@ -512,7 +491,8 @@ body {
          perspective-origin: 50% 40%; }

 .reveal .slides > section {
-  -ms-perspective: 600px; }
+  -webkit-perspective: 600px;
+          perspective: 600px; }

 .reveal .slides > section,
 .reveal .slides > section > section {
@ -544,7 +524,8 @@ body {
 .reveal .slides > section.stack {
  padding-top: 0;
  padding-bottom: 0;
-  pointer-events: none; }
+  pointer-events: none;
+  height: 100%; }

 .reveal .slides > section.present,
 .reveal .slides > section > section.present {
@ -761,14 +742,14 @@ body {
 .reveal .slides > section > section[data-transition=zoom].past,
 .reveal .slides > section > section[data-transition~=zoom-out].past,
 .reveal.zoom .slides > section > section:not([data-transition]).past {
-  -webkit-transform: translate(0, -150%);
-          transform: translate(0, -150%); }
+  -webkit-transform: scale(16);
+          transform: scale(16); }

 .reveal .slides > section > section[data-transition=zoom].future,
 .reveal .slides > section > section[data-transition~=zoom-in].future,
 .reveal.zoom .slides > section > section:not([data-transition]).future {
-  -webkit-transform: translate(0, 150%);
-          transform: translate(0, 150%); }
+  -webkit-transform: scale(0.2);
+          transform: scale(0.2); }

 /*********************************************
 * CUBE TRANSITION
@ -989,34 +970,35 @@ body {
 .no-transforms {
  overflow-y: auto; }

+.no-transforms .reveal {
+  overflow: visible; }
+
 .no-transforms .reveal .slides {
  position: relative;
  width: 80%;
-  height: auto !important;
+  max-width: 1280px;
+  height: auto;
  top: 0;
-  left: 50%;
-  margin: 0;
+  margin: 0 auto;
  text-align: center; }

 .no-transforms .reveal .controls,
 .no-transforms .reveal .progress {
-  display: none !important; }
+  display: none; }

 .no-transforms .reveal .slides section {
-  display: block !important;
-  opacity: 1 !important;
-  position: relative !important;
+  display: block;
+  opacity: 1;
+  position: relative;
  height: auto;
  min-height: 0;
  top: 0;
-  left: -50%;
+  left: 0;
+  margin: 10vh 0;
  margin: 70px 0;
  -webkit-transform: none;
          transform: none; }

-.no-transforms .reveal .slides section section {
-  left: 0; }
-
 .reveal .no-transition,
 .reveal .no-transition * {
  transition: none !important; }
@ -1041,7 +1023,7 @@ body {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
  transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }

 .reveal .slide-background-content {
@ -1294,9 +1276,9 @@ body {
  transition-duration: 1200ms; }

 /*********************************************
- * LINK PREVIEW OVERLAY
+ * OVERLAY FOR LINK PREVIEWS AND HELP
 *********************************************/
-.reveal .overlay {
+.reveal > .overlay {
  position: absolute;
  top: 0;
  left: 0;
@ -1308,11 +1290,11 @@ body {
  visibility: hidden;
  transition: all 0.3s ease; }

-.reveal .overlay.visible {
+.reveal > .overlay.visible {
  opacity: 1;
  visibility: visible; }

-.reveal .overlay .spinner {
+.reveal > .overlay .spinner {
  position: absolute;
  display: block;
  top: 50%;
@ -1326,7 +1308,7 @@ body {
  opacity: 0.6;
  transition: all 0.3s ease; }

-.reveal .overlay header {
+.reveal > .overlay header {
  position: absolute;
  left: 0;
  top: 0;
@ -1335,7 +1317,7 @@ body {
  z-index: 2;
  border-bottom: 1px solid #222; }

-.reveal .overlay header a {
+.reveal > .overlay header a {
  display: inline-block;
  width: 40px;
  height: 40px;
@ -1345,10 +1327,10 @@ body {
  opacity: 0.6;
  box-sizing: border-box; }

-.reveal .overlay header a:hover {
+.reveal > .overlay header a:hover {
  opacity: 1; }

-.reveal .overlay header a .icon {
+.reveal > .overlay header a .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
@ -1356,13 +1338,13 @@ body {
  background-size: 100%;
  background-repeat: no-repeat; }

-.reveal .overlay header a.close .icon {
+.reveal > .overlay header a.close .icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }

-.reveal .overlay header a.external .icon {
+.reveal > .overlay header a.external .icon {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }

-.reveal .overlay .viewport {
+.reveal > .overlay .viewport {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
@ -1372,7 +1354,7 @@ body {
  bottom: 0;
  left: 0; }

-.reveal .overlay.overlay-preview .viewport iframe {
+.reveal > .overlay.overlay-preview .viewport iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
@ -1382,11 +1364,11 @@ body {
  visibility: hidden;
  transition: all 0.3s ease; }

-.reveal .overlay.overlay-preview.loaded .viewport iframe {
+.reveal > .overlay.overlay-preview.loaded .viewport iframe {
  opacity: 1;
  visibility: visible; }

-.reveal .overlay.overlay-preview.loaded .viewport-inner {
+.reveal > .overlay.overlay-preview.loaded .viewport-inner {
  position: absolute;
  z-index: -1;
  left: 0;
@ -1395,46 +1377,46 @@ body {
  text-align: center;
  letter-spacing: normal; }

-.reveal .overlay.overlay-preview .x-frame-error {
+.reveal > .overlay.overlay-preview .x-frame-error {
  opacity: 0;
  transition: opacity 0.3s ease 0.3s; }

-.reveal .overlay.overlay-preview.loaded .x-frame-error {
+.reveal > .overlay.overlay-preview.loaded .x-frame-error {
  opacity: 1; }

-.reveal .overlay.overlay-preview.loaded .spinner {
+.reveal > .overlay.overlay-preview.loaded .spinner {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.2);
          transform: scale(0.2); }

-.reveal .overlay.overlay-help .viewport {
+.reveal > .overlay.overlay-help .viewport {
  overflow: auto;
  color: #fff; }

-.reveal .overlay.overlay-help .viewport .viewport-inner {
+.reveal > .overlay.overlay-help .viewport .viewport-inner {
  width: 600px;
  margin: auto;
  padding: 20px 20px 80px 20px;
  text-align: center;
  letter-spacing: normal; }

-.reveal .overlay.overlay-help .viewport .viewport-inner .title {
+.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
  font-size: 20px; }

-.reveal .overlay.overlay-help .viewport .viewport-inner table {
+.reveal > .overlay.overlay-help .viewport .viewport-inner table {
  border: 1px solid #fff;
  border-collapse: collapse;
  font-size: 16px; }

-.reveal .overlay.overlay-help .viewport .viewport-inner table th,
-.reveal .overlay.overlay-help .viewport .viewport-inner table td {
+.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
+.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
  width: 200px;
  padding: 14px;
  border: 1px solid #fff;
  vertical-align: middle; }

-.reveal .overlay.overlay-help .viewport .viewport-inner table th {
+.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
  padding-top: 20px;
  padding-bottom: 20px; }

@ -1448,12 +1430,32 @@ body {
  z-index: 30;
  cursor: pointer;
  transition: all 400ms ease;
-  -webkit-tap-highlight-color: transparent; }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

 .reveal.overview .playback {
  opacity: 0;
  visibility: hidden; }

+/*********************************************
+ * CODE HIGHLGIHTING
+ *********************************************/
+.reveal .hljs table {
+  margin: initial; }
+
+.reveal .hljs-ln-code,
+.reveal .hljs-ln-numbers {
+  padding: 0;
+  border: 0; }
+
+.reveal .hljs-ln-numbers {
+  opacity: 0.6;
+  padding-right: 0.75em;
+  text-align: right;
+  vertical-align: top; }
+
+.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
+  opacity: 0.25; }
+
 /*********************************************
 * ROLLING LINKS
 *********************************************/
@ -1512,7 +1514,7 @@ body {
 .reveal .speaker-notes {
  display: none;
  position: absolute;
-  width: 25vw;
+  width: 33.3333333333%;
  height: 100%;
  top: 0;
  left: 100%;
@ -1540,7 +1542,7 @@ body {
    opacity: 0.5; }

 .reveal.show-notes {
-  max-width: 75vw;
+  max-width: 75%;
  overflow: visible; }

 .reveal.show-notes .speaker-notes {
@ -1555,19 +1557,24 @@ body {
    border-left: 0;
    max-width: none;
    max-height: 70%;
+    max-height: 70vh;
    overflow: visible; }
  .reveal.show-notes .speaker-notes {
    top: 100%;
    left: 0;
    width: 100%;
-    height: 42.8571428571%; } }
+    height: 42.8571428571%;
+    height: 30vh;
+    border: 0; } }

@media screen and (max-width: 600px) {
  .reveal.show-notes {
-    max-height: 60%; }
+    max-height: 60%;
+    max-height: 60vh; }
  .reveal.show-notes .speaker-notes {
    top: 100%;
-    height: 66.6666666667%; }
+    height: 66.6666666667%;
+    height: 40vh; }
  .reveal .speaker-notes {
    font-size: 14px; } }

--- a/css/reveal.scss
+++ b/css/reveal.scss
@ -3,55 +3,28 @@
 * http://revealjs.com
 * MIT licensed
 *
- * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
+ * Copyright (C) 2019 Hakim El Hattab, http://hakim.se
 */


-/*********************************************
- * RESET STYLES
- *********************************************/
-
-html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
-.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
-.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
-.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
-.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
-.reveal b, .reveal u, .reveal center,
-.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
-.reveal fieldset, .reveal form, .reveal label, .reveal legend,
-.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
-.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
-.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
-.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
-.reveal time, .reveal mark, .reveal audio, .reveal video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-
-.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
-.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
-	display: block;
-}
-
-
 /*********************************************
 * GLOBAL STYLES
 *********************************************/

-html,
-body {
+html {
 	width: 100%;
 	height: 100%;
+	height: 100vh;
+	height: calc( var(--vh, 1vh) * 100 );
 	overflow: hidden;
 }

 body {
+	height: 100%;
+	overflow: hidden;
 	position: relative;
 	line-height: 1;
+	margin: 0;

 	background-color: #fff;
 	color: #000;
@ -434,12 +407,19 @@ $controlsArrowAngleActive: 36deg;
 	}
 }

+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
+	display: none;
+}
+
 // Adjust the layout when there are no vertical slides
+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
 .reveal:not(.has-vertical-slides) .controls .navigate-left {
 	bottom: $controlArrowSpacing;
 	right: 0.5em + $controlArrowSpacing + $controlArrowSize;
 }

+.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
 .reveal:not(.has-vertical-slides) .controls .navigate-right {
 	bottom: $controlArrowSpacing;
 	right: 0.5em;
@ -586,17 +566,7 @@ $controlsArrowAngleActive: 36deg;
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	touch-action: none;
-}
-
-// Mobile Safari sometimes overlays a header at the top
-// of the page when in landscape mode. Using fixed
-// positioning ensures that reveal.js reduces its height
-// when this header is visible.
-@media only screen and (orientation : landscape) {
-	.reveal.ua-iphone {
-		position: fixed;
-	}
+	touch-action: pinch-zoom;
 }

 .reveal .slides {
@ -618,7 +588,7 @@ $controlsArrowAngleActive: 36deg;
 }

 .reveal .slides>section {
-	-ms-perspective: 600px;
+	perspective: 600px;
 }

 .reveal .slides>section,
@ -657,6 +627,7 @@ $controlsArrowAngleActive: 36deg;
 	padding-top: 0;
 	padding-bottom: 0;
 	pointer-events: none;
+	height: 100%;
 }

 .reveal .slides>section.present,
@ -831,10 +802,10 @@ $controlsArrowAngleActive: 36deg;
 	transform: scale(0.2);
 }
@include transition-vertical-past(zoom) {
-	transform: translate(0, -150%);
+	transform: scale(16);
 }
@include transition-vertical-future(zoom) {
-	transform: translate(0, 150%);
+	transform: scale(0.2);
 }


@ -1067,37 +1038,38 @@ $controlsArrowAngleActive: 36deg;
 	overflow-y: auto;
 }

+.no-transforms .reveal {
+	overflow: visible;
+}
+
 .no-transforms .reveal .slides {
 	position: relative;
 	width: 80%;
-	height: auto !important;
+	max-width: 1280px;
+	height: auto;
 	top: 0;
-	left: 50%;
-	margin: 0;
+	margin: 0 auto;
 	text-align: center;
 }

 .no-transforms .reveal .controls,
 .no-transforms .reveal .progress {
-	display: none !important;
+	display: none;
 }

 .no-transforms .reveal .slides section {
-	display: block !important;
-	opacity: 1 !important;
-	position: relative !important;
+	display: block;
+	opacity: 1;
+	position: relative;
 	height: auto;
 	min-height: 0;
 	top: 0;
-	left: -50%;
+	left: 0;
+	margin: 10vh 0;
 	margin: 70px 0;
 	transform: none;
 }

-.no-transforms .reveal .slides section section {
-	left: 0;
-}
-
 .reveal .no-transition,
 .reveal .no-transition * {
 	transition: none !important;
@ -1416,10 +1388,10 @@ $controlsArrowAngleActive: 36deg;


 /*********************************************
- * LINK PREVIEW OVERLAY
+ * OVERLAY FOR LINK PREVIEWS AND HELP
 *********************************************/

-.reveal .overlay {
+.reveal > .overlay {
 	position: absolute;
 	top: 0;
 	left: 0;
@ -1431,12 +1403,12 @@ $controlsArrowAngleActive: 36deg;
 	visibility: hidden;
 	transition: all 0.3s ease;
 }
-	.reveal .overlay.visible {
+	.reveal > .overlay.visible {
 		opacity: 1;
 		visibility: visible;
 	}

-	.reveal .overlay .spinner {
+	.reveal > .overlay .spinner {
 		position: absolute;
 		display: block;
 		top: 50%;
@ -1452,7 +1424,7 @@ $controlsArrowAngleActive: 36deg;
 		transition: all 0.3s ease;
 	}

-	.reveal .overlay header {
+	.reveal > .overlay header {
 		position: absolute;
 		left: 0;
 		top: 0;
@ -1461,7 +1433,7 @@ $controlsArrowAngleActive: 36deg;
 		z-index: 2;
 		border-bottom: 1px solid #222;
 	}
-		.reveal .overlay header a {
+		.reveal > .overlay header a {
 			display: inline-block;
 			width: 40px;
 			height: 40px;
@ -1472,10 +1444,10 @@ $controlsArrowAngleActive: 36deg;

 			box-sizing: border-box;
 		}
-			.reveal .overlay header a:hover {
+			.reveal > .overlay header a:hover {
 				opacity: 1;
 			}
-			.reveal .overlay header a .icon {
+			.reveal > .overlay header a .icon {
 				display: inline-block;
 				width: 20px;
 				height: 20px;
@ -1484,14 +1456,14 @@ $controlsArrowAngleActive: 36deg;
 				background-size: 100%;
 				background-repeat: no-repeat;
 			}
-			.reveal .overlay header a.close .icon {
+			.reveal > .overlay header a.close .icon {
 				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
 			}
-			.reveal .overlay header a.external .icon {
+			.reveal > .overlay header a.external .icon {
 				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
 			}

-	.reveal .overlay .viewport {
+	.reveal > .overlay .viewport {
 		position: absolute;
 		display: flex;
 		top: 40px;
@ -1500,7 +1472,7 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 	}

-	.reveal .overlay.overlay-preview .viewport iframe {
+	.reveal > .overlay.overlay-preview .viewport iframe {
 		width: 100%;
 		height: 100%;
 		max-width: 100%;
@ -1512,12 +1484,12 @@ $controlsArrowAngleActive: 36deg;
 		transition: all 0.3s ease;
 	}

-	.reveal .overlay.overlay-preview.loaded .viewport iframe {
+	.reveal > .overlay.overlay-preview.loaded .viewport iframe {
 		opacity: 1;
 		visibility: visible;
 	}

-	.reveal .overlay.overlay-preview.loaded .viewport-inner  {
+	.reveal > .overlay.overlay-preview.loaded .viewport-inner  {
 		position: absolute;
 		z-index: -1;
 		left: 0;
@ -1526,26 +1498,26 @@ $controlsArrowAngleActive: 36deg;
 		text-align: center;
 		letter-spacing: normal;
 	}
-	.reveal .overlay.overlay-preview .x-frame-error  {
+	.reveal > .overlay.overlay-preview .x-frame-error  {
 		opacity: 0;
 		transition: opacity 0.3s ease 0.3s;
 	}
-	.reveal .overlay.overlay-preview.loaded .x-frame-error  {
+	.reveal > .overlay.overlay-preview.loaded .x-frame-error  {
 		opacity: 1;
 	}

-	.reveal .overlay.overlay-preview.loaded .spinner {
+	.reveal > .overlay.overlay-preview.loaded .spinner {
 		opacity: 0;
 		visibility: hidden;
 		transform: scale(0.2);
 	}

-	.reveal .overlay.overlay-help .viewport {
+	.reveal > .overlay.overlay-help .viewport {
 		overflow: auto;
 		color: #fff;
 	}

-	.reveal .overlay.overlay-help .viewport .viewport-inner {
+	.reveal > .overlay.overlay-help .viewport .viewport-inner {
 		width: 600px;
 		margin: auto;
 		padding: 20px 20px 80px 20px;
@ -1553,31 +1525,30 @@ $controlsArrowAngleActive: 36deg;
 		letter-spacing: normal;
 	}

-	.reveal .overlay.overlay-help .viewport .viewport-inner .title {
+	.reveal > .overlay.overlay-help .viewport .viewport-inner .title {
 		font-size: 20px;
 	}

-	.reveal .overlay.overlay-help .viewport .viewport-inner table {
+	.reveal > .overlay.overlay-help .viewport .viewport-inner table {
 		border: 1px solid #fff;
 		border-collapse: collapse;
 		font-size: 16px;
 	}

-	.reveal .overlay.overlay-help .viewport .viewport-inner table th,
-	.reveal .overlay.overlay-help .viewport .viewport-inner table td {
+	.reveal > .overlay.overlay-help .viewport .viewport-inner table th,
+	.reveal > .overlay.overlay-help .viewport .viewport-inner table td {
 		width: 200px;
 		padding: 14px;
 		border: 1px solid #fff;
 		vertical-align: middle;
 	}

-	.reveal .overlay.overlay-help .viewport .viewport-inner table th {
+	.reveal > .overlay.overlay-help .viewport .viewport-inner table th {
 		padding-top: 20px;
 		padding-bottom: 20px;
 	}


-
 /*********************************************
 * PLAYBACK COMPONENT
 *********************************************/
@ -1598,6 +1569,32 @@ $controlsArrowAngleActive: 36deg;
 }


+/*********************************************
+ * CODE HIGHLGIHTING
+ *********************************************/
+
+.reveal .hljs table {
+	margin: initial;
+}
+
+.reveal .hljs-ln-code,
+.reveal .hljs-ln-numbers {
+	padding: 0;
+	border: 0;
+}
+
+.reveal .hljs-ln-numbers {
+	opacity: 0.6;
+	padding-right: 0.75em;
+	text-align: right;
+	vertical-align: top;
+}
+
+.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
+	opacity: 0.4;
+}
+
+
 /*********************************************
 * ROLLING LINKS
 *********************************************/
@ -1648,6 +1645,8 @@ $controlsArrowAngleActive: 36deg;
 * SPEAKER NOTES
 *********************************************/

+$notesWidthPercent: 25%;
+
 // Hide on-page notes
 .reveal aside.notes {
 	display: none;
@ -1658,7 +1657,7 @@ $controlsArrowAngleActive: 36deg;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: 25vw;
+	width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@ -1694,7 +1693,7 @@ $controlsArrowAngleActive: 36deg;


 .reveal.show-notes {
-	max-width: 75vw;
+	max-width: 100% - $notesWidthPercent;
 	overflow: visible;
 }

@ -1713,6 +1712,7 @@ $controlsArrowAngleActive: 36deg;
 		border-left: 0;
 		max-width: none;
 		max-height: 70%;
+		max-height: 70vh;
 		overflow: visible;
 	}

@ -1721,17 +1721,21 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 		width: 100%;
 		height: (30/0.7)*1%;
+		height: 30vh;
+		border: 0;
 	}
 }

@media screen and (max-width: 600px) {
 	.reveal.show-notes {
 		max-height: 60%;
+		max-height: 60vh;
 	}

 	.reveal.show-notes .speaker-notes {
 		top: 100%;
 		height: (40/0.6)*1%;
+		height: 40vh;
 	}

 	.reveal .speaker-notes {
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@ -153,7 +153,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/black.css
+++ b/css/theme/black.css
@ -11,8 +11,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
 * GLOBAL STYLES
 *********************************************/
 body {
-  background: #222;
-  background-color: #222; }
+  background: #191919;
+  background-color: #191919; }

 .reveal {
  font-family: "Source Sans Pro", Helvetica, sans-serif;
@ -149,7 +149,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
@ -270,4 +270,4 @@ body {
 *********************************************/
@media print {
  .backgrounds {
-    background-color: #222; } }
+    background-color: #191919; } }
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@ -152,7 +152,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/league.css
+++ b/css/theme/league.css
@ -155,7 +155,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@ -153,7 +153,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/night.css
+++ b/css/theme/night.css
@ -147,7 +147,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@ -149,7 +149,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@ -152,7 +152,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@ -156,7 +156,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@ -153,7 +153,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@ -16,7 +16,7 @@


 // Override theme settings (see ../template/settings.scss)
-$backgroundColor: #222;
+$backgroundColor: #191919;

 $mainColor: #fff;
 $headingColor: #fff;
--- a/css/theme/template/settings.scss
+++ b/css/theme/template/settings.scss
@ -28,6 +28,8 @@ $heading2Size: 2.11em;
 $heading3Size: 1.55em;
 $heading4Size: 1.00em;

+$codeFont: monospace;
+
 // Links and actions
 $linkColor: #13DAEC;
 $linkColorHover: lighten( $linkColor, 20% );
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@ -162,16 +162,16 @@ body {

 	text-align: left;
 	font-size: 0.55em;
-	font-family: monospace;
+	font-family: $codeFont;
 	line-height: 1.2em;

 	word-wrap: break-word;

-	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
+	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
 }

 .reveal code {
-	font-family: monospace;
+	font-family: $codeFont;
 	text-transform: none;
 }

--- a/css/theme/white.css
+++ b/css/theme/white.css
@ -149,7 +149,7 @@ body {
  font-family: monospace;
  line-height: 1.2em;
  word-wrap: break-word;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }

 .reveal code {
  font-family: monospace;
--- a/demo.html
+++ b/demo.html
@ -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">&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">
@ -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;">&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 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,8-9">
+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 &lt; len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) {
-        node.className += ' roll';
-      }
-    }
-  }
+  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>
@ -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 }
--- a/index.html
+++ b/index.html
@ -6,11 +6,12 @@

 		<title>reveal.js</title>

+		<link rel="stylesheet" href="css/reset.css">
 		<link rel="stylesheet" href="css/reveal.css">
 		<link rel="stylesheet" href="css/theme/black.css">

 		<!-- 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>
@ -29,7 +30,6 @@
 			</div>
 		</div>

-		<script src="lib/js/head.min.js"></script>
 		<script src="js/reveal.js"></script>

 		<script>
@ -41,7 +41,7 @@
 					{ src: 'plugin/markdown/marked.js' },
 					{ src: 'plugin/markdown/markdown.js' },
 					{ src: 'plugin/notes/notes.js', async: true },
-					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
+					{ src: 'plugin/highlight/highlight.js', async: true }
 				]
 			});
 		</script>
--- a/js/reveal.js
+++ b/js/reveal.js
--- a/lib/css/monokai.css
+++ b/lib/css/monokai.css
@ -0,0 +1,71 @@
+/*
+Monokai style - ported by Luigi Maselli - http://grigio.org
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #272822;
+  color: #ddd;
+}
+
+.hljs-tag,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-strong,
+.hljs-name {
+  color: #f92672;
+}
+
+.hljs-code {
+  color: #66d9ef;
+}
+
+.hljs-class .hljs-title {
+  color: white;
+}
+
+.hljs-attribute,
+.hljs-symbol,
+.hljs-regexp,
+.hljs-link {
+  color: #bf79db;
+}
+
+.hljs-string,
+.hljs-bullet,
+.hljs-subst,
+.hljs-title,
+.hljs-section,
+.hljs-emphasis,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-addition,
+.hljs-variable,
+.hljs-template-tag,
+.hljs-template-variable {
+  color: #a6e22e;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-deletion,
+.hljs-meta {
+  color: #75715e;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-doctag,
+.hljs-title,
+.hljs-section,
+.hljs-type,
+.hljs-selector-id {
+  font-weight: bold;
+}
--- a/lib/js/classList.js
+++ b/lib/js/classList.js
@ -1,2 +0,0 @@
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
-if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.className),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.className=this.toString()}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(o){o+="";if(g(this,o)===-1){this.push(o);this._updateClassName()}};e.remove=function(p){p+="";var o=g(this,p);if(o!==-1){this.splice(o,1);this._updateClassName()}};e.toggle=function(o){o+="";if(g(this,o)===-1){this.add(o)}else{this.remove(o)}};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};
--- a/lib/js/head.min.js
+++ b/lib/js/head.min.js
@ -1,6 +0,0 @@
-/*! head.core - v1.0.2 */
-(function(n,t){"use strict";function r(n){a[a.length]=n}function k(n){var t=new RegExp(" ?\\b"+n+"\\b");c.className=c.className.replace(t,"")}function p(n,t){for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}function tt(){var t,e,f,o;c.className=c.className.replace(/ (w-|eq-|gt-|gte-|lt-|lte-|portrait|no-portrait|landscape|no-landscape)\d+/g,"");t=n.innerWidth||c.clientWidth;e=n.outerWidth||n.screen.width;u.screen.innerWidth=t;u.screen.outerWidth=e;r("w-"+t);p(i.screens,function(n){t>n?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):t<n?(i.screensCss.lt&&r("lt-"+n),i.screensCss.lte&&r("lte-"+n)):t===n&&(i.screensCss.lte&&r("lte-"+n),i.screensCss.eq&&r("e-q"+n),i.screensCss.gte&&r("gte-"+n))});f=n.innerHeight||c.clientHeight;o=n.outerHeight||n.screen.height;u.screen.innerHeight=f;u.screen.outerHeight=o;u.feature("portrait",f>t);u.feature("landscape",f<t)}function it(){n.clearTimeout(b);b=n.setTimeout(tt,50)}var y=n.document,rt=n.navigator,ut=n.location,c=y.documentElement,a=[],i={screens:[240,320,480,640,768,800,1024,1280,1440,1680,1920],screensCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!1},browsers:[{ie:{min:6,max:11}}],browserCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!0},html5:!0,page:"-page",section:"-section",head:"head"},v,u,s,w,o,h,l,d,f,g,nt,e,b;if(n.head_conf)for(v in n.head_conf)n.head_conf[v]!==t&&(i[v]=n.head_conf[v]);u=n[i.head]=function(){u.ready.apply(null,arguments)};u.feature=function(n,t,i){return n?(Object.prototype.toString.call(t)==="[object Function]"&&(t=t.call()),r((t?"":"no-")+n),u[n]=!!t,i||(k("no-"+n),k(n),u.feature()),u):(c.className+=" "+a.join(" "),a=[],u)};u.feature("js",!0);s=rt.userAgent.toLowerCase();w=/mobile|android|kindle|silk|midp|phone|(windows .+arm|touch)/.test(s);u.feature("mobile",w,!0);u.feature("desktop",!w,!0);s=/(chrome|firefox)[ \/]([\w.]+)/.exec(s)||/(iphone|ipad|ipod)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(android)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(webkit|opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(msie) ([\w.]+)/.exec(s)||/(trident).+rv:(\w.)+/.exec(s)||[];o=s[1];h=parseFloat(s[2]);switch(o){case"msie":case"trident":o="ie";h=y.documentMode||h;break;case"firefox":o="ff";break;case"ipod":case"ipad":case"iphone":o="ios";break;case"webkit":o="safari"}for(u.browser={name:o,version:h},u.browser[o]=!0,l=0,d=i.browsers.length;l<d;l++)for(f in i.browsers[l])if(o===f)for(r(f),g=i.browsers[l][f].min,nt=i.browsers[l][f].max,e=g;e<=nt;e++)h>e?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h<e?(i.browserCss.lt&&r("lt-"+f+e),i.browserCss.lte&&r("lte-"+f+e)):h===e&&(i.browserCss.lte&&r("lte-"+f+e),i.browserCss.eq&&r("eq-"+f+e),i.browserCss.gte&&r("gte-"+f+e));else r("no-"+f);r(o);r(o+parseInt(h,10));i.html5&&o==="ie"&&h<9&&p("abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|progress|section|summary|time|video".split("|"),function(n){y.createElement(n)});p(ut.pathname.split("/"),function(n,u){if(this.length>2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
-/*! head.css3 - v1.0.0 */
-(function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window);
-/*! head.load - v1.0.3 */
-(function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}}function it(n,i){var r=Object.prototype.toString.call(i).slice(8,-1);return i!==t&&i!==null&&r===n}function s(n){return it("Function",n)}function a(n){return it("Array",n)}function et(n){var i=n.split("/"),t=i[i.length-1],r=t.indexOf("?");return r!==-1?t.substring(0,r):t}function f(n){(n=n||w,n._done)||(n(),n._done=1)}function ot(n,t,r,u){var f=typeof n=="object"?n:{test:n,success:!t?!1:a(t)?t:[t],failure:!r?!1:a(r)?r:[r],callback:u||w},e=!!f.test;return e&&!!f.success?(f.success.push(f.callback),i.load.apply(null,f.success)):e||!f.failure?u():(f.failure.push(f.callback),i.load.apply(null,f.failure)),i}function v(n){var t={},i,r;if(typeof n=="object")for(i in n)!n[i]||(t={name:i,url:n[i]});else t={name:et(n),url:n};return(r=c[t.name],r&&r.url===t.url)?r:(c[t.name]=t,t)}function y(n){n=n||c;for(var t in n)if(n.hasOwnProperty(t)&&n[t].state!==l)return!1;return!0}function st(n){n.state=ft;u(n.onpreload,function(n){n.call()})}function ht(n){n.state===t&&(n.state=nt,n.onpreload=[],rt({url:n.url,type:"cache"},function(){st(n)}))}function ct(){var n=arguments,t=n[n.length-1],r=[].slice.call(n,1),f=r[0];return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(f?(u(r,function(n){s(n)||!n||ht(v(n))}),b(v(n[0]),s(f)?f:function(){i.load.apply(null,r)})):b(v(n[0])),i)}function lt(){var n=arguments,t=n[n.length-1],r={};return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(u(n,function(n){n!==t&&(n=v(n),r[n.name]=n)}),u(n,function(n){n!==t&&(n=v(n),b(n,function(){y(r)&&f(t)}))}),i)}function b(n,t){if(t=t||w,n.state===l){t();return}if(n.state===tt){i.ready(n.name,t);return}if(n.state===nt){n.onpreload.push(function(){b(n,t)});return}n.state=tt;rt(n,function(){n.state=l;t();u(h[n.name],function(n){f(n)});o&&y()&&u(h.ALL,function(n){f(n)})})}function at(n){n=n||"";var t=n.split("?")[0].split(".");return t[t.length-1].toLowerCase()}function rt(t,i){function e(t){t=t||n.event;u.onload=u.onreadystatechange=u.onerror=null;i()}function o(f){f=f||n.event;(f.type==="load"||/loaded|complete/.test(u.readyState)&&(!r.documentMode||r.documentMode<9))&&(n.clearTimeout(t.errorTimeout),n.clearTimeout(t.cssTimeout),u.onload=u.onreadystatechange=u.onerror=null,i())}function s(){if(t.state!==l&&t.cssRetries<=20){for(var i=0,f=r.styleSheets.length;i<f;i++)if(r.styleSheets[i].href===u.href){o({type:"load"});return}t.cssRetries++;t.cssTimeout=n.setTimeout(s,250)}}var u,h,f;i=i||w;h=at(t.url);h==="css"?(u=r.createElement("link"),u.type="text/"+(t.type||"css"),u.rel="stylesheet",u.href=t.url,t.cssRetries=0,t.cssTimeout=n.setTimeout(s,500)):(u=r.createElement("script"),u.type="text/"+(t.type||"javascript"),u.src=t.url);u.onload=u.onreadystatechange=o;u.onerror=e;u.async=!1;u.defer=!1;t.errorTimeout=n.setTimeout(function(){e({type:"timeout"})},7e3);f=r.head||r.getElementsByTagName("head")[0];f.insertBefore(u,f.lastChild)}function vt(){for(var t,u=r.getElementsByTagName("script"),n=0,f=u.length;n<f;n++)if(t=u[n].getAttribute("data-headjs-load"),!!t){i.load(t);return}}function yt(n,t){var v,p,e;return n===r?(o?f(t):d.push(t),i):(s(n)&&(t=n,n="ALL"),a(n))?(v={},u(n,function(n){v[n]=c[n];i.ready(n,function(){y(v)&&f(t)})}),i):typeof n!="string"||!s(t)?i:(p=c[n],p&&p.state===l||n==="ALL"&&y()&&o)?(f(t),i):(e=h[n],e?e.push(t):e=h[n]=[t],i)}function e(){if(!r.body){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(e,50);return}o||(o=!0,vt(),u(d,function(n){f(n)}))}function k(){r.addEventListener?(r.removeEventListener("DOMContentLoaded",k,!1),e()):r.readyState==="complete"&&(r.detachEvent("onreadystatechange",k),e())}var r=n.document,d=[],h={},c={},ut="async"in r.createElement("script")||"MozAppearance"in r.documentElement.style||n.opera,o,g=n.head_conf&&n.head_conf.head||"head",i=n[g]=n[g]||function(){i.ready.apply(null,arguments)},nt=1,ft=2,tt=3,l=4,p;if(r.readyState==="complete")e();else if(r.addEventListener)r.addEventListener("DOMContentLoaded",k,!1),n.addEventListener("load",e,!1);else{r.attachEvent("onreadystatechange",k);n.attachEvent("onload",e);p=!1;try{p=!n.frameElement&&r.documentElement}catch(wt){}p&&p.doScroll&&function pt(){if(!o){try{p.doScroll("left")}catch(t){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(pt,50);return}e()}}()}i.load=i.js=ut?lt:ct;i.test=ot;i.ready=yt;i.ready(r,function(){y()&&u(h.ALL,function(n){f(n)});i.feature&&i.feature("domloaded",!0)})})(window);
--- a/lib/js/promise.js
+++ b/lib/js/promise.js
@ -0,0 +1,2 @@
+/* MIT | https://github.com/taylorhakes/promise-polyfill */
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}function n(){}function t(e){if(!(this instanceof t))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=undefined,this._deferreds=[],u(e,this)}function o(e,n){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,t._immediateFn(function(){var t=1===e._state?n.onFulfilled:n.onRejected;if(null!==t){var o;try{o=t(e._value)}catch(f){return void i(n.promise,f)}r(n.promise,o)}else(1===e._state?r:i)(n.promise,e._value)})):e._deferreds.push(n)}function r(e,n){try{if(n===e)throw new TypeError("A promise cannot be resolved with itself.");if(n&&("object"==typeof n||"function"==typeof n)){var o=n.then;if(n instanceof t)return e._state=3,e._value=n,void f(e);if("function"==typeof o)return void u(function(e,n){return function(){e.apply(n,arguments)}}(o,n),e)}e._state=1,e._value=n,f(e)}catch(r){i(e,r)}}function i(e,n){e._state=2,e._value=n,f(e)}function f(e){2===e._state&&0===e._deferreds.length&&t._immediateFn(function(){e._handled||t._unhandledRejectionFn(e._value)});for(var n=0,r=e._deferreds.length;r>n;n++)o(e,e._deferreds[n]);e._deferreds=null}function u(e,n){var t=!1;try{e(function(e){t||(t=!0,r(n,e))},function(e){t||(t=!0,i(n,e))})}catch(o){if(t)return;t=!0,i(n,o)}}var c=setTimeout;t.prototype["catch"]=function(e){return this.then(null,e)},t.prototype.then=function(e,t){var r=new this.constructor(n);return o(this,new function(e,n,t){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof n?n:null,this.promise=t}(e,t,r)),r},t.prototype["finally"]=e,t.all=function(e){return new t(function(n,t){function o(e,f){try{if(f&&("object"==typeof f||"function"==typeof f)){var u=f.then;if("function"==typeof u)return void u.call(f,function(n){o(e,n)},t)}r[e]=f,0==--i&&n(r)}catch(c){t(c)}}if(!e||"undefined"==typeof e.length)throw new TypeError("Promise.all accepts an array");var r=Array.prototype.slice.call(e);if(0===r.length)return n([]);for(var i=r.length,f=0;r.length>f;f++)o(f,r[f])})},t.resolve=function(e){return e&&"object"==typeof e&&e.constructor===t?e:new t(function(n){n(e)})},t.reject=function(e){return new t(function(n,t){t(e)})},t.race=function(e){return new t(function(n,t){for(var o=0,r=e.length;r>o;o++)e[o].then(n,t)})},t._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){c(e,0)},t._unhandledRejectionFn=function(e){void 0!==console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l.Promise=t});
--- a/package.json
+++ b/package.json
@ -20,24 +20,26 @@
    "url": "git://github.com/hakimel/reveal.js.git"
  },
  "engines": {
-    "node": ">=4.0.0"
+    "node": ">=9.0.0"
  },
  "devDependencies": {
    "express": "^4.16.2",
-    "grunt": "^1.0.1",
+    "grunt": "^1.0.3",
+    "grunt-cli": "^1.3.2",
    "grunt-autoprefixer": "^3.0.4",
-    "grunt-cli": "^1.2.0",
-    "grunt-contrib-connect": "^1.0.2",
-    "grunt-contrib-cssmin": "^2.2.1",
-    "grunt-contrib-jshint": "^1.1.0",
-    "grunt-contrib-qunit": "^2.0.0",
+    "grunt-contrib-connect": "^2.0.0",
+    "grunt-contrib-cssmin": "^3.0.0",
+    "grunt-contrib-jshint": "^2.0.0",
+    "grunt-contrib-qunit": "^3.1.0",
    "grunt-contrib-uglify": "^3.3.0",
-    "grunt-contrib-watch": "^1.0.0",
-    "grunt-sass": "^2.0.0",
-    "grunt-retire": "^1.0.7",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-sass": "^3.0.2",
    "grunt-zip": "~0.17.1",
+    "load-grunt-tasks": "^4.0.0",
+    "node-sass": "4.11.0",
    "mustache": "^2.3.0",
-    "socket.io": "^1.7.3"
+    "socket.io": "^2.2.0",
+    "typescript": "^3.3.3333"
  },
  "license": "MIT"
 }
--- a/plugin/highlight/highlight.js
+++ b/plugin/highlight/highlight.js
--- a/plugin/markdown/example.html
+++ b/plugin/markdown/example.html
@ -9,7 +9,7 @@
 		<link rel="stylesheet" href="../../css/reveal.css">
 		<link rel="stylesheet" href="../../css/theme/white.css" id="theme">

-        <link rel="stylesheet" href="../../lib/css/zenburn.css">
+        <link rel="stylesheet" href="../../lib/css/monokai.css">
 	</head>

 	<body>
@ -109,7 +109,6 @@
            </div>
 		</div>

-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>

 		<script>
@ -122,7 +121,6 @@

 				// Optional libraries used to extend on reveal.js
 				dependencies: [
-					{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
 					{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
                    { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
--- a/plugin/markdown/markdown.js
+++ b/plugin/markdown/markdown.js
@ -7,13 +7,11 @@
 	if (typeof define === 'function' && define.amd) {
 		root.marked = require( './marked' );
 		root.RevealMarkdown = factory( root.marked );
-		root.RevealMarkdown.initialize();
 	} else if( typeof exports === 'object' ) {
 		module.exports = factory( require( './marked' ) );
 	} else {
 		// Browser globals (root is window)
 		root.RevealMarkdown = factory( root.marked );
-		root.RevealMarkdown.initialize();
 	}
 }( this, function( marked ) {

@ -199,58 +197,36 @@
 	 */
 	function processSlides() {

-		var sections = document.querySelectorAll( '[data-markdown]'),
-			section;
+		return new Promise( function( resolve ) {

-		for( var i = 0, len = sections.length; i < len; i++ ) {
+			var externalPromises = [];

-			section = sections[i];
+			[].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {

 				if( section.getAttribute( 'data-markdown' ).length ) {

-				var xhr = new XMLHttpRequest(),
-					url = section.getAttribute( 'data-markdown' );
-
-				datacharset = section.getAttribute( 'data-charset' );
-
-				// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
-				if( datacharset != null && datacharset != '' ) {
-					xhr.overrideMimeType( 'text/html; charset=' + datacharset );
-				}
-
-				xhr.onreadystatechange = function() {
-					if( xhr.readyState === 4 ) {
-						// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
-						if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
+					externalPromises.push( loadExternalMarkdown( section ).then(

+						// Finished loading external file
+						function( xhr, url ) {
 							section.outerHTML = slidify( xhr.responseText, {
 								separator: section.getAttribute( 'data-separator' ),
 								verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
 								notesSeparator: section.getAttribute( 'data-separator-notes' ),
 								attributes: getForwardedAttributes( section )
 							});
+						},

-						}
-						else {
-
+						// Failed to load markdown
+						function( xhr, url ) {
 							section.outerHTML = '<section data-state="alert">' +
 								'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
 								'Check your browser\'s JavaScript console for more details.' +
 								'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
 								'</section>';
+						}

-						}
-					}
-				};
-
-				xhr.open( 'GET', url, false );
-
-				try {
-					xhr.send();
-				}
-				catch ( e ) {
-					alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
-				}
+					) );

 				}
 				else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
@ -266,14 +242,63 @@
 				else {
 					section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
 				}
+
+			});
+
+			Promise.all( externalPromises ).then( resolve );
+
+		} );
+
 	}

+	function loadExternalMarkdown( section ) {
+
+		return new Promise( function( resolve, reject ) {
+
+			var xhr = new XMLHttpRequest(),
+				url = section.getAttribute( 'data-markdown' );
+
+			datacharset = section.getAttribute( 'data-charset' );
+
+			// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
+			if( datacharset != null && datacharset != '' ) {
+				xhr.overrideMimeType( 'text/html; charset=' + datacharset );
+			}
+
+			xhr.onreadystatechange = function( section, xhr ) {
+				if( xhr.readyState === 4 ) {
+					// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
+					if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
+
+						resolve( xhr, url );
+
+					}
+					else {
+
+						reject( xhr, url );
+
+					}
+				}
+			}.bind( this, section, xhr );
+
+			xhr.open( 'GET', url, true );
+
+			try {
+				xhr.send();
+			}
+			catch ( e ) {
+				alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
+				resolve( xhr, url );
+			}
+
+		} );
+
 	}

 	/**
 	 * Check if a node value has the attributes pattern.
 	 * If yes, extract it and add that value as one or several attributes
-	 * the the terget element.
+	 * to the target element.
 	 *
 	 * You need Cache Killer on Chrome to see the effect on any FOM transformation
 	 * directly on refresh (F5)
@ -342,14 +367,9 @@
 	 */
 	function convertSlides() {

-		var sections = document.querySelectorAll( '[data-markdown]');
+		var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');

-		for( var i = 0, len = sections.length; i < len; i++ ) {
-
-			var section = sections[i];
-
-			// Only parse the same slide once
-			if( !section.getAttribute( 'data-markdown-parsed' ) ) {
+		[].slice.call( sections ).forEach( function( section ) {

 			section.setAttribute( 'data-markdown-parsed', true )

@ -370,16 +390,24 @@
 				section.appendChild( notes );
 			}

-			}
+		} );

-		}
+		return Promise.resolve();

 	}

 	// API
-	return {
+	var RevealMarkdown = {
+
+		/**
+		 * Starts processing and converting Markdown within the
+		 * current reveal.js deck.
+		 *
+		 * @param {function} callback function to invoke once
+		 * we've finished loading and parsing Markdown
+		 */
+		init: function( callback ) {

-		initialize: function() {
 			if( typeof marked === 'undefined' ) {
 				throw 'The reveal.js Markdown plugin requires marked to be loaded';
 			}
@ -392,14 +420,14 @@
 				});
 			}

+			// marked can be configured via reveal.js config options
 			var options = Reveal.getConfig().markdown;
-
-			if ( options ) {
+			if( options ) {
 				marked.setOptions( options );
 			}

-			processSlides();
-			convertSlides();
+			return processSlides().then( convertSlides );
+
 		},

 		// TODO: Do these belong in the API?
@ -409,4 +437,10 @@

 	};

+	// Register our plugin so that reveal.js will call our
+	// plugin 'init' method as part of the initialization
+	Reveal.registerPlugin( 'markdown', RevealMarkdown );
+
+	return RevealMarkdown;
+
 }));
--- a/plugin/markdown/marked.js
+++ b/plugin/markdown/marked.js
--- a/plugin/math/math.js
+++ b/plugin/math/math.js
@ -7,33 +7,28 @@
 var RevealMath = window.RevealMath || (function(){

 	var options = Reveal.getConfig().math || {};
-	options.mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
-	options.config = options.config || 'TeX-AMS_HTML-full';
-	options.tex2jax = options.tex2jax || {
-				inlineMath: [['$','$'],['\\(','\\)']] ,
-				skipTags: ['script','noscript','style','textarea','pre'] };
+	var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
+	var config = options.config || 'TeX-AMS_HTML-full';
+	var url = mathjax + '?config=' + config;

-	loadScript( options.mathjax + '?config=' + options.config, function() {
-
-		MathJax.Hub.Config({
+	var defaultOptions = {
 		messageStyle: 'none',
-			tex2jax: options.tex2jax,
+		tex2jax: {
+			inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
+			skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
+		},
 		skipStartupTypeset: true
-		});
+	};

-		// Typeset followed by an immediate reveal.js layout since
-		// the typesetting process could affect slide height
-		MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
-		MathJax.Hub.Queue( Reveal.layout );
+	function defaults( options, defaultOptions ) {

-		// Reprocess equations in slides when they turn visible
-		Reveal.addEventListener( 'slidechanged', function( event ) {
+		for ( var i in defaultOptions ) {
+			if ( !options.hasOwnProperty( i ) ) {
+				options[i] = defaultOptions[i];
+			}
+		}

-			MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
-
-		} );
-
-	} );
+	}

 	function loadScript( url, callback ) {

@ -64,4 +59,34 @@ var RevealMath = window.RevealMath || (function(){

 	}

+	return {
+		init: function() {
+
+			defaults( options, defaultOptions );
+			defaults( options.tex2jax, defaultOptions.tex2jax );
+			options.mathjax = options.config = null;
+
+			loadScript( url, function() {
+
+				MathJax.Hub.Config( options );
+
+				// Typeset followed by an immediate reveal.js layout since
+				// the typesetting process could affect slide height
+				MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
+				MathJax.Hub.Queue( Reveal.layout );
+
+				// Reprocess equations in slides when they turn visible
+				Reveal.addEventListener( 'slidechanged', function( event ) {
+
+					MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
+
+				} );
+
+			} );
+
+		}
+	}
+
 })();
+
+Reveal.registerPlugin( 'math', RevealMath );
--- a/plugin/notes/notes.html
+++ b/plugin/notes/notes.html
@ -347,6 +347,8 @@
 					upcomingSlide,
 					layoutLabel,
 					layoutDropdown,
+					pendingCalls = {},
+					lastRevealApiCallId = 0,
 					connected = false;

 				var SPEAKER_LAYOUTS = {
@ -382,6 +384,10 @@
 						else if( data.type === 'state' ) {
 							handleStateMessage( data );
 						}
+						else if( data.type === 'return' ) {
+							pendingCalls[data.callId](data.result);
+							delete pendingCalls[data.callId];
+						}
 					}
 					// Messages sent by the reveal.js inside of the current slide preview
 					else if( data && data.namespace === 'reveal' ) {
@ -398,6 +404,23 @@

 				} );

+				/**
+				 * Asynchronously calls the Reveal.js API of the main frame.
+				 */
+				function callRevealApi( methodName, methodArguments, callback ) {
+
+					var callId = ++lastRevealApiCallId;
+					pendingCalls[callId] = callback;
+					window.opener.postMessage( JSON.stringify( {
+						namespace: 'reveal-notes',
+						type: 'call',
+						callId: callId,
+						methodName: methodName,
+						arguments: methodArguments
+					} ), '*' );
+
+				}
+
 				/**
 				 * Called when the main window is trying to establish a
 				 * connection.
@ -512,19 +535,22 @@

 				}

-				function getTimings() {
+				function getTimings( callback ) {

-					var slides = Reveal.getSlides();
-					var defaultTiming = Reveal.getConfig().defaultTiming;
+					callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
+						callRevealApi( 'getConfig', [], function ( config ) {
+							var defaultTiming = config.defaultTiming;
 							if (defaultTiming == null) {
-						return null;
+								callback(null);
+								return;
 							}
+
 							var timings = [];
-					for ( var i in slides ) {
-						var slide = slides[i];
+							for ( var i in slideAttributes ) {
+								var slide = slideAttributes[ i ];
 								var timing = defaultTiming;
-						if( slide.hasAttribute( 'data-timing' )) {
-							var t = slide.getAttribute( 'data-timing' );
+								if( slide.hasOwnProperty( 'data-timing' )) {
+									var t = slide[ 'data-timing' ];
 									timing = parseInt(t);
 									if( isNaN(timing) ) {
 										console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
@ -533,7 +559,10 @@
 								}
 								timings.push(timing);
 							}
-					return timings;
+
+							callback( timings );
+						} );
+					} );

 				}

@ -541,15 +570,15 @@
 				 * Return the number of seconds allocated for presenting
 				 * all slides up to and including this one.
 				 */
-				function getTimeAllocated(timings) {
+				function getTimeAllocated( timings, callback ) {

-					var slides = Reveal.getSlides();
+					callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
 						var allocated = 0;
-					var currentSlide = Reveal.getSlidePastCount();
-					for (var i in slides.slice(0, currentSlide + 1)) {
+						for (var i in timings.slice(0, currentSlide + 1)) {
 							allocated += timings[i];
 						}
-					return allocated;
+						callback( allocated );
+					} );

 				}

@ -571,12 +600,51 @@
 					pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
 					pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );

-					var timings = getTimings();
-					if (timings !== null) {
+					var timings = null;
+					getTimings( function ( _timings ) {
+
+						timings = _timings;
+						if (_timings !== null) {
 							pacingTitleEl.style.removeProperty('display');
 							pacingEl.style.removeProperty('display');
 						}

+						// Update once directly
+						_updateTimer();
+
+						// Then update every second
+						setInterval( _updateTimer, 1000 );
+
+					} );
+
+
+					function _resetTimer() {
+
+						if (timings == null) {
+							start = new Date();
+							_updateTimer();
+						}
+						else {
+							// Reset timer to beginning of current slide
+							getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
+								var slideEndTiming = slideEndTimingSeconds * 1000;
+								callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
+									var currentSlideTiming = timings[currentSlide] * 1000;
+									var previousSlidesTiming = slideEndTiming - currentSlideTiming;
+									var now = new Date();
+									start = new Date(now.getTime() - previousSlidesTiming);
+									_updateTimer();
+								} );
+							} );
+						}
+
+					}
+
+					timeEl.addEventListener( 'click', function() {
+						_resetTimer();
+						return false;
+					} );
+
 					function _displayTime( hrEl, minEl, secEl, time) {

 						var sign = Math.sign(time) == -1 ? "-" : "";
@ -618,8 +686,10 @@

 					function _updatePacing(diff) {

-						var slideEndTiming = getTimeAllocated(timings) * 1000;
-						var currentSlide = Reveal.getSlidePastCount();
+						getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
+							var slideEndTiming = slideEndTimingSeconds * 1000;
+
+							callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
 								var currentSlideTiming = timings[currentSlide] * 1000;
 								var timeLeftCurrentSlide = slideEndTiming - diff;
 								if (timeLeftCurrentSlide < 0) {
@ -632,37 +702,9 @@
 									pacingEl.className = 'pacing ahead';
 								}
 								_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
-
-					}
-
-					// Update once directly
-					_updateTimer();
-
-					// Then update every second
-					setInterval( _updateTimer, 1000 );
-
-					function _resetTimer() {
-
-						if (timings == null) {
-							start = new Date();
-						}
-						else {
-							// Reset timer to beginning of current slide
-							var slideEndTiming = getTimeAllocated(timings) * 1000;
-							var currentSlide = Reveal.getSlidePastCount();
-							var currentSlideTiming = timings[currentSlide] * 1000;
-							var previousSlidesTiming = slideEndTiming - currentSlideTiming;
-							var now = new Date();
-							start = new Date(now.getTime() - previousSlidesTiming);
-						}
-						_updateTimer();
-
-					}
-
-					timeEl.addEventListener( 'click', function() {
-						_resetTimer();
-						return false;
 							} );
+						} );
+					}

 				}

--- a/plugin/notes/notes.js
+++ b/plugin/notes/notes.js
@ -11,24 +11,28 @@
 */
 var RevealNotes = (function() {

+    var notesPopup = null;
+
 	function openNotes( notesFilePath ) {

+        if (notesPopup && !notesPopup.closed) {
+            notesPopup.focus();
+            return;
+        }
+
 		if( !notesFilePath ) {
 			var jsFileLocation = document.querySelector('script[src$="notes.js"]').src;  // this js file path
 			jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, '');   // the js folder path
 			notesFilePath = jsFileLocation + 'notes.html';
 		}

-		var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
+		notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );

 		if( !notesPopup ) {
 			alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
 			return;
 		}

-		// Allow popup window access to Reveal API
-		notesPopup.Reveal = window.Reveal;
-
 		/**
 		 * Connect to the notes window through a postmessage handshake.
 		 * Using postmessage enables us to work in situations where the
@ -52,9 +56,28 @@ var RevealNotes = (function() {
 					clearInterval( connectInterval );
 					onConnected();
 				}
+				if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
+					callRevealApi( data.methodName, data.arguments, data.callId );
+				}
 			} );
 		}

+		/**
+		 * Calls the specified Reveal.js method with the provided argument
+		 * and then pushes the result to the notes frame.
+		 */
+		function callRevealApi( methodName, methodArguments, callId ) {
+
+			var result = Reveal[methodName].apply( Reveal, methodArguments );
+			notesPopup.postMessage( JSON.stringify( {
+				namespace: 'reveal-notes',
+				type: 'return',
+				result: result,
+				callId: callId
+			} ), '*' );
+
+		}
+
 		/**
 		 * Posts the current slide data to the notes window
 		 */
@ -128,6 +151,9 @@ var RevealNotes = (function() {

 	}

+	return {
+		init: function() {
+
 			if( !/receiver/i.test( window.location.search ) ) {

 				// If the there's a 'notes' query set, open directly
@ -142,6 +168,11 @@ var RevealNotes = (function() {

 			}

-	return { open: openNotes };
+		},
+
+		open: openNotes
+	};

 })();
+
+Reveal.registerPlugin( 'notes', RevealNotes );
--- a/plugin/search/search.js
+++ b/plugin/search/search.js
@ -200,7 +200,7 @@ function Hilitor(id, tag)
 			toggleSearch();
 		}
 	}, false );
-	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' );
+	if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
 	closeSearch();
 	return { open: openSearch };
 })();
--- a/plugin/zoom-js/zoom.js
+++ b/plugin/zoom-js/zoom.js
@ -1,9 +1,10 @@
 // Custom reveal.js integration
-(function(){
-	var revealElement = document.querySelector( '.reveal' );
-	if( revealElement ) {
+var RevealZoom = (function(){

-		revealElement.addEventListener( 'mousedown', function( event ) {
+	return {
+		init: function() {
+
+			Reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
 				var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';

 				var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
@ -22,8 +23,12 @@
 			} );

 		}
+	}
+
 })();

+Reveal.registerPlugin( 'zoom', RevealZoom );
+
 /*!
 * zoom.js 0.3 (modified for use with reveal.js)
 * http://lab.hakim.se/zoom-js
--- a/test/assets/external-script-a.js
+++ b/test/assets/external-script-a.js
@ -0,0 +1 @@
+window.externalScriptSequence += 'A';
--- a/test/assets/external-script-b.js
+++ b/test/assets/external-script-b.js
@ -0,0 +1 @@
+window.externalScriptSequence += 'B';
--- a/test/assets/external-script-c.js
+++ b/test/assets/external-script-c.js
@ -0,0 +1 @@
+window.externalScriptSequence += 'C';
--- a/test/assets/external-script-d.js
+++ b/test/assets/external-script-d.js
@ -0,0 +1 @@
+window.externalScriptSequence += 'D';
--- a/test/examples/assets/beeping.txt
+++ b/test/examples/assets/beeping.txt
@ -0,0 +1,2 @@
+Source: https://freesound.org/people/fennelliott/sounds/379419/
+License: CC0 (public domain)
--- a/test/examples/assets/beeping.wav
+++ b/test/examples/assets/beeping.wav
--- a/test/examples/embedded-media.html
+++ b/test/examples/embedded-media.html
@ -30,11 +30,15 @@
 					<h2>Empty Slide</h2>
 				</section>

+				<section>
+					<h2>Auto-playing audio</h2>
+					<audio src="assets/beeping.wav" data-autoplay></audio>
+				</section>
+
 			</div>

 		</div>

-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>

 		<script>
--- a/test/examples/math.html
+++ b/test/examples/math.html
@ -82,6 +82,14 @@
 					\]
 				</section>

+				<section>
+					<h3>TeX Macros</h3>
+
+					Here is a common vector space:
+					\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
+					used in functional analysis.
+				</section>
+
 				<section>
 					<section>
 						<h3>The Lorenz Equations</h3>
@ -153,13 +161,20 @@
 							\]
 						</div>
 					</section>
+
+					<section>
+						<h3>TeX Macros</h3>
+
+						Here is a common vector space:
+						\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
+						used in functional analysis.
+					</section>
 				</section>

 			</div>

 		</div>

-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>

 		<script>
@ -170,11 +185,16 @@

 				math: {
 					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
-					config: 'TeX-AMS_HTML-full'
+					config: 'TeX-AMS_HTML-full',
+					TeX: {
+						Macros: {
+							R: '\\mathbb{R}',
+							set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
+						}
+					}
 				},

 				dependencies: [
-					{ src: '../../lib/js/classList.js' },
 					{ src: '../../plugin/math/math.js', async: true }
 				]
 			});
--- a/test/examples/slide-backgrounds.html
+++ b/test/examples/slide-backgrounds.html
@ -122,7 +122,6 @@

 		</div>

-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>

 		<script>
--- a/test/examples/slide-transitions.html
+++ b/test/examples/slide-transitions.html
@ -81,7 +81,6 @@

 		</div>

-		<script src="../../lib/js/head.min.js"></script>
 		<script src="../../js/reveal.js"></script>

 		<script>
--- a/test/test-dependencies-async.html
+++ b/test/test-dependencies-async.html
@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Async Dependencies</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			var	externalScriptSequence = '';
+			var scriptCount = 0;
+
+			QUnit.config.autostart = false;
+			QUnit.module( 'Async Dependencies' );
+
+			QUnit.test( 'Async scripts are loaded', function( assert ) {
+				assert.expect( 5 );
+				var done = assert.async( 5 );
+
+				function callback( event ) {
+					if( externalScriptSequence.length === 1 ) {
+						assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
+						done();
+					}
+					else {
+						assert.ok( true, 'async script loaded' );
+						done();
+					}
+
+					if( externalScriptSequence.length === 4 ) {
+						assert.ok( 	externalScriptSequence.indexOf( 'A' ) !== -1 &&
+									externalScriptSequence.indexOf( 'B' ) !== -1 &&
+									externalScriptSequence.indexOf( 'C' ) !== -1 &&
+									externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
+						done();
+					}
+
+					scriptCount ++;
+				}
+
+				Reveal.initialize({
+					dependencies: [
+						{ src: 'assets/external-script-a.js', async: false, callback: callback },
+						{ src: 'assets/external-script-b.js', async: true, callback: callback },
+						{ src: 'assets/external-script-c.js', async: true, callback: callback },
+						{ src: 'assets/external-script-d.js', async: true, callback: callback }
+					]
+				});
+			});
+
+			QUnit.start();
+
+		</script>
+
+	</body>
+</html>
--- a/test/test-dependencies.html
+++ b/test/test-dependencies.html
@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Dependencies</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			window.externalScriptSequence = '';
+
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'Dependencies' );
+
+				QUnit.test( 'Load synchronous scripts', function( assert ) {
+					assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
+				});
+
+			} );
+
+			Reveal.initialize({
+				dependencies: [
+					{ src: 'assets/external-script-a.js' },
+					{ src: 'assets/external-script-b.js' },
+					{ src: 'assets/external-script-c.js' }
+				]
+			});
+		</script>
+
+	</body>
+</html>
--- a/test/test-grid-navigation.html
+++ b/test/test-grid-navigation.html
@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Grid</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>0</section>
+				<section>
+					<section>1.1</section>
+					<section>1.2</section>
+					<section>1.3</section>
+					<section>1.4</section>
+				</section>
+				<section>
+					<section>2.1</section>
+					<section>2.2</section>
+					<section>2.3</section>
+					<section>2.4</section>
+				</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'Grid Navigation' );
+
+				QUnit.test( 'Disabled', function( assert ) {
+					Reveal.right();
+					Reveal.down();
+					Reveal.down();
+					assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
+					Reveal.right();
+					assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' );
+				});
+
+				QUnit.test( 'Enabled', function( assert ) {
+					Reveal.configure({ navigationMode: 'grid' });
+					Reveal.slide( 0, 0 );
+					Reveal.right();
+					Reveal.down();
+					Reveal.down();
+					assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
+					Reveal.right();
+					assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' );
+				});
+
+			} );
+
+			Reveal.initialize();
+		</script>
+
+	</body>
+</html>
--- a/test/test-markdown-element-attributes.html
+++ b/test/test-markdown-element-attributes.html
@ -66,8 +66,7 @@

 						Test

-						![Example Picture](examples/assets/image2.png)
-						<!-- {_class="reveal stretch"} -->
+						![Example Picture](examples/assets/image2.png) <!-- {_class="reveal stretch"} -->

 					</script>
 				</section>
@ -122,7 +121,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
--- a/test/test-markdown-external.html
+++ b/test/test-markdown-external.html
@ -18,19 +18,20 @@
 		<div class="reveal" style="display: none;">

 			<div class="slides">
-				<section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section>
+				<!-- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section> -->
 			</div>

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/highlight/highlight.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
 		<script src="qunit-2.5.0.js"></script>

-		<script src="test-markdown-external.js"></script>
+		<!-- <script src="test-markdown-external.js"></script> -->
+
+		<!-- Test disabled 28/2/2019 by Hakim – Markdown plugin needs to be updated to load extenal files asycnhronously -->

 	</body>
 </html>
--- a/test/test-markdown-options.html
+++ b/test/test-markdown-options.html
@ -31,7 +31,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="qunit-2.5.0.js"></script>

--- a/test/test-markdown-slide-attributes.html
+++ b/test/test-markdown-slide-attributes.html
@ -116,7 +116,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
--- a/test/test-markdown.html
+++ b/test/test-markdown.html
@ -40,7 +40,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="../plugin/markdown/marked.js"></script>
 		<script src="../plugin/markdown/markdown.js"></script>
--- a/test/test-pdf.html
+++ b/test/test-pdf.html
@ -22,7 +22,7 @@

 				<section>
 					<h1>1</h1>
-					<img data-src="fake-url.png">
+					<img data-src="">
 				</section>

 				<section>
@ -73,7 +73,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="qunit-2.5.0.js"></script>

--- a/test/test-plugins.html
+++ b/test/test-plugins.html
@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test Plugins</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>Slide content</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+			QUnit.module( 'Plugins' );
+
+			var initCounter = { PluginB: 0, PluginC: 0, PluginD: 0 };
+
+			// Plugin with no init method
+			var PluginA = {};
+
+			// Plugin with init method
+			var PluginB = { init: function() {
+				initCounter['PluginB'] += 1;
+			} };
+
+			// Async plugin with init method
+			var PluginC = { init: function() {
+				return new Promise(function( resolve ) {
+					setTimeout( () => {
+						initCounter['PluginC'] += 1;
+						resolve();
+					}, 1000 );
+				});
+			} };
+
+			// Plugin initialized after reveal.js is ready
+			var PluginD = { init: function() {
+				initCounter['PluginD'] += 1;
+			} };
+
+			Reveal.registerPlugin( 'PluginA', PluginA );
+			Reveal.registerPlugin( 'PluginB', PluginB );
+			Reveal.registerPlugin( 'PluginC', PluginC );
+
+			Reveal.initialize();
+
+			QUnit.test( 'Can initialize synchronously', function( assert ) {
+				assert.strictEqual( initCounter['PluginB'], 1 );
+
+				Reveal.registerPlugin( 'PluginB', PluginB );
+
+				assert.strictEqual( initCounter['PluginB'], 1, 'prevents duplicate registration' );
+			});
+
+			QUnit.test( 'Can initialie asynchronously', function( assert ) {
+				assert.expect( 3 );
+				var done = assert.async( 2 );
+
+				assert.strictEqual( initCounter['PluginC'], 0, 'async plugin not immediately initialized' );
+
+				Reveal.addEventListener( 'ready', function() {
+					assert.strictEqual( initCounter['PluginC'], 1, 'finsihed initializing when reveal.js dispatches "ready"' );
+					done();
+
+					Reveal.registerPlugin( 'PluginD', PluginD );
+					assert.strictEqual( initCounter['PluginD'], 1, 'plugin registered after reveal.js is ready still initiailizes' );
+					done();
+				});
+			} );
+		</script>
+
+	</body>
+</html>
--- a/test/test-state.html
+++ b/test/test-state.html
@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+
+	<head>
+		<meta charset="utf-8">
+
+		<title>reveal.js - Test State</title>
+
+		<link rel="stylesheet" href="../css/reveal.css">
+		<link rel="stylesheet" href="qunit-2.5.0.css">
+	</head>
+
+	<body style="overflow: auto;">
+
+		<div id="qunit"></div>
+		<div id="qunit-fixture"></div>
+
+		<div class="reveal" style="display: none;">
+
+			<div class="slides">
+
+				<section>No state</section>
+				<section id="slide2" data-state="state1">State 1</section>
+				<section data-state="state1">State 1</section>
+				<section data-state="state2">State 2</section>
+				<section>
+					<section>No state</section>
+					<section data-state="state1">State 1</section>
+					<section data-state="state3">State 3</section>
+					<section>No state</section>
+				</section>
+				<section>No state</section>
+
+			</div>
+
+		</div>
+
+		<script src="../js/reveal.js"></script>
+		<script src="qunit-2.5.0.js"></script>
+
+		<script>
+
+
+			Reveal.addEventListener( 'ready', function() {
+
+				QUnit.module( 'State' );
+
+				QUnit.test( 'Fire events when changing slide', function( assert ) {
+					assert.expect( 2 );
+					var state1 = assert.async();
+					var state2 = assert.async();
+
+					var _onState1 = function( event ) {
+						assert.ok( true, 'state1 fired' );
+						state1();
+					}
+
+					var _onState2 = function( event ) {
+						assert.ok( true, 'state2 fired' );
+						state2();
+					}
+
+					Reveal.addEventListener( 'state1', _onState1 );
+					Reveal.addEventListener( 'state2', _onState2 );
+
+					Reveal.slide( 1 );
+					Reveal.slide( 3 );
+
+					Reveal.removeEventListener( 'state1', _onState1 );
+					Reveal.removeEventListener( 'state2', _onState2 );
+				});
+
+				QUnit.test( 'Fire state events for vertical slides', function( assert ) {
+					assert.expect( 2 );
+					var done = assert.async( 2 );
+
+					var _onState1 = function( event ) {
+						assert.ok( true, 'state1 fired' );
+						done();
+					}
+
+					var _onState3 = function( event ) {
+						assert.ok( true, 'state3 fired' );
+						done();
+					}
+
+					Reveal.addEventListener( 'state1', _onState1 );
+					Reveal.addEventListener( 'state3', _onState3 );
+
+					Reveal.slide( 0 );
+					Reveal.slide( 4, 1 );
+					Reveal.slide( 4, 2 );
+
+					Reveal.removeEventListener( 'state1', _onState1 );
+					Reveal.removeEventListener( 'state3', _onState3 );
+				});
+
+				QUnit.test( 'No events if state remains unchanged', function( assert ) {
+					var stateChanges = 0;
+
+					var _onEvent = function( event ) {
+						stateChanges += 1;
+					}
+
+					Reveal.addEventListener( 'state1', _onEvent );
+
+					Reveal.slide( 0 );      // no state
+					Reveal.slide( 1 );      // state1
+					Reveal.slide( 2 );      // state1
+					Reveal.prev();          // state1
+					Reveal.next();          // state1
+					Reveal.slide( 4, 1 );   // state1
+					Reveal.slide( 0 );      // no state
+
+					Reveal.removeEventListener( 'state1', _onEvent );
+
+					assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
+				});
+
+				QUnit.test( 'Event order', function( assert ) {
+					var _onEvent = function( event ) {
+						assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
+					}
+
+					Reveal.addEventListener( 'state1', _onEvent );
+
+					Reveal.slide( 0 );
+					Reveal.slide( 1 );
+
+					Reveal.removeEventListener( 'state1', _onEvent );
+				});
+
+			} );
+
+			Reveal.initialize();
+		</script>
+
+	</body>
+</html>
--- a/test/test.html
+++ b/test/test.html
@ -21,9 +21,9 @@

 				<section data-background-image="examples/assets/image1.png">
 					<h1>1</h1>
-					<img data-src="fake-url.png">
-					<video data-src="fake-url.mp4"></video>
-					<audio data-src="fake-url.mp3"></audio>
+					<img data-src="">
+					<video data-src=""></video>
+					<audio data-src=""></audio>
 					<aside class="notes">speaker notes 1</aside>
 				</section>

@ -76,7 +76,6 @@

 		</div>

-		<script src="../lib/js/head.min.js"></script>
 		<script src="../js/reveal.js"></script>
 		<script src="qunit-2.5.0.js"></script>

--- a/test/test.js
+++ b/test/test.js
@ -262,6 +262,7 @@ Reveal.addEventListener( 'ready', function() {

 	QUnit.test( 'Current fragment', function( assert ) {
 		var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
+		var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );

 		Reveal.slide( 2, 0 );
 		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
@ -274,6 +275,10 @@ Reveal.addEventListener( 'ready', function() {

 		Reveal.slide( 3, 0, 0 );
 		assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
+
+		Reveal.slide( 2, 1, -1 );
+		Reveal.prev();
+		assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
 	});

 	QUnit.test( 'Stepping through fragments', function( assert ) {