update leetcode 20230110.md

Gulp livereload: include subfolders to watch for changes in html and md

.github/CONTRIBUTING.md

@@ -1,10 +1,9 @@
 ## Contributing
-
-Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
+Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
 
 
-### Personal Support
-If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
+### General Questions and Support
+If you have questions about how to use reveal.js the best place to ask is in the [Discussions](https://github.com/hakimel/reveal.js/discussions). Anything that isn't a bug report should be posted as a dicussion instead.
 
 
 ### Bug Reports
@@ -12,11 +11,10 @@ When reporting a bug make sure to include information about which browser and op
 
 
 ### Pull Requests
+- Should be submitted from a feature/topic branch (not your master)
 - Should follow the coding style of the file you work in, most importantly:
   - Tabs to indent
   - Single-quoted strings
-- Should be made towards the **dev branch**
-- Should be submitted from a feature/topic branch (not your master)
 
 
 ### Plugins

.github/workflows/js.yml

@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 14.x]
+        node-version: [10.x, 14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2

.gitignore

@@ -8,5 +8,4 @@ out/
 log/*.log
 tmp/**
 node_modules/
-.sass-cache
-dist/*.map
+.sass-cache

LICENSE

@@ -1,4 +1,4 @@
-Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors
+Copyright (C) 2011-2022 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

README.md

@@ -1,28 +1,50 @@
 <p align="center">
   <a href="https://revealjs.com">
-  <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text.svg" alt="reveal.js" width="450">
+  <img src="https://hakim-static.s3.amazonaws.com/reveal-js/logo/v1/reveal-black-text-sticker.png" alt="reveal.js" width="500">
   </a>
   <br><br>
   <a href="https://github.com/hakimel/reveal.js/actions"><img src="https://github.com/hakimel/reveal.js/workflows/tests/badge.svg"></a>
   <a href="https://slides.com/"><img src="https://s3.amazonaws.com/static.slid.es/images/slides-github-banner-320x40.png?1" alt="Slides" width="160" height="20"></a>
 </p>
 
-reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create fully featured and beautiful presentations for free. [Check out the live demo](https://revealjs.com/).
+reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free. Check out the live demo at [revealjs.com](https://revealjs.com/).
 
-The framework comes with a broad range of features including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX support](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and much more.
+The framework comes with a powerful feature set including [nested slides](https://revealjs.com/vertical-slides/), [Markdown support](https://revealjs.com/markdown/), [Auto-Animate](https://revealjs.com/auto-animate/), [PDF export](https://revealjs.com/pdf-export/), [speaker notes](https://revealjs.com/speaker-view/), [LaTeX typesetting](https://revealjs.com/math/), [syntax highlighted code](https://revealjs.com/code/) and an [extensive API](https://revealjs.com/api/).
 
-<h1>
-  <a href="https://revealjs.com/installation" style="font-size: 3em;">Get Started</a>
-</h1>
+---
 
-## Documentation
-The full reveal.js documentation is available at [revealjs.com](https://revealjs.com).
+Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.
 
-## Online Editor
-Want to create your presentation using a visual editor? Try the official reveal.js presentation platform for free at [Slides.com](https://slides.com). It's made by the same people behind reveal.js.
+---
 
-## License
+### Sponsors
+Hakim's open source work is supported by <a href="https://github.com/sponsors/hakimel">GitHub sponsors</a>. Special thanks to:
+<div align="center">
+  <table>
+    <td align="center">
+      <a href="https://workos.com/?utm_campaign=github_repo&utm_medium=referral&utm_content=revealjs&utm_source=github">
+        <div>
+          <img src="https://user-images.githubusercontent.com/629429/151508669-efb4c3b3-8fe3-45eb-8e47-e9510b5f0af1.svg" width="290" alt="WorkOS">
+        </div>
+        <b>Your app, enterprise-ready.</b>
+        <div>
+          <sub>Start selling to enterprise customers with just a few lines of code. Add Single Sign-On (and more) in minutes instead of months.</sup>
+        </div>
+      </a>
+    </td>
+  </table>
+</div>
 
-MIT licensed
+---
 
-Copyright (C) 2011-2020 Hakim El Hattab, https://hakim.se
+### Getting started
+- 🚀 [Install reveal.js](https://revealjs.com/installation)
+- 👀 [View the demo presentation](https://revealjs.com/demo)
+- 📖 [Read the documentation](https://revealjs.com/markup/)
+- 🖌 [Try the visual editor for reveal.js at Slides.com](https://slides.com/)
+- 🎬 [Watch the reveal.js video course (paid)](https://revealjs.com/course)
+
+--- 
+<div align="center">
+  MIT licensed | Copyright © 2011-2022 Hakim El Hattab, https://hakim.se
+</div>

css/layout.scss

@@ -16,7 +16,7 @@
 	box-sizing: border-box;
 }
 
-// Text that auto-fits it's container
+// Text that auto-fits its container
 .reveal .r-fit-text {
 	display: inline-block; // https://github.com/rikschennink/fitty#performance
 	white-space: nowrap;

css/print/paper.scss

@@ -141,6 +141,11 @@
 
 			transform: none !important;
 		}
+
+		.reveal .r-fit-text {
+			white-space: normal !important;
+		}
+
 		.reveal section img {
 			display: block;
 			margin: 15px 0px;

css/print/pdf.scss

@@ -100,7 +100,6 @@ html.print-pdf {
 		box-shadow: none;
 	}
 
-
 	/* Slide backgrounds are placed inside of their slide when exporting to PDF */
 	.reveal .backgrounds {
 		display: none;

css/reveal.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * reveal.js
  * http://revealjs.com
@@ -31,6 +33,16 @@ html.reveal-full-page {
 	color: #000;
 }
 
+// Force the presentation to cover the full viewport when we
+// enter fullscreen mode. Fixes sizing issues in Safari.
+.reveal-viewport:fullscreen {
+	top: 0 !important;
+	left: 0 !important;
+	width: 100% !important;
+	height: 100% !important;
+	transform: none !important;
+}
+
 
 /*********************************************
  * VIEW FRAGMENTS
@@ -247,11 +259,11 @@ $controlsArrowAngleActive: 36deg;
 
 @mixin controlsArrowTransform( $angle ) {
 	&:before {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
 	}
 
 	&:after {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
 	}
 }
 
@@ -300,11 +312,11 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 		width: $controlArrowLength;
 		height: $controlArrowThickness;
-		border-radius: $controlArrowThickness/2;
+		border-radius: $controlArrowThickness*0.5;
 		background-color: currentColor;
 
 		transition: all 0.15s ease, background-color 0.8s ease;
-		transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
+		transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
 		will-change: transform;
 	}
 
@@ -326,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-left {
 		right: $controlArrowSize + $controlArrowSpacing*2;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( -10px );
 
 		&.highlight {
@@ -336,7 +348,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-right {
 		right: 0;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( 10px );
 
 		.controls-arrow {
@@ -349,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-up {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: $controlArrowSpacing*2 + $controlArrowSize;
 		transform: translateY( -10px );
 
@@ -359,7 +371,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-down {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: -$controlArrowSpacing;
 		padding-bottom: $controlArrowSpacing;
 		transform: translateY( 10px );
@@ -515,25 +527,25 @@ $controlsArrowAngleActive: 36deg;
 		.navigate-left {
 			top: 50%;
 			left: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-right {
 			top: 50%;
 			right: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-up {
 			top: $spacing;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 
 		.navigate-down {
 			bottom: $spacing - $controlArrowSpacing + 0.3em;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 	}
 
@@ -711,6 +723,8 @@ $controlsArrowAngleActive: 36deg;
 
 .reveal .slides>section.past,
 .reveal .slides>section.future,
+.reveal .slides>section.past>section,
+.reveal .slides>section.future>section,
 .reveal .slides>section>section.past,
 .reveal .slides>section>section.future {
 	opacity: 0;
@@ -769,9 +783,6 @@ $controlsArrowAngleActive: 36deg;
  *********************************************/
 
 @each $stylename in slide, linear {
-	.reveal.#{$stylename} section {
-		backface-visibility: hidden;
-	}
 	@include transition-horizontal-past(#{$stylename}) {
 		transform: translate(-150%, 0);
 	}
@@ -1158,54 +1169,53 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 /* Immediate transition style */
-.reveal[data-background-transition=none]>.backgrounds .slide-background,
+.reveal[data-background-transition=none]>.backgrounds .slide-background:not([data-background-transition]),
 .reveal>.backgrounds .slide-background[data-background-transition=none] {
 	transition: none;
 }
 
 /* Slide */
-.reveal[data-background-transition=slide]>.backgrounds .slide-background,
+.reveal[data-background-transition=slide]>.backgrounds .slide-background:not([data-background-transition]),
 .reveal>.backgrounds .slide-background[data-background-transition=slide] {
 	opacity: 1;
-	backface-visibility: hidden;
 }
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past,
+	.reveal[data-background-transition=slide]>.backgrounds .slide-background.past:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
 		transform: translate(-100%, 0);
 	}
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future,
+	.reveal[data-background-transition=slide]>.backgrounds .slide-background.future:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background.future[data-background-transition=slide] {
 		transform: translate(100%, 0);
 	}
 
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past,
+	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=slide] {
 		transform: translate(0, -100%);
 	}
-	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future,
+	.reveal[data-background-transition=slide]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=slide] {
 		transform: translate(0, 100%);
 	}
 
 
 /* Convex */
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.past,
+.reveal[data-background-transition=convex]>.backgrounds .slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.past[data-background-transition=convex] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background.future,
+.reveal[data-background-transition=convex]>.backgrounds .slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.future[data-background-transition=convex] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past,
+.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future,
+.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(-90deg) translate3d(0, 100%, 0);
@@ -1213,54 +1223,54 @@ $controlsArrowAngleActive: 36deg;
 
 
 /* Concave */
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.past,
+.reveal[data-background-transition=concave]>.backgrounds .slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.past[data-background-transition=concave] {
 	opacity: 0;
 	transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background.future,
+.reveal[data-background-transition=concave]>.backgrounds .slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.future[data-background-transition=concave] {
 	opacity: 0;
 	transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past,
+.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=concave] {
 	opacity: 0;
 	transform: translate3d(0, -100%, 0) rotateX(-90deg) translate3d(0, -100%, 0);
 }
-.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future,
+.reveal[data-background-transition=concave]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=concave] {
 	opacity: 0;
 	transform: translate3d(0, 100%, 0) rotateX(90deg) translate3d(0, 100%, 0);
 }
 
 /* Zoom */
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background,
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background:not([data-background-transition]),
 .reveal>.backgrounds .slide-background[data-background-transition=zoom] {
 	transition-timing-function: ease;
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past,
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.past[data-background-transition=zoom] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future,
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background.future[data-background-transition=zoom] {
 	opacity: 0;
 	visibility: hidden;
 	transform: scale(0.2);
 }
 
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past,
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.past:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=zoom] {
 	opacity: 0;
 		visibility: hidden;
 		transform: scale(16);
 }
-.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future,
+.reveal[data-background-transition=zoom]>.backgrounds .slide-background>.slide-background.future:not([data-background-transition]),
 .reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=zoom] {
 	opacity: 0;
 	visibility: hidden;
@@ -1701,7 +1711,7 @@ $notesWidthPercent: 25%;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
+	width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@@ -1764,7 +1774,6 @@ $notesWidthPercent: 25%;
 		top: 100%;
 		left: 0;
 		width: 100%;
-		height: (30/0.7)*1%;
 		height: 30vh;
 		border: 0;
 	}
@@ -1778,7 +1787,6 @@ $notesWidthPercent: 25%;
 
 	.reveal.show-notes .speaker-notes {
 		top: 100%;
-		height: (40/0.6)*1%;
 		height: 40vh;
 	}
 

css/theme/source/dracula.scss

@@ -0,0 +1,132 @@
+/**
+ * Dracula Dark theme for reveal.js.
+ * Based on https://draculatheme.com
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+
+// Include theme-specific fonts
+$systemFontsSansSerif: -apple-system,
+					   BlinkMacSystemFont,
+					   avenir next,
+					   avenir,
+					   segoe ui,
+					   helvetica neue,
+					   helvetica,
+					   Cantarell,
+					   Ubuntu,
+					   roboto,
+					   noto,
+					   arial,
+					   sans-serif;
+$systemFontsMono: Menlo,
+				  Consolas,
+				  Monaco,
+				  Liberation Mono,
+				  Lucida Console,
+				  monospace;
+
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
+html * {
+	color-profile: sRGB;
+	rendering-intent: auto;
+}
+
+$background: #282A36;
+$foreground: #F8F8F2;
+$selection: #44475A;
+$comment: #6272A4;
+$red: #FF5555;
+$orange: #FFB86C;
+$yellow: #F1FA8C;
+$green: #50FA7B;
+$purple: #BD93F9;
+$cyan: #8BE9FD;
+$pink: #FF79C6;
+
+
+
+// Override theme settings (see ../template/settings.scss)
+$mainColor: $foreground;
+$headingColor: $purple;
+$headingTextShadow: none;
+$headingTextTransform: none;
+$backgroundColor: $background;
+$linkColor: $pink;
+$linkColorHover: $cyan;
+$selectionBackgroundColor: $selection;
+$inlineCodeColor: $green;
+$listBulletColor: $cyan;
+
+$mainFont: $systemFontsSansSerif;
+$codeFont: "Fira Code", $systemFontsMono;
+
+// Change text colors against light slide backgrounds
+@include light-bg-text-color($background);
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
+
+// Define additional color effects based on Dracula spec
+// https://spec.draculatheme.com/
+:root {
+	--r-bold-color: #{$orange};
+	--r-italic-color: #{$yellow};
+	--r-inline-code-color: #{$inlineCodeColor};
+	--r-list-bullet-color: #{$listBulletColor};
+}
+
+.reveal strong, .reveal b {
+	color: var(--r-bold-color);
+}
+
+.reveal em, .reveal i, .reveal blockquote {
+	color: var(--r-italic-color);
+}
+
+.reveal code {
+	color: var(--r-inline-code-color);
+}
+
+// Dracula colored list bullets and numbers
+.reveal ul {
+	list-style: none;
+}
+
+.reveal ul li::before {
+	content: "•";
+	color: var(--r-list-bullet-color);
+	display: inline-block;
+	width: 1em;
+	margin-left: -1em
+}
+
+.reveal ol {
+	list-style: none;
+	counter-reset: li;
+}
+
+.reveal ol li::before {
+	content: counter(li) ".";
+	color: var(--r-list-bullet-color);
+	display: inline-block;
+	width: 2em;
+
+	margin-left: -2.5em;
+    margin-right: 0.5em;
+	text-align: right;
+}
+
+.reveal ol li {
+	counter-increment: li
+}

css/theme/template/exposer.scss

@@ -1,27 +1,28 @@
 // Exposes theme's variables for easy re-use in CSS for plugin authors
 
 :root {
-  --background-color: #{$backgroundColor};
-  --main-font: #{$mainFont};
-  --main-font-size: #{$mainFontSize};
-  --main-color: #{$mainColor};
-  --block-margin: #{$blockMargin};
-  --heading-margin: #{$headingMargin};
-  --heading-font: #{$headingFont};
-  --heading-color: #{$headingColor};
-  --heading-line-height: #{$headingLineHeight};
-  --heading-letter-spacing: #{$headingLetterSpacing};
-  --heading-text-transform: #{$headingTextTransform};
-  --heading-text-shadow: #{$headingTextShadow};
-  --heading-font-weight: #{$headingFontWeight};
-  --heading1-text-shadow: #{$heading1TextShadow};
-  --heading1-size: #{$heading1Size};
-  --heading2-size: #{$heading2Size};
-  --heading3-size: #{$heading3Size};
-  --heading4-size: #{$heading4Size};
-  --code-font: #{$codeFont};
-  --link-color: #{$linkColor};
-  --link-color-hover: #{$linkColorHover};
-  --selection-background-color: #{$selectionBackgroundColor};
-  --selection-color: #{$selectionColor};
+  --r-background-color: #{$backgroundColor};
+  --r-main-font: #{$mainFont};
+  --r-main-font-size: #{$mainFontSize};
+  --r-main-color: #{$mainColor};
+  --r-block-margin: #{$blockMargin};
+  --r-heading-margin: #{$headingMargin};
+  --r-heading-font: #{$headingFont};
+  --r-heading-color: #{$headingColor};
+  --r-heading-line-height: #{$headingLineHeight};
+  --r-heading-letter-spacing: #{$headingLetterSpacing};
+  --r-heading-text-transform: #{$headingTextTransform};
+  --r-heading-text-shadow: #{$headingTextShadow};
+  --r-heading-font-weight: #{$headingFontWeight};
+  --r-heading1-text-shadow: #{$heading1TextShadow};
+  --r-heading1-size: #{$heading1Size};
+  --r-heading2-size: #{$heading2Size};
+  --r-heading3-size: #{$heading3Size};
+  --r-heading4-size: #{$heading4Size};
+  --r-code-font: #{$codeFont};
+  --r-link-color: #{$linkColor};
+  --r-link-color-dark: #{darken($linkColor , 15% )};
+  --r-link-color-hover: #{$linkColorHover};
+  --r-selection-background-color: #{$selectionBackgroundColor};
+  --r-selection-color: #{$selectionColor};
 }

css/theme/template/theme.scss

@@ -8,25 +8,25 @@
 
 .reveal-viewport {
 	@include bodyBackground();
-	background-color: $backgroundColor;
+	background-color: var(--r-background-color);
 }
 
 .reveal {
-	font-family: $mainFont;
-	font-size: $mainFontSize;
+	font-family: var(--r-main-font);
+	font-size: var(--r-main-font-size);
 	font-weight: normal;
-	color: $mainColor;
+	color: var(--r-main-color);
 }
 
 .reveal ::selection {
-	color: $selectionColor;
-	background: $selectionBackgroundColor;
+	color: var(--r-selection-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-	color: $selectionColor;
-	background: $selectionBackgroundColor;
+	color: var(--r-selection-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
@@ -46,27 +46,27 @@
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-	margin: $headingMargin;
-	color: $headingColor;
+	margin: var(--r-heading-margin);
+	color: var(--r-heading-color);
 
-	font-family: $headingFont;
-	font-weight: $headingFontWeight;
-	line-height: $headingLineHeight;
-	letter-spacing: $headingLetterSpacing;
+	font-family: var(--r-heading-font);
+	font-weight: var(--r-heading-font-weight);
+	line-height: var(--r-heading-line-height);
+	letter-spacing: var(--r-heading-letter-spacing);
 
-	text-transform: $headingTextTransform;
-	text-shadow: $headingTextShadow;
+	text-transform: var(--r-heading-text-transform);
+	text-shadow: var(--r-heading-text-shadow);
 
 	word-wrap: break-word;
 }
 
-.reveal h1 {font-size: $heading1Size; }
-.reveal h2 {font-size: $heading2Size; }
-.reveal h3 {font-size: $heading3Size; }
-.reveal h4 {font-size: $heading4Size; }
+.reveal h1 {font-size: var(--r-heading1-size); }
+.reveal h2 {font-size: var(--r-heading2-size); }
+.reveal h3 {font-size: var(--r-heading3-size); }
+.reveal h4 {font-size: var(--r-heading4-size); }
 
 .reveal h1 {
-	text-shadow: $heading1TextShadow;
+	text-shadow: var(--r-heading1-text-shadow);
 }
 
 
@@ -75,7 +75,7 @@
  *********************************************/
 
 .reveal p {
-	margin: $blockMargin 0;
+	margin: var(--r-block-margin) 0;
 	line-height: 1.3;
 }
 
@@ -150,7 +150,7 @@
 	display: block;
 	position: relative;
 	width: 70%;
-	margin: $blockMargin auto;
+	margin: var(--r-block-margin) auto;
 	padding: 5px;
 
 	font-style: italic;
@@ -170,11 +170,11 @@
 	display: block;
 	position: relative;
 	width: 90%;
-	margin: $blockMargin auto;
+	margin: var(--r-block-margin) auto;
 
 	text-align: left;
 	font-size: 0.55em;
-	font-family: $codeFont;
+	font-family: var(--r-code-font);
 	line-height: 1.2em;
 
 	word-wrap: break-word;
@@ -183,8 +183,9 @@
 }
 
 .reveal code {
-	font-family: $codeFont;
+	font-family: var(--r-code-font);
 	text-transform: none;
+	tab-size: 2;
 }
 
 .reveal pre code {
@@ -195,6 +196,14 @@
 	word-wrap: normal;
 }
 
+.reveal .code-wrapper {
+	white-space: normal;
+}
+
+.reveal .code-wrapper code {
+	white-space: pre;
+}
+
 .reveal table {
 	margin: auto;
 	border-collapse: collapse;
@@ -248,7 +257,7 @@
 }
 
 .reveal img {
-	margin: $blockMargin 0;
+	margin: var(--r-block-margin) 0;
 }
 
 
@@ -257,19 +266,21 @@
  *********************************************/
 
 .reveal a {
-	color: $linkColor;
+	color: var(--r-link-color);
 	text-decoration: none;
 	transition: color .15s ease;
 }
 	.reveal a:hover {
-		color: $linkColorHover;
+		color: var(--r-link-color-hover);
 		text-shadow: none;
 		border: none;
 	}
 
 .reveal .roll span:after {
 	color: #fff;
-	background: darken( $linkColor, 15% );
+	// background: darken( var(--r-link-color), 15% );
+	 background: var(--r-link-color-dark);
+
 }
 
 
@@ -278,7 +289,7 @@
  *********************************************/
 
 .reveal .r-frame {
-	border: 4px solid $mainColor;
+	border: 4px solid var(--r-main-color);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -287,7 +298,7 @@
 }
 
 .reveal a:hover .r-frame {
-	border-color: $linkColor;
+	border-color: var(--r-link-color);
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -297,7 +308,7 @@
  *********************************************/
 
 .reveal .controls {
-	color: $linkColor;
+	color: var(--r-link-color);
 }
 
 
@@ -307,7 +318,7 @@
 
 .reveal .progress {
 	background: rgba(0,0,0,0.2);
-	color: $linkColor;
+	color: var(--r-link-color);
 }
 
 /*********************************************
@@ -315,6 +326,6 @@
  *********************************************/
  @media print {
     .backgrounds {
-        background-color: $backgroundColor;
+        background-color: var(--r-background-color);
     }
 }

demo.html

@@ -19,7 +19,7 @@
 		<link rel="stylesheet" href="dist/theme/black.css" id="theme">
 
 		<!-- Theme used for syntax highlighting of code -->
-		<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
+		<link rel="stylesheet" href="plugin/highlight/monokai.css">
 	</head>
 
 	<body>
@@ -52,7 +52,7 @@
 						<p>Slides can be nested inside of each other.</p>
 						<p>Use the <em>Space</em> key to navigate through all slides.</p>
 						<br>
-						<a href="#" class="navigate-down">
+						<a href="#/2/1" class="navigate-down">
 							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
@@ -186,7 +186,7 @@
 						Write content using inline or external Markdown.
 						Instructions and more info available in the [docs](https://revealjs.com/markdown/).
 
-						```[]
+						```html []
 						<section data-markdown>
 						  ## Markdown support
 
@@ -249,17 +249,17 @@
 					<p>
 						reveal.js comes with a few themes built in: <br>
 						<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
-						<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/black.css'); return false;">Black (default)</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/white.css'); return false;">White</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/league.css'); return false;">League</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/sky.css'); return false;">Sky</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/beige.css'); return false;">Beige</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/simple.css'); return false;">Simple</a> <br>
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/serif.css'); return false;">Serif</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/blood.css'); return false;">Blood</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/night.css'); return false;">Night</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/moon.css'); return false;">Moon</a> -
+						<a href="#" onclick="document.getElementById('theme').setAttribute('href','dist/theme/solarized.css'); return false;">Solarized</a>
 					</p>
 				</section>
 
@@ -273,6 +273,11 @@
 							<img class="r-frame" style="background: rgba(255,255,255,0.1);" width="178" height="238" data-src="https://static.slid.es/reveal/arrow.png" alt="Down arrow">
 						</a>
 					</section>
+					<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
+						<h2>Gradient Backgrounds</h2>
+						<pre><code class="hljs html wrap">&lt;section data-background-gradient=
+							"linear-gradient(to bottom, #ddd, #191919)"&gt;</code></pre>
+					</section>
 					<section data-background="https://static.slid.es/reveal/image-placeholder.png">
 						<h2>Image Backgrounds</h2>
 						<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
@@ -281,7 +286,7 @@
 						<h2>Tiled Backgrounds</h2>
 						<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" data-background-color="#000000">
+					<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" 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 html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>

dist/theme/beige.css

@@ -6,35 +6,38 @@
 @import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
+  color: #fff;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #f7f3de;
-  --main-font: Lato, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #333;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #333;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #8b743d;
-  --link-color-hover: #c0a86e;
-  --selection-background-color: rgba(79, 64, 28, 0.99);
-  --selection-color: #fff; }
+  --r-background-color: #f7f3de;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #333;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #333;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #8b743d;
+  --r-link-color-dark: #564826;
+  --r-link-color-hover: #c0a86e;
+  --r-selection-background-color: rgba(79, 64, 28, 0.99);
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #f7f2d3;
@@ -44,28 +47,33 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
-  background-color: #f7f3de; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #333; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: rgba(79, 64, 28, 0.99);
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: rgba(79, 64, 28, 0.99);
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -76,37 +84,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #333;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -115,187 +130,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #8b743d;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #c0a86e;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #564826; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #333;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #8b743d;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #8b743d; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #8b743d; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #f7f3de; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/black.css

@@ -5,60 +5,68 @@
  */
 @import url(./fonts/source-sans-pro/source-sans-pro.css);
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
+  color: #222;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #191919;
-  --main-font: Source Sans Pro, Helvetica, sans-serif;
-  --main-font-size: 42px;
-  --main-color: #fff;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --heading-color: #fff;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: 600;
-  --heading1-text-shadow: none;
-  --heading1-size: 2.5em;
-  --heading2-size: 1.6em;
-  --heading3-size: 1.3em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #42affa;
-  --link-color-hover: #8dcffc;
-  --selection-background-color: #bee4fd;
-  --selection-color: #fff; }
+  --r-background-color: #191919;
+  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-main-font-size: 42px;
+  --r-main-color: #fff;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-heading-color: #fff;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: 600;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 2.5em;
+  --r-heading2-size: 1.6em;
+  --r-heading3-size: 1.3em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #42affa;
+  --r-link-color-dark: #068de9;
+  --r-link-color-hover: #8dcffc;
+  --r-selection-background-color: #bee4fd;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #191919;
-  background-color: #191919; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-size: 42px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #fff; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #bee4fd;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #bee4fd;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -69,37 +77,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #fff;
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 2.5em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 1.6em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.3em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -108,187 +123,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #42affa;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #8dcffc;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #068de9; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #42affa;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #42affa; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #42affa; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #191919; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/blood.css

@@ -11,60 +11,68 @@
  */
 @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
+  color: #222;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #222;
-  --main-font: Ubuntu, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #eee;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Ubuntu, sans-serif;
-  --heading-color: #eee;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: 2px 2px 2px #222;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #a23;
-  --link-color-hover: #dd5566;
-  --selection-background-color: #a23;
-  --selection-color: #fff; }
+  --r-background-color: #222;
+  --r-main-font: Ubuntu, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #eee;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Ubuntu, sans-serif;
+  --r-heading-color: #eee;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: 2px 2px 2px #222;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #a23;
+  --r-link-color-dark: #6a1520;
+  --r-link-color-hover: #dd5566;
+  --r-selection-background-color: #a23;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #222;
-  background-color: #222; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: Ubuntu, "sans-serif";
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #eee; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #a23;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #a23;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -75,37 +83,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #eee;
-  font-family: Ubuntu, "sans-serif";
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: 2px 2px 2px #222;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -114,197 +129,246 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #a23;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #dd5566;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #6a1520; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #a23;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #a23; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #a23; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #222; } }
-
+    background-color: var(--r-background-color);
+  }
+}
 .reveal p {
   font-weight: 300;
-  text-shadow: 1px 1px #222; }
+  text-shadow: 1px 1px #222;
+}
 
 section.has-light-background p, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4 {
-  text-shadow: none; }
+  text-shadow: none;
+}
 
 .reveal h1,
 .reveal h2,
@@ -312,12 +376,15 @@ section.has-light-background p, section.has-light-background h1, section.has-lig
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  font-weight: 700; }
+  font-weight: 700;
+}
 
 .reveal p code {
   background-color: #23241f;
   display: inline-block;
-  border-radius: 7px; }
+  border-radius: 7px;
+}
 
 .reveal small code {
-  vertical-align: baseline; }
+  vertical-align: baseline;
+}

dist/theme/dracula.css

@@ -0,0 +1,414 @@
+@charset "UTF-8";
+/**
+ * Dracula Dark theme for reveal.js.
+ * Based on https://draculatheme.com
+ */
+/**
+ * Dracula colors by Zeno Rocha
+ * https://draculatheme.com/contribute
+ */
+html * {
+  color-profile: sRGB;
+  rendering-intent: auto;
+}
+
+section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
+  color: #282A36;
+}
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+:root {
+  --r-background-color: #282A36;
+  --r-main-font: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #F8F8F2;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #BD93F9;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: none;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+  --r-link-color: #FF79C6;
+  --r-link-color-dark: #ff2da5;
+  --r-link-color-hover: #8BE9FD;
+  --r-selection-background-color: #44475A;
+  --r-selection-color: #fff;
+}
+
+.reveal-viewport {
+  background: #282A36;
+  background-color: var(--r-background-color);
+}
+
+.reveal {
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
+  font-weight: normal;
+  color: var(--r-main-color);
+}
+
+.reveal ::selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal ::-moz-selection {
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
+
+.reveal .slides section,
+.reveal .slides section > section {
+  line-height: 1.3;
+  font-weight: inherit;
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
+
+.reveal h1 {
+  font-size: var(--r-heading1-size);
+}
+
+.reveal h2 {
+  font-size: var(--r-heading2-size);
+}
+
+.reveal h3 {
+  font-size: var(--r-heading3-size);
+}
+
+.reveal h4 {
+  font-size: var(--r-heading4-size);
+}
+
+.reveal h1 {
+  text-shadow: var(--r-heading1-text-shadow);
+}
+
+/*********************************************
+ * OTHER
+ *********************************************/
+.reveal p {
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
+
+/* Remove trailing margins after titles */
+.reveal h1:last-child,
+.reveal h2:last-child,
+.reveal h3:last-child,
+.reveal h4:last-child,
+.reveal h5:last-child,
+.reveal h6:last-child {
+  margin-bottom: 0;
+}
+
+/* Ensure certain elements are never larger than the slide itself */
+.reveal img,
+.reveal video,
+.reveal iframe {
+  max-width: 95%;
+  max-height: 95%;
+}
+
+.reveal strong,
+.reveal b {
+  font-weight: bold;
+}
+
+.reveal em {
+  font-style: italic;
+}
+
+.reveal ol,
+.reveal dl,
+.reveal ul {
+  display: inline-block;
+  text-align: left;
+  margin: 0 0 0 1em;
+}
+
+.reveal ol {
+  list-style-type: decimal;
+}
+
+.reveal ul {
+  list-style-type: disc;
+}
+
+.reveal ul ul {
+  list-style-type: square;
+}
+
+.reveal ul ul ul {
+  list-style-type: circle;
+}
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+  display: block;
+  margin-left: 40px;
+}
+
+.reveal dt {
+  font-weight: bold;
+}
+
+.reveal dd {
+  margin-left: 40px;
+}
+
+.reveal blockquote {
+  display: block;
+  position: relative;
+  width: 70%;
+  margin: var(--r-block-margin) auto;
+  padding: 5px;
+  font-style: italic;
+  background: rgba(255, 255, 255, 0.05);
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
+.reveal blockquote p:first-child,
+.reveal blockquote p:last-child {
+  display: inline-block;
+}
+
+.reveal q {
+  font-style: italic;
+}
+
+.reveal pre {
+  display: block;
+  position: relative;
+  width: 90%;
+  margin: var(--r-block-margin) auto;
+  text-align: left;
+  font-size: 0.55em;
+  font-family: var(--r-code-font);
+  line-height: 1.2em;
+  word-wrap: break-word;
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
+
+.reveal code {
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
+
+.reveal pre code {
+  display: block;
+  padding: 5px;
+  overflow: auto;
+  max-height: 400px;
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
+
+.reveal table {
+  margin: auto;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.reveal table th {
+  font-weight: bold;
+}
+
+.reveal table th,
+.reveal table td {
+  text-align: left;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-bottom: 1px solid;
+}
+
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
+
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
+
+.reveal table tbody tr:last-child th,
+.reveal table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.reveal sup {
+  vertical-align: super;
+  font-size: smaller;
+}
+
+.reveal sub {
+  vertical-align: sub;
+  font-size: smaller;
+}
+
+.reveal small {
+  display: inline-block;
+  font-size: 0.6em;
+  line-height: 1.2em;
+  vertical-align: top;
+}
+
+.reveal small * {
+  vertical-align: top;
+}
+
+.reveal img {
+  margin: var(--r-block-margin) 0;
+}
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: var(--r-link-color);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.reveal a:hover {
+  color: var(--r-link-color-hover);
+  text-shadow: none;
+  border: none;
+}
+
+.reveal .roll span:after {
+  color: #fff;
+  background: var(--r-link-color-dark);
+}
+
+/*********************************************
+ * Frame helper
+ *********************************************/
+.reveal .r-frame {
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
+
+.reveal a .r-frame {
+  transition: all 0.15s linear;
+}
+
+.reveal a:hover .r-frame {
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls {
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--r-link-color);
+}
+
+/*********************************************
+ * PRINT BACKGROUND
+ *********************************************/
+@media print {
+  .backgrounds {
+    background-color: var(--r-background-color);
+  }
+}
+:root {
+  --r-bold-color: #FFB86C;
+  --r-italic-color: #F1FA8C;
+  --r-inline-code-color: #50FA7B;
+  --r-list-bullet-color: #8BE9FD;
+}
+
+.reveal strong, .reveal b {
+  color: var(--r-bold-color);
+}
+
+.reveal em, .reveal i, .reveal blockquote {
+  color: var(--r-italic-color);
+}
+
+.reveal code {
+  color: var(--r-inline-code-color);
+}
+
+.reveal ul {
+  list-style: none;
+}
+
+.reveal ul li::before {
+  content: "•";
+  color: var(--r-list-bullet-color);
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+}
+
+.reveal ol {
+  list-style: none;
+  counter-reset: li;
+}
+
+.reveal ol li::before {
+  content: counter(li) ".";
+  color: var(--r-list-bullet-color);
+  display: inline-block;
+  width: 2em;
+  margin-left: -2.5em;
+  margin-right: 0.5em;
+  text-align: right;
+}
+
+.reveal ol li {
+  counter-increment: li;
+}

dist/theme/league.css

@@ -8,35 +8,38 @@
 @import url(./fonts/league-gothic/league-gothic.css);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
+  color: #222;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #2b2b2b;
-  --main-font: Lato, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #eee;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #eee;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-  --heading-font-weight: normal;
-  --heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #13DAEC;
-  --link-color-hover: #71e9f4;
-  --selection-background-color: #FF5E99;
-  --selection-color: #fff; }
+  --r-background-color: #2b2b2b;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #eee;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #eee;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15);
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #13DAEC;
+  --r-link-color-dark: #0d99a5;
+  --r-link-color-hover: #71e9f4;
+  --r-selection-background-color: #FF5E99;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #1c1e20;
@@ -46,28 +49,33 @@ section.has-light-background, section.has-light-background h1, section.has-light
   background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
   background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
   background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
-  background-color: #2b2b2b; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #eee; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #FF5E99;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #FF5E99;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -78,37 +86,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #eee;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -117,187 +132,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #13DAEC;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #71e9f4;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #0d99a5; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #13DAEC;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #13DAEC; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #13DAEC; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #2b2b2b; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/moon.css

@@ -9,63 +9,72 @@
  */
 html * {
   color-profile: sRGB;
-  rendering-intent: auto; }
+  rendering-intent: auto;
+}
 
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
+  color: #222;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #002b36;
-  --main-font: Lato, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #93a1a1;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #eee8d5;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #268bd2;
-  --link-color-hover: #78b9e6;
-  --selection-background-color: #d33682;
-  --selection-color: #fff; }
+  --r-background-color: #002b36;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #93a1a1;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #eee8d5;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #268bd2;
+  --r-link-color-dark: #1a6091;
+  --r-link-color-hover: #78b9e6;
+  --r-selection-background-color: #d33682;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #002b36;
-  background-color: #002b36; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #93a1a1; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -76,37 +85,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #eee8d5;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -115,187 +131,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #268bd2;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #78b9e6;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a6091; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #93a1a1;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #268bd2;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #268bd2; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #268bd2; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #002b36; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/night.css

@@ -6,60 +6,68 @@
 @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
 section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
-  color: #222; }
+  color: #222;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #111;
-  --main-font: Open Sans, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #eee;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Montserrat, Impact, sans-serif;
-  --heading-color: #eee;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: -0.03em;
-  --heading-text-transform: none;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #e7ad52;
-  --link-color-hover: #f3d7ac;
-  --selection-background-color: #e7ad52;
-  --selection-color: #fff; }
+  --r-background-color: #111;
+  --r-main-font: Open Sans, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #eee;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Montserrat, Impact, sans-serif;
+  --r-heading-color: #eee;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: -0.03em;
+  --r-heading-text-transform: none;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #e7ad52;
+  --r-link-color-dark: #d08a1d;
+  --r-link-color-hover: #f3d7ac;
+  --r-selection-background-color: #e7ad52;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #111;
-  background-color: #111; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Open Sans", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #eee; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #e7ad52;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #e7ad52;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -70,37 +78,44 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #eee;
-  font-family: "Montserrat", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: -0.03em;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -109,187 +124,235 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #e7ad52;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #f3d7ac;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #d08a1d; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #eee;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #e7ad52;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #e7ad52; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #e7ad52; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #111; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/serif.css

@@ -5,63 +5,72 @@
  * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
  */
 .reveal a {
-  line-height: 1.3em; }
+  line-height: 1.3em;
+}
 
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
+  color: #fff;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #F0F1EB;
-  --main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --main-font-size: 40px;
-  --main-color: #000;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --heading-color: #383D3D;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: none;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #51483D;
-  --link-color-hover: #8b7c69;
-  --selection-background-color: #26351C;
-  --selection-color: #fff; }
+  --r-background-color: #F0F1EB;
+  --r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #000;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --r-heading-color: #383D3D;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: none;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #51483D;
+  --r-link-color-dark: #25211c;
+  --r-link-color-hover: #8b7c69;
+  --r-selection-background-color: #26351C;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #F0F1EB;
-  background-color: #F0F1EB; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #000; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #26351C;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #26351C;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -72,37 +81,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #383D3D;
-  font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -111,187 +127,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #51483D;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #8b7c69;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #25211c; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #000;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #51483D;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #51483D; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #51483D; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #F0F1EB; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/simple.css

@@ -8,60 +8,68 @@
 @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
 @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
+  color: #fff;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fff;
-  --main-font: Lato, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #000;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: News Cycle, Impact, sans-serif;
-  --heading-color: #000;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: none;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #00008B;
-  --link-color-hover: #0000f1;
-  --selection-background-color: rgba(0, 0, 0, 0.99);
-  --selection-color: #fff; }
+  --r-background-color: #fff;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #000;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: News Cycle, Impact, sans-serif;
+  --r-heading-color: #000;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: none;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #00008B;
+  --r-link-color-dark: #00003f;
+  --r-link-color-hover: #0000f1;
+  --r-selection-background-color: rgba(0, 0, 0, 0.99);
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #fff;
-  background-color: #fff; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #000; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.99);
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.99);
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -72,37 +80,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #000;
-  font-family: "News Cycle", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: none;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -111,187 +126,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #00008B;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #0000f1;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #00003f; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #000;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #00008B;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #00008B; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #00008B; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #fff; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/sky.css

@@ -6,38 +6,42 @@
 @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
 .reveal a {
-  line-height: 1.3em; }
+  line-height: 1.3em;
+}
 
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
+  color: #fff;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #f7fbfc;
-  --main-font: Open Sans, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #333;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Quicksand, sans-serif;
-  --heading-color: #333;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: -0.08em;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #3b759e;
-  --link-color-hover: #74a7cb;
-  --selection-background-color: #134674;
-  --selection-color: #fff; }
+  --r-background-color: #f7fbfc;
+  --r-main-font: Open Sans, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #333;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Quicksand, sans-serif;
+  --r-heading-color: #333;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: -0.08em;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #3b759e;
+  --r-link-color-dark: #264c66;
+  --r-link-color-hover: #74a7cb;
+  --r-selection-background-color: #134674;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #add9e4;
@@ -47,28 +51,33 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
   background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
   background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%);
-  background-color: #f7fbfc; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Open Sans", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #333; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #134674;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #134674;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -79,37 +88,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #333;
-  font-family: "Quicksand", sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: -0.08em;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -118,187 +134,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #3b759e;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #74a7cb;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #264c66; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #333;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #3b759e;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #3b759e; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #3b759e; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #f7fbfc; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/solarized.css

@@ -9,60 +9,68 @@
  */
 html * {
   color-profile: sRGB;
-  rendering-intent: auto; }
+  rendering-intent: auto;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fdf6e3;
-  --main-font: Lato, sans-serif;
-  --main-font-size: 40px;
-  --main-color: #657b83;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #586e75;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: normal;
-  --heading1-text-shadow: none;
-  --heading1-size: 3.77em;
-  --heading2-size: 2.11em;
-  --heading3-size: 1.55em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #268bd2;
-  --link-color-hover: #78b9e6;
-  --selection-background-color: #d33682;
-  --selection-color: #fff; }
+  --r-background-color: #fdf6e3;
+  --r-main-font: Lato, sans-serif;
+  --r-main-font-size: 40px;
+  --r-main-color: #657b83;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-color: #586e75;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: normal;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 3.77em;
+  --r-heading2-size: 2.11em;
+  --r-heading3-size: 1.55em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #268bd2;
+  --r-link-color-dark: #1a6091;
+  --r-link-color-hover: #78b9e6;
+  --r-selection-background-color: #d33682;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #fdf6e3;
-  background-color: #fdf6e3; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Lato", sans-serif;
-  font-size: 40px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #657b83; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #d33682;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -73,37 +81,44 @@ html * {
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #586e75;
-  font-family: "League Gothic", Impact, sans-serif;
-  font-weight: normal;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 3.77em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 2.11em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.55em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -112,187 +127,235 @@ html * {
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #268bd2;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #78b9e6;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a6091; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #657b83;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #268bd2;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #268bd2; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #268bd2; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #fdf6e3; } }
+    background-color: var(--r-background-color);
+  }
+}

dist/theme/white.css

@@ -5,60 +5,68 @@
  */
 @import url(./fonts/source-sans-pro/source-sans-pro.css);
 section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
-  color: #fff; }
+  color: #fff;
+}
 
 /*********************************************
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fff;
-  --main-font: Source Sans Pro, Helvetica, sans-serif;
-  --main-font-size: 42px;
-  --main-color: #222;
-  --block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
-  --heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --heading-color: #222;
-  --heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
-  --heading-text-shadow: none;
-  --heading-font-weight: 600;
-  --heading1-text-shadow: none;
-  --heading1-size: 2.5em;
-  --heading2-size: 1.6em;
-  --heading3-size: 1.3em;
-  --heading4-size: 1em;
-  --code-font: monospace;
-  --link-color: #2a76dd;
-  --link-color-hover: #6ca0e8;
-  --selection-background-color: #98bdef;
-  --selection-color: #fff; }
+  --r-background-color: #fff;
+  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-main-font-size: 42px;
+  --r-main-color: #222;
+  --r-block-margin: 20px;
+  --r-heading-margin: 0 0 20px 0;
+  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-heading-color: #222;
+  --r-heading-line-height: 1.2;
+  --r-heading-letter-spacing: normal;
+  --r-heading-text-transform: uppercase;
+  --r-heading-text-shadow: none;
+  --r-heading-font-weight: 600;
+  --r-heading1-text-shadow: none;
+  --r-heading1-size: 2.5em;
+  --r-heading2-size: 1.6em;
+  --r-heading3-size: 1.3em;
+  --r-heading4-size: 1em;
+  --r-code-font: monospace;
+  --r-link-color: #2a76dd;
+  --r-link-color-dark: #1a53a1;
+  --r-link-color-hover: #6ca0e8;
+  --r-selection-background-color: #98bdef;
+  --r-selection-color: #fff;
+}
 
 .reveal-viewport {
   background: #fff;
-  background-color: #fff; }
+  background-color: var(--r-background-color);
+}
 
 .reveal {
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-size: 42px;
+  font-family: var(--r-main-font);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: #222; }
+  color: var(--r-main-color);
+}
 
 .reveal ::selection {
-  color: #fff;
-  background: #98bdef;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal ::-moz-selection {
-  color: #fff;
-  background: #98bdef;
-  text-shadow: none; }
+  color: var(--r-selection-color);
+  background: var(--r-selection-background-color);
+  text-shadow: none;
+}
 
 .reveal .slides section,
 .reveal .slides section > section {
   line-height: 1.3;
-  font-weight: inherit; }
+  font-weight: inherit;
+}
 
 /*********************************************
  * HEADERS
@@ -69,37 +77,44 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: 0 0 20px 0;
-  color: #222;
-  font-family: "Source Sans Pro", Helvetica, sans-serif;
-  font-weight: 600;
-  line-height: 1.2;
-  letter-spacing: normal;
-  text-transform: uppercase;
-  text-shadow: none;
-  word-wrap: break-word; }
+  margin: var(--r-heading-margin);
+  color: var(--r-heading-color);
+  font-family: var(--r-heading-font);
+  font-weight: var(--r-heading-font-weight);
+  line-height: var(--r-heading-line-height);
+  letter-spacing: var(--r-heading-letter-spacing);
+  text-transform: var(--r-heading-text-transform);
+  text-shadow: var(--r-heading-text-shadow);
+  word-wrap: break-word;
+}
 
 .reveal h1 {
-  font-size: 2.5em; }
+  font-size: var(--r-heading1-size);
+}
 
 .reveal h2 {
-  font-size: 1.6em; }
+  font-size: var(--r-heading2-size);
+}
 
 .reveal h3 {
-  font-size: 1.3em; }
+  font-size: var(--r-heading3-size);
+}
 
 .reveal h4 {
-  font-size: 1em; }
+  font-size: var(--r-heading4-size);
+}
 
 .reveal h1 {
-  text-shadow: none; }
+  text-shadow: var(--r-heading1-text-shadow);
+}
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: 20px 0;
-  line-height: 1.3; }
+  margin: var(--r-block-margin) 0;
+  line-height: 1.3;
+}
 
 /* Remove trailing margins after titles */
 .reveal h1:last-child,
@@ -108,187 +123,235 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4:last-child,
 .reveal h5:last-child,
 .reveal h6:last-child {
-  margin-bottom: 0; }
+  margin-bottom: 0;
+}
 
 /* Ensure certain elements are never larger than the slide itself */
 .reveal img,
 .reveal video,
 .reveal iframe {
   max-width: 95%;
-  max-height: 95%; }
+  max-height: 95%;
+}
 
 .reveal strong,
 .reveal b {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal em {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal ol,
 .reveal dl,
 .reveal ul {
   display: inline-block;
   text-align: left;
-  margin: 0 0 0 1em; }
+  margin: 0 0 0 1em;
+}
 
 .reveal ol {
-  list-style-type: decimal; }
+  list-style-type: decimal;
+}
 
 .reveal ul {
-  list-style-type: disc; }
+  list-style-type: disc;
+}
 
 .reveal ul ul {
-  list-style-type: square; }
+  list-style-type: square;
+}
 
 .reveal ul ul ul {
-  list-style-type: circle; }
+  list-style-type: circle;
+}
 
 .reveal ul ul,
 .reveal ul ol,
 .reveal ol ol,
 .reveal ol ul {
   display: block;
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal dt {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal dd {
-  margin-left: 40px; }
+  margin-left: 40px;
+}
 
 .reveal blockquote {
   display: block;
   position: relative;
   width: 70%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
 
 .reveal blockquote p:first-child,
 .reveal blockquote p:last-child {
-  display: inline-block; }
+  display: inline-block;
+}
 
 .reveal q {
-  font-style: italic; }
+  font-style: italic;
+}
 
 .reveal pre {
   display: block;
   position: relative;
   width: 90%;
-  margin: 20px auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: monospace;
+  font-family: var(--r-code-font);
   line-height: 1.2em;
   word-wrap: break-word;
-  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
+  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
+}
 
 .reveal code {
-  font-family: monospace;
-  text-transform: none; }
+  font-family: var(--r-code-font);
+  text-transform: none;
+  tab-size: 2;
+}
 
 .reveal pre code {
   display: block;
   padding: 5px;
   overflow: auto;
   max-height: 400px;
-  word-wrap: normal; }
+  word-wrap: normal;
+}
+
+.reveal .code-wrapper {
+  white-space: normal;
+}
+
+.reveal .code-wrapper code {
+  white-space: pre;
+}
 
 .reveal table {
   margin: auto;
   border-collapse: collapse;
-  border-spacing: 0; }
+  border-spacing: 0;
+}
 
 .reveal table th {
-  font-weight: bold; }
+  font-weight: bold;
+}
 
 .reveal table th,
 .reveal table td {
   text-align: left;
   padding: 0.2em 0.5em 0.2em 0.5em;
-  border-bottom: 1px solid; }
+  border-bottom: 1px solid;
+}
 
-.reveal table th[align="center"],
-.reveal table td[align="center"] {
-  text-align: center; }
+.reveal table th[align=center],
+.reveal table td[align=center] {
+  text-align: center;
+}
 
-.reveal table th[align="right"],
-.reveal table td[align="right"] {
-  text-align: right; }
+.reveal table th[align=right],
+.reveal table td[align=right] {
+  text-align: right;
+}
 
 .reveal table tbody tr:last-child th,
 .reveal table tbody tr:last-child td {
-  border-bottom: none; }
+  border-bottom: none;
+}
 
 .reveal sup {
   vertical-align: super;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal sub {
   vertical-align: sub;
-  font-size: smaller; }
+  font-size: smaller;
+}
 
 .reveal small {
   display: inline-block;
   font-size: 0.6em;
   line-height: 1.2em;
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal small * {
-  vertical-align: top; }
+  vertical-align: top;
+}
 
 .reveal img {
-  margin: 20px 0; }
+  margin: var(--r-block-margin) 0;
+}
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: #2a76dd;
+  color: var(--r-link-color);
   text-decoration: none;
-  transition: color .15s ease; }
+  transition: color 0.15s ease;
+}
 
 .reveal a:hover {
-  color: #6ca0e8;
+  color: var(--r-link-color-hover);
   text-shadow: none;
-  border: none; }
+  border: none;
+}
 
 .reveal .roll span:after {
   color: #fff;
-  background: #1a53a1; }
+  background: var(--r-link-color-dark);
+}
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid #222;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
+  border: 4px solid var(--r-main-color);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+}
 
 .reveal a .r-frame {
-  transition: all .15s linear; }
+  transition: all 0.15s linear;
+}
 
 .reveal a:hover .r-frame {
-  border-color: #2a76dd;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+  border-color: var(--r-link-color);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+}
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #2a76dd; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #2a76dd; }
+  color: var(--r-link-color);
+}
 
 /*********************************************
  * PRINT BACKGROUND
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #fff; } }
+    background-color: var(--r-background-color);
+  }
+}

examples/auto-animate.html

@@ -18,7 +18,6 @@
 		<div class="reveal">
 
 			<div class="slides">
-
 				<section data-auto-animate data-auto-animate-unmatched="fade">
 					<h3>Auto-Animate Example</h3>
 					<p>This will fade out</p>
@@ -126,7 +125,7 @@
 				</section>
 
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h2>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 1</h3>
 					<h2 data-id="title" style="margin-top: 260px;">Animate Anything</h2>
 					<div data-id="1" style="background: white; position: absolute; top: 150px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: white; position: absolute; top: 150px; left: 36%; width: 60px; height: 60px;"></div>
@@ -134,7 +133,7 @@
 					<div data-id="4" style="background: white; position: absolute; top: 150px; left: 76%; width: 60px; height: 60px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h2>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 2</h3>
 					<h2 data-id="title" style="margin-top: 500px">With Auto Animate</h2>
 					<div data-id="1" style="background: cyan; position: absolute; bottom: 190px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: magenta; position: absolute; bottom: 190px; left: 36%; width: 60px; height: 160px;"></div>
@@ -142,7 +141,7 @@
 					<div data-id="4" style="background: red; position: absolute; bottom: 190px; left: 76%; width: 60px; height: 360px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
 					<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
 					<div data-id="1" style="background: cyan; position: absolute; top: 50%; left: 50%; width: 400px; height: 400px; margin: -200px 0 0 -200px; border-radius: 400px;"></div>
 					<div data-id="2" style="background: magenta; position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 400px;"></div>
@@ -150,7 +149,7 @@
 					<div data-id="4" style="background: red; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; border-radius: 400px;"></div>
 				</section>
 				<section data-auto-animate style="height: 600px">
-					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h2>
+					<h3 style="opacity: 0.3; font-size: 18px;">SLIDE 3</h3>
 					<h2 data-id="title" style="margin-top: 500px; opacity: 0;">With Auto Animate</h2>
 					<div data-id="1" style="background: red; position: absolute; top: 250px; left: 16%; width: 60px; height: 60px;"></div>
 					<div data-id="2" style="background: yellow; position: absolute; top: 250px; left: 36%; width: 60px; height: 60px;"></div>
@@ -158,6 +157,56 @@
 					<div data-id="4" style="background: cyan; position: absolute; top: 250px; left: 76%; width: 60px; height: 60px;"></div>
 				</section>
 
+				<section data-auto-animate data-auto-animate-id="a">
+					<h2>data-auto-animate-id="a"</h2>
+					<h3>A1</h3>
+				</section>
+				<section data-auto-animate data-auto-animate-id="a">
+					<h2>data-auto-animate-id="a"</h2>
+					<h3>A1</h3>
+					<h3>A2</h3>
+				</section>
+				<section data-auto-animate data-auto-animate-id="b">
+					<h2>data-auto-animate-id="b"</h2>
+					<h3>B1</h3>
+				</section>
+				<section data-auto-animate data-auto-animate-id="b">
+					<h2>data-auto-animate-id="b"</h2>
+					<h3>B1</h3>
+					<h3>B2</h3>
+				</section>
+
+				<section>
+					<section id="stacked-slide-1" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 0px;">A</div>
+					</section>
+					<section id="stacked-slide-2" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 25%;">A</div>
+					</section>
+					<section id="stacked-slide-3" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 50%;">A</div>
+					</section>
+					<section id="stacked-slide-4" data-auto-animate>
+						<a href="#/stacked-slide-1">Slide 1</a><br>
+						<a href="#/stacked-slide-2">Slide 2</a><br>
+						<a href="#/stacked-slide-3">Slide 3</a><br>
+						<a href="#/stacked-slide-4">Slide 4</a><br>
+						<div data-id="anim" style="background: indigo; padding: 8px; width: 50px; height: 50px; position: absolute; left: 75%;">A</div>
+					</section>
+				</section>
+
 			</div>
 
 		</div>

examples/layout-helpers.html

@@ -123,7 +123,7 @@
 
 				<section id="vstack">
 					<h2>VStack</h2>
-					<p>Stacks multiple elements horizontally.</p>
+					<p>Stacks multiple elements vertically.</p>
 					<pre><code class="html" data-trim data-line-numbers>
 					  <div class="r-vstack">
 					    &lt;img width="450" height="300" src="..."&gt;

examples/markdown.html

@@ -21,8 +21,8 @@
                 <!-- Use external markdown resource, separate slides by three newlines; vertical slides by two newlines -->
                 <section data-markdown="markdown.md" data-separator="^\n\n\n" data-separator-vertical="^\n\n"></section>
 
-                <!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
-                <section data-markdown data-separator="---">
+                <!-- Slides are separated by three dashes (the default) -->
+                <section data-markdown>
                     <script type="text/template">
                         ## Demo 1
                         Slide 1
@@ -35,7 +35,7 @@
                     </script>
                 </section>
 
-                <!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
+                <!-- Slides are separated by regexp matching newline + three dashes + newline, vertical slides identical but two dashes -->
                 <section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$">
                     <script type="text/template">
                         ## Demo 2
@@ -53,8 +53,8 @@
                     </script>
                 </section>
 
-                <!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
-                <section data-markdown>
+                <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
+                <section data-markdown data-separator="$x">
                     <script type="text/template">
                         A
 
@@ -106,6 +106,16 @@
                     </script>
                 </section>
 
+                <!-- Math -->
+                <section data-markdown>
+					## The Lorenz Equations
+					`\[\begin{aligned}
+					\dot{x} &amp; = \sigma(y-x) \\
+					\dot{y} &amp; = \rho x - y - xz \\
+					\dot{z} &amp; = -\beta z + xy
+					\end{aligned} \]`
+                </section>
+
             </div>
 		</div>
 
@@ -113,6 +123,7 @@
         <script src="../plugin/markdown/markdown.js"></script>
         <script src="../plugin/highlight/highlight.js"></script>
         <script src="../plugin/notes/notes.js"></script>
+        <script src="../plugin/math/math.js"></script>
 
 		<script>
 
@@ -122,7 +133,7 @@
 				history: true,
 				center: true,
 
-				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
+				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX ]
 			});
 
 		</script>

examples/markdown.md

@@ -31,6 +31,11 @@ Content 3.1
 Content 3.2
 
 
-## External 3.3
+## External 3.3 (Image)
 
 ![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
+
+
+## External 3.4 (Math)
+
+`\[ J(\theta_0,\theta_1) = \sum_{i=0} \]`

examples/math.html

@@ -20,7 +20,7 @@
 
 				<section>
 					<h2>reveal.js Math Plugin</h2>
-					<p>A thin wrapper for MathJax</p>
+					<p>Render math with KaTeX, MathJax 2 or MathJax 3</p>
 				</section>
 
 				<section>
@@ -182,8 +182,7 @@
 				history: true,
 				transition: 'linear',
 
-				math: {
-					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
+				mathjax2: {
 					config: 'TeX-AMS_HTML-full',
 					TeX: {
 						Macros: {
@@ -193,7 +192,13 @@
 					}
 				},
 
-				plugins: [ RevealMath ]
+				// There are three typesetters available
+				// RevealMath.MathJax2 (default)
+				// RevealMath.MathJax3
+				// RevealMath.KaTeX
+				//
+				// More info at https://revealjs.com/math/
+				plugins: [ RevealMath.MathJax2 ]
 			});
 		</script>
 

gulpfile.js

@@ -3,6 +3,7 @@ const path = require('path')
 const glob = require('glob')
 const yargs = require('yargs')
 const colors = require('colors')
+const through = require('through2');
 const qunit = require('node-qunit-puppeteer')
 
 const {rollup} = require('rollup')
@@ -10,11 +11,11 @@ const {terser} = require('rollup-plugin-terser')
 const babel = require('@rollup/plugin-babel').default
 const commonjs = require('@rollup/plugin-commonjs')
 const resolve = require('@rollup/plugin-node-resolve').default
+const sass = require('sass')
 
 const gulp = require('gulp')
 const tap = require('gulp-tap')
 const zip = require('gulp-zip')
-const sass = require('gulp-sass')
 const header = require('gulp-header')
 const eslint = require('gulp-eslint')
 const minify = require('gulp-clean-css')
@@ -23,13 +24,14 @@ const autoprefixer = require('gulp-autoprefixer')
 
 const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
+const host = yargs.argv.host || 'localhost'
 
 const banner = `/*!
 * reveal.js ${pkg.version}
 * ${pkg.homepage}
 * MIT licensed
 *
-* Copyright (C) 2020 Hakim El Hattab, https://hakim.se
+* Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
 */\n`
 
 // Prevents warnings from opening too many test pages
@@ -59,11 +61,11 @@ const babelConfig = {
 // polyfilling older browsers and a larger bundle.
 const babelConfigESM = JSON.parse( JSON.stringify( babelConfig ) );
 babelConfigESM.presets[0][1].targets = { browsers: [
-    'last 2 Chrome versions', 'not Chrome < 60',
-    'last 2 Safari versions', 'not Safari < 10.1',
-    'last 2 iOS versions', 'not iOS < 10.3',
-    'last 2 Firefox versions', 'not Firefox < 60',
-    'last 2 Edge versions', 'not Edge < 16',
+    'last 2 Chrome versions',
+    'last 2 Safari versions',
+    'last 2 iOS versions',
+    'last 2 Firefox versions',
+    'last 2 Edge versions',
 ] };
 
 let cache = {};
@@ -155,12 +157,34 @@ gulp.task('plugins', () => {
     } ));
 })
 
+// a custom pipeable step to transform Sass to CSS
+function compileSass() {
+  return through.obj( ( vinylFile, encoding, callback ) => {
+    const transformedFile = vinylFile.clone();
+
+    sass.render({
+        data: transformedFile.contents.toString(),
+        includePaths: ['css/', 'css/theme/template']
+    }, ( err, result ) => {
+        if( err ) {
+            console.log( vinylFile.path );
+            console.log( err.formatted );
+        }
+        else {
+            transformedFile.extname = '.css';
+            transformedFile.contents = result.css;
+            callback( null, transformedFile );
+        }
+    });
+  });
+}
+
 gulp.task('css-themes', () => gulp.src(['./css/theme/source/*.{sass,scss}'])
-        .pipe(sass())
+        .pipe(compileSass())
         .pipe(gulp.dest('./dist/theme')))
 
 gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
-    .pipe(sass())
+    .pipe(compileSass())
     .pipe(autoprefixer())
     .pipe(minify({compatibility: 'ie9'}))
     .pipe(header(banner))
@@ -173,7 +197,7 @@ gulp.task('qunit', () => {
     let serverConfig = {
         root,
         port: 8009,
-        host: '0.0.0.0',
+        host: 'localhost',
         name: 'test-server'
     }
 
@@ -245,20 +269,24 @@ gulp.task('default', gulp.series(gulp.parallel('js', 'css', 'plugins'), 'test'))
 
 gulp.task('build', gulp.parallel('js', 'css', 'plugins'))
 
-gulp.task('package', gulp.series('default', () =>
+gulp.task('package', gulp.series(() =>
 
-    gulp.src([
-        './index.html',
-        './dist/**',
-        './lib/**',
-        './images/**',
-        './plugin/**',
-        './**.md'
-    ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
+    gulp.src(
+        [
+            './index.html',
+            './dist/**',
+            './lib/**',
+            './images/**',
+            './plugin/**',
+            './**/*.md'
+        ],
+        { base: './' }
+    )
+    .pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
 
 ))
 
-gulp.task('reload', () => gulp.src(['*.html', '*.md'])
+gulp.task('reload', () => gulp.src(['**/*.html', '**/*.md'])
     .pipe(connect.reload()));
 
 gulp.task('serve', () => {
@@ -266,15 +294,15 @@ gulp.task('serve', () => {
     connect.server({
         root: root,
         port: port,
-        host: '0.0.0.0',
+        host: host,
         livereload: true
     })
 
-    gulp.watch(['*.html', '*.md'], gulp.series('reload'))
+    gulp.watch(['**/*.html', '**/*.md'], gulp.series('reload'))
 
-    gulp.watch(['js/**'], gulp.series('js', 'reload', 'test'))
+    gulp.watch(['js/**'], gulp.series('js', 'reload', 'eslint'))
 
-    gulp.watch(['plugin/**/plugin.js'], gulp.series('plugins', 'reload'))
+    gulp.watch(['plugin/**/plugin.js', 'plugin/**/*.html'], gulp.series('plugins', 'reload'))
 
     gulp.watch([
         'css/theme/source/*.{sass,scss}',
@@ -288,4 +316,4 @@ gulp.task('serve', () => {
 
     gulp.watch(['test/*.html'], gulp.series('test'))
 
-})
+})

index.html

@@ -8,179 +8,15 @@
 
 		<link rel="stylesheet" href="dist/reset.css">
 		<link rel="stylesheet" href="dist/reveal.css">
-		<link rel="stylesheet" href="dist/theme/black.css" id="theme">
+		<link rel="stylesheet" href="dist/theme/black.css">
 
 		<!-- Theme used for syntax highlighted code -->
-		<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
+		<link rel="stylesheet" href="plugin/highlight/monokai.css">
 	</head>
 	<body>
 		<div class="reveal">
 			<div class="slides">
-				<section>皮划艇理论培训课程</section>
-				<section data-markdown>
-					## 快速 QA
-					
-					- 皮划艇运动危险吗
-					- 不会游泳能玩吗
-					- 难不难
-					- 掉进水里怎么办
-				</section>
-				<section>
-					<section>
-						皮划艇（Canoeing）是在划艇（Canoe）划桨前进的水上体育运动。皮划艇活动较窄的定义是以皮划艇为主要活动的运动。皮划艇活动较寛的定义包括和其他活动结合的活动（例如皮划艇露营），或是其他活动中，只以皮划艇来作为移动方式的活动。今日的皮划艇多半属于娱乐或体育活动，或是这些活动的一部分。在欧洲所指的皮划艇（Canoeing）除了包括Canoeing外，也包括了皮艇运动（Kayaking）。
-					</section>
-					<section>
-						皮划艇的前身是早期人类的生存和交通工具，即独木舟。皮划艇是一种前后方向也是尖的船，它的起源是爱斯基摩人的兽皮船。
-					</section>
-					<section>
-						而皮划艇比赛中共分为两类，一类是皮艇（Kayak），另一类是划艇（Canoe），两者都是前后尖的，而皮艇是用双叶桨推动的爱斯基摩式艇；划艇是为加拿大式艇，用单叶桨推动。男子的皮艇和划艇于1936年奥运中被列入正式项目，而女子皮艇则在1948年才成为正式比赛项目之一。直到现时，皮划艇并没有被中止过。 
-					</section>
-					<section>
-						亚奥运项目：皮划艇静水竞速 Canoe sprint、皮划艇激流标竿 Canoe slalom。
-						非亚奥运项目：皮划艇水球 Canoe polo、激流越野 Wildwater canoeing、皮划艇马拉松 Canoe marathon、皮划艇风帆 Canoe sailing、皮划艇激流花式 Canoe freestyle、皮划艇海洋竞速 Canoe ocean racing、泛舟 Rafting、皮划艇冲浪 Waveski。 残奥皮划艇Paracanoe。
-					</section>
-					<section data-auto-animate>
-						<h2 data-id="heading1">现状</h1>
-					</section>
-					<section data-auto-animate>
-						<h2 data-id="heading1">现状</h1>
-						<small>
-							在过去我国皮划艇水平较国际水平来说比较落后，在之前参加的赛事中并没有取得耀眼的成绩。但国家体委在 1987 年发布了《关于发展皮划艇运动、提高运动技术水平十年规划》，这也宣告我国皮划艇运动正式起航。无论在队伍建设还是在训练内容上，都有明显提升。以 1991 年到 1997 年为界限，我国皮划艇运动突飞猛进，尤其是女子皮划艇运动更是发展神速。从之前“默默无闻”到世界亚军，从“无人知晓”到奥运第四。然而自1997 年到 1999 年我国皮划艇运动在世界大赛上的开始成绩逐步下降，我国皮划艇队伍显然已经难以追上世界皮划艇水平的发展。近几年，我国皮划艇运动水平才有些起色，分别在 2004 年雅典奥运会和 2008 年北京奥运会男子 500 米双人皮艇取得金牌。
-						</small>
-					</section>
-				</section>
-				<section>
-					<section data-background-video="videos/e.mp4" data-background-color="#000000">
-					</section>
-				</section>
-				<!-- 下水装备部分 -->
-				<section>
-					<section>
-						<h1>下水装备</h1>
-					</section>
-					<section data-background-iframe="https://www.bing.com/images/search?q=%e6%b0%b4%e6%af%8d%e8%a1%a3&form=HDRSC2&first=1&tsc=ImageHoverTitle">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-							<h2>水母衣/潜水衣</h2>
-						</div>
-					</section>
-					<section data-background-iframe="https://www.bing.com/images/search?q=%E6%BA%AF%E6%BA%AA%E9%9E%8B+%E6%B6%89%E6%B0%B4%E9%9E%8B&go=Search&qs=ds&form=QBIR&first=1&tsc=ImageHoverTitle">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-							<h2>溯溪鞋/涉水鞋</h2>
-						</div>
-					</section>
-					<section>
-						<ul>
-							<li>救生衣、防水哨子（必须）（学校提供）</li>
-							<li>防晒衣、冰袖、百变头巾（可选）</li>
-							<li>防晒霜、毛巾（可选）</li>
-							<li>手机防水袋（可选）</li>
-							<li class="fragment">防水裙（可选）</li>
-						</ul>
-					</section>
-					<section data-background="images/fsq.jpg">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-							可以防止船舱内进水，但翻船水下脱仓时可能会有危险，新手脱仓还不熟练，所以一般不使用
-						</div>
-					</section>
-					<section data-background="images/fsq.jpg">
-						<small style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-							皮艇运动员专用的特殊眼装，又称防浪裙。通常用防水尼龙布制成上下开口的桶式裙，上下两口均有讼紧带，上口紧砸在运动员的腰部，下口紧扣住皮艇座舱的舱口。皮艇运动员坐在舱内划桨时，常有浪花溅人舱内.特别是双人艇或四人艇，前面运动员的划桨出水动作，往往有水花甩向后座。用围裙围住座舱后，即使水花溅向后座，也可以防上舱内积水。在障碍回旋和激流皮艇项目中，围裙更是必备的器材.因为这些项目的运动员在训练和比赛时，翻船是不可避免的。用了防水围裙，皮艇舱内就成了密封舱，即使翻船也不会进水，运动员通过拧腰和压桨等动作，可以将艇翻过来后继续划进。
-						</small>
-					</section>
-				</section>
-				<section>
-					<section data-ba>
-						<h2>划船技巧</h2>
-						<div>
-										下水前一定要先<span class="fragment highlight-red">热身</span>。热身时间至少为5分钟。
-										首先，找最方便的下水点。在入艇前，务必检查一遍所有装备：<span class="fragment highlight-green">检查救生衣</span>。检查皮划艇。再者若使用防水裙，可以先卷起，以免入舱时坐在裙上，防水裙抓手部分位于前面。<span class="fragment highlight-blue">将船桨放置在触手可及的地方</span>。
-						</div>
-					</section>
-					<section data-background="images/cj.jpg">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-							桨的基本结构包含：桨叶、杆、水圈，船桨可拆卸成左右两部分。水圈的作用是防止举起桨时，水从桨叶倒流到船舱。
-						</div>
-					</section>
-					<section data-background="images/qj.jpg">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;">
-										简单总结：放桨、入水、划、出水。
-										<br />
-										直划时右桨往右前方伸出 ，入水，沿船身往后拉回至大约在臀部后拉出水面， 然后把左桨往左前方伸出，入水，沿船身往后拉回至大约在臀部后拉出水面，如此反复的双边划水。
-						</div>
-					</section>
-					<section>
-						<ul>
-							<li class="fragment">后划</li>
-							<li class="fragment">转向</li>
-							<li class="fragment">急停</li>
-						</ul>
-					</section>
-					<section data-background="images/xt.jpg">
-						<div style="background-color: rgba(0,0,0,0.6); padding: 5%;" class="fragment fade-in-then-out">
-							<h3>安全落艇</h3>
-							将皮划艇慢慢划入港湾，停稳后，先放好桨，然后撑着艇身，弯起膝盖，保持重心和平衡，慢慢起身。一只手抓住岸上固定物，一只脚重心放在皮划艇的中心线，一只脚踏上岸，重心慢移，就可上岸。
-							<br />
-							或者是一只手抓住岸上固定物，把屁股坐到码头上，接着就把脚挪出来，安全上岸。
-						</div>
-					</section>
-					<section>
-						<div>
-							要是不满足于简单的划艇的朋友，还可以学习更多知识和技巧，如 8字划行；低位、高位压水平衡、压水转向；侧倾转弯；摇橹横划、拨水横划；艇首复位；侧倾立刃；湿逃脱（穿防水裙完成水下脱艇）；T字救援X型H HI型及水中入艇
-						</div>
-					</section>
-				</section>
-				<!-- 安全措施 -->
-				<section>
-					<section data-markdown>
-								- 正确穿戴救生衣，佩戴防水哨子，穿着适合水上运动的服装。
-								- 出航前检查船艇的浮力装置。
-								- 出航前做好热身准备。
-								- 尽量避免做危险动作，例如站立和打闹。
-								- 出海前必须关注天气情况。雷雨天气尽快回到岸上，避免自己成为水面上最高的一点，以免遭到雷击，避免单人出行。
-					</section>
-					<section data-markdown>
-								- 遇到翻船或落水的情况，千万不要惊慌，落水后可以抱住船身并抓住船桨，慢慢划到岸边或者尝试自行/在他人帮助下回到船上。如果您不得不拖着皮划艇游泳，那么最好是让皮划艇底部朝上。这样一来舱内的空气使皮划艇难以沉没，而且浪也不会再往舱中灌水。不管什么原因，如果同时丢失了船和桨，那么先去抓船，然后再去找桨。应该风浪更容易带走皮划艇，而桨可能还在原处。
-					</section>
-					<section data-markdown>
-								- 失去平衡而掉进水里的潜在危害是撞伤，尽量避免在潜水区做危险动作，翻船后冷静应对。
-								- 阳光强烈的日子，最好事先涂上防晒霜，避免晒伤。
-								- 出海记得带上淡水和其他必要的装备。
-								- 与其他艇只相遇时，应留意双方的航向会否构成艇只相撞。若未能判断是否安全，应假设可能碰撞来处理。
-					</section>
-					<section data-markdown>
-									### 落水处理方法
-
-									如果落水，视情况可以采取不同对应措施：
-
-									- 如果离岸较近，可以依靠救生衣和船身的浮力，缓慢游到岸边，重新入艇
-									- 如果离岸较远，可以考虑独立或在他人帮助下在水中入艇，水中入艇技巧包括T字救援法等
-									- 如果船舱内有过量的水，除非有工具，自行清理船舱内水较为困难；可以呼叫他人帮忙倾倒船舱内的水
-									- 如果落水后船和桨离得较远，应先抓出船，再寻找桨
-					</section>
-					<section data-markdown>
-									### 水上遇事求救方法
-									
-									水上发出信号最常用的是哨子，如果哨子遗失也可以通过敲打船身等方式发出声音求救。
-
-									- 在海上遇事需要救援时，应保持镇静，尽可能在艇上以双臂在身体两侧缓慢地重覆上下摆动。
-									
-									![help](images/help.png)
-					</section>
-					<section data-markdown>
-									- 若未能返回艇上，可以单手扶持艇身作浮力支援，把桨垂直与水面高高竖起（或者另一手臂尽量伸直高举于水面，手掌握拳示）意要求救援。因此平时不要将桨垂直竖起，以免他人误解您需要帮助。
-									- 若身上配备防水哨子，可同时发出以手号及哨子声响来吸引注意，示意需要救援。
-									- 若没有其他器具可以发出声响，应即时呼叫或拍打船身示意。
-									- 若看见有人发出这些信号，请你向救援人员示意或在安全情况下尽量提供协助。
-					</section>
-				</section>
-				<section>
-					<section data-background-video="videos/fc.mp4" data-background-color="#000000">
-					</section>
-				</section>
-				<section>
-								<h1>DONE !</h1>
-								<small>thanks</small>
-				</section>
+				<section data-markdown="leetcode-20230110.md"></section>
 			</div>
 		</div>
 
@@ -193,6 +29,8 @@
 			// - https://revealjs.com/initialization/
 			// - https://revealjs.com/config/
 			Reveal.initialize({
+				width: 1000,
+				height: 1000,
 				hash: true,
 
 				// Learn about plugins: https://revealjs.com/plugins/

js/config.js

@@ -73,8 +73,8 @@ export default {
 
 	// Optional function that blocks keyboard events when retuning false
 	//
-	// If you set this to 'foucsed', we will only capture keyboard events
-	// for embdedded decks when they are in focus
+	// If you set this to 'focused', we will only capture keyboard events
+	// for embedded decks when they are in focus
 	keyboardCondition: null,
 
 	// Disables the default reveal.js slide layout (scaling and centering)
@@ -149,7 +149,7 @@ export default {
 	// Flags if slides with data-visibility="hidden" should be kep visible
 	showHiddenSlides: false,
 
-	// Global override for autolaying embedded media (video/audio/iframe)
+	// Global override for autoplaying embedded media (video/audio/iframe)
 	// - null:   Media will only autoplay if data-autoplay is present
 	// - true:   All media will autoplay, regardless of individual setting
 	// - false:  No media will autoplay, regardless of individual setting

js/controllers/autoanimate.js

@@ -27,8 +27,16 @@ export default class AutoAnimate {
 		// Clean up after prior animations
 		this.reset();
 
-		// Ensure that both slides are auto-animate targets
-		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' ) ) {
+		let allSlides = this.Reveal.getSlides();
+		let toSlideIndex = allSlides.indexOf( toSlide );
+		let fromSlideIndex = allSlides.indexOf( fromSlide );
+
+		// Ensure that both slides are auto-animate targets with the same data-auto-animate-id value
+		// (including null if absent on both) and that data-auto-animate-restart isn't set on the
+		// physically latter slide (independent of slide direction)
+		if( fromSlide.hasAttribute( 'data-auto-animate' ) && toSlide.hasAttribute( 'data-auto-animate' )
+				&& fromSlide.getAttribute( 'data-auto-animate-id' ) === toSlide.getAttribute( 'data-auto-animate-id' ) 
+				&& !( toSlideIndex > fromSlideIndex ? toSlide : fromSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
 
 			// Create a new auto-animate sheet
 			this.autoAnimateStyleSheet = this.autoAnimateStyleSheet || createStyleSheet();
@@ -40,14 +48,21 @@ export default class AutoAnimate {
 			toSlide.dataset.autoAnimate = 'pending';
 
 			// Flag the navigation direction, needed for fragment buildup
-			let allSlides = this.Reveal.getSlides();
-			animationOptions.slideDirection = allSlides.indexOf( toSlide ) > allSlides.indexOf( fromSlide ) ? 'forward' : 'backward';
+			animationOptions.slideDirection = toSlideIndex > fromSlideIndex ? 'forward' : 'backward';
+
+			// If the from-slide is hidden because it has moved outside
+			// the view distance, we need to temporarily show it while
+			// measuring
+			let fromSlideIsHidden = fromSlide.style.display === 'none';
+			if( fromSlideIsHidden ) fromSlide.style.display = this.Reveal.getConfig().display;
 
 			// Inject our auto-animate styles for this transition
 			let css = this.getAutoAnimatableElements( fromSlide, toSlide ).map( elements => {
 				return this.autoAnimateElements( elements.from, elements.to, elements.options || {}, animationOptions, autoAnimateCounter++ );
 			} );
 
+			if( fromSlideIsHidden ) fromSlide.style.display = 'none';
+
 			// Animate unmatched elements, if enabled
 			if( toSlide.dataset.autoAnimateUnmatched !== 'false' && this.Reveal.getConfig().autoAnimateUnmatched === true ) {
 
@@ -384,7 +399,14 @@ export default class AutoAnimate {
 				value = { value: style.to, explicitValue: true };
 			}
 			else {
-				value = computedStyles[style.property];
+				// Use a unitless value for line-height so that it inherits properly
+				if( style.property === 'line-height' ) {
+					value = parseFloat( computedStyles['line-height'] ) / parseFloat( computedStyles['font-size'] );
+				}
+
+				if( isNaN(value) ) {
+					value = computedStyles[style.property];
+				}
 			}
 
 			if( value !== '' ) {
@@ -460,7 +482,6 @@ export default class AutoAnimate {
 		} );
 
 		pairs.forEach( pair => {
-
 			// Disable scale transformations on text nodes, we transition
 			// each individual text property instead
 			if( matches( pair.from, textNodes ) ) {

js/controllers/backgrounds.js

@@ -27,8 +27,6 @@ export default class Backgrounds {
 	 */
 	create() {
 
-		let printMode = this.Reveal.isPrintingPDF();
-
 		// Clear prior backgrounds
 		this.element.innerHTML = '';
 		this.element.classList.add( 'no-transition' );
@@ -114,9 +112,25 @@ export default class Backgrounds {
 	 */
 	sync( slide ) {
 
-		let element = slide.slideBackgroundElement,
+		const element = slide.slideBackgroundElement,
 			contentElement = slide.slideBackgroundContentElement;
 
+		const data = {
+			background: slide.getAttribute( 'data-background' ),
+			backgroundSize: slide.getAttribute( 'data-background-size' ),
+			backgroundImage: slide.getAttribute( 'data-background-image' ),
+			backgroundVideo: slide.getAttribute( 'data-background-video' ),
+			backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
+			backgroundColor: slide.getAttribute( 'data-background-color' ),
+			backgroundGradient: slide.getAttribute( 'data-background-gradient' ),
+			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
+			backgroundPosition: slide.getAttribute( 'data-background-position' ),
+			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
+			backgroundOpacity: slide.getAttribute( 'data-background-opacity' ),
+		};
+
+		const dataPreload = slide.hasAttribute( 'data-preload' );
+
 		// Reset the prior background state in case this is not the
 		// initial sync
 		slide.classList.remove( 'has-dark-background' );
@@ -135,22 +149,9 @@ export default class Backgrounds {
 		contentElement.style.opacity = '';
 		contentElement.innerHTML = '';
 
-		let data = {
-			background: slide.getAttribute( 'data-background' ),
-			backgroundSize: slide.getAttribute( 'data-background-size' ),
-			backgroundImage: slide.getAttribute( 'data-background-image' ),
-			backgroundVideo: slide.getAttribute( 'data-background-video' ),
-			backgroundIframe: slide.getAttribute( 'data-background-iframe' ),
-			backgroundColor: slide.getAttribute( 'data-background-color' ),
-			backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
-			backgroundPosition: slide.getAttribute( 'data-background-position' ),
-			backgroundTransition: slide.getAttribute( 'data-background-transition' ),
-			backgroundOpacity: slide.getAttribute( 'data-background-opacity' )
-		};
-
 		if( data.background ) {
 			// Auto-wrap image urls in url(...)
-			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp)([?#\s]|$)/gi.test( data.background ) ) {
+			if( /^(http|file|\/\/)/gi.test( data.background ) || /\.(svg|png|jpg|jpeg|gif|bmp|webp)([?#\s]|$)/gi.test( data.background ) ) {
 				slide.setAttribute( 'data-background-image', data.background );
 			}
 			else {
@@ -161,13 +162,14 @@ export default class Backgrounds {
 		// Create a hash for this combination of background settings.
 		// This is used to determine when two slide backgrounds are
 		// the same.
-		if( data.background || data.backgroundColor || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
+		if( data.background || data.backgroundColor || data.backgroundGradient || data.backgroundImage || data.backgroundVideo || data.backgroundIframe ) {
 			element.setAttribute( 'data-background-hash', data.background +
 															data.backgroundSize +
 															data.backgroundImage +
 															data.backgroundVideo +
 															data.backgroundIframe +
 															data.backgroundColor +
+															data.backgroundGradient +
 															data.backgroundRepeat +
 															data.backgroundPosition +
 															data.backgroundTransition +
@@ -177,9 +179,10 @@ export default class Backgrounds {
 		// Additional and optional background properties
 		if( data.backgroundSize ) element.setAttribute( 'data-background-size', data.backgroundSize );
 		if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
+		if( data.backgroundGradient ) element.style.backgroundImage = data.backgroundGradient;
 		if( data.backgroundTransition ) element.setAttribute( 'data-background-transition', data.backgroundTransition );
 
-		if( slide.hasAttribute( 'data-preload' ) ) element.setAttribute( 'data-preload', '' );
+		if( dataPreload ) element.setAttribute( 'data-preload', '' );
 
 		// Background image options are set on the content wrapper
 		if( data.backgroundSize ) contentElement.style.backgroundSize = data.backgroundSize;
@@ -192,8 +195,8 @@ export default class Backgrounds {
 		// color, no class will be added
 		let contrastColor = data.backgroundColor;
 
-		// If no bg color was found, check the computed background
-		if( !contrastColor ) {
+		// If no bg color was found, or it cannot be converted by colorToRgb, check the computed background
+		if( !contrastColor || !colorToRgb( contrastColor ) ) {
 			let computedBackgroundStyle = window.getComputedStyle( element );
 			if( computedBackgroundStyle && computedBackgroundStyle.backgroundColor ) {
 				contrastColor = computedBackgroundStyle.backgroundColor;
@@ -201,7 +204,7 @@ export default class Backgrounds {
 		}
 
 		if( contrastColor ) {
-			let rgb = colorToRgb( contrastColor );
+			const rgb = colorToRgb( contrastColor );
 
 			// Ignore fully transparent backgrounds. Some browsers return
 			// rgba(0,0,0,0) when reading the computed background color of
@@ -394,4 +397,10 @@ export default class Backgrounds {
 
 	}
 
-}
+	destroy() {
+
+		this.element.remove();
+
+	}
+
+}

js/controllers/controls.js

@@ -188,6 +188,13 @@ export default class Controls {
 		}
 	}
 
+	destroy() {
+
+		this.unbind();
+		this.element.remove();
+
+	}
+
 	/**
 	 * Event handlers for navigation control buttons.
 	 */

js/controllers/focus.js

@@ -79,6 +79,12 @@ export default class Focus {
 
 	}
 
+	destroy() {
+
+		this.Reveal.getRevealElement().classList.remove( 'focused' );
+
+	}
+
 	onRevealPointerDown( event ) {
 
 		this.focus();

js/controllers/fragments.js

@@ -235,6 +235,7 @@ export default class Fragments {
 						el.classList.remove( 'current-fragment' );
 
 						if( wasVisible ) {
+							this.Reveal.slideContent.stopEmbeddedContent( el );
 							changedFragments.hidden.push( el );
 							this.Reveal.dispatchEvent({
 								target: el,

js/controllers/keyboard.js

@@ -32,15 +32,15 @@ export default class Keyboard {
 		}
 		else {
 			this.shortcuts['N  ,  SPACE']   = 'Next slide';
-			this.shortcuts['P']             = 'Previous slide';
+			this.shortcuts['P  ,  Shift SPACE']             = 'Previous slide';
 			this.shortcuts['←  ,  H'] = 'Navigate left';
 			this.shortcuts['→  ,  L'] = 'Navigate right';
 			this.shortcuts['↑  ,  K'] = 'Navigate up';
 			this.shortcuts['↓  ,  J'] = 'Navigate down';
 		}
 
-		this.shortcuts['Home  ,  Shift ←']        = 'First slide';
-		this.shortcuts['End  ,  Shift →']         = 'Last slide';
+		this.shortcuts['Alt + ←/&#8593/→/↓']        = 'Navigate without fragments';
+		this.shortcuts['Shift + ←/&#8593/→/↓']      = 'Jump to first/last slide';
 		this.shortcuts['B  ,  .']                       = 'Pause';
 		this.shortcuts['F']                             = 'Fullscreen';
 		this.shortcuts['ESC, O']                        = 'Slide overview';
@@ -182,13 +182,11 @@ export default class Keyboard {
 		let activeElementIsInput = document.activeElement && document.activeElement.tagName && /input|textarea/i.test( document.activeElement.tagName );
 		let activeElementIsNotes = document.activeElement && document.activeElement.className && /speaker-notes/i.test( document.activeElement.className);
 
-		// Whitelist specific modified + keycode combinations
-		let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
-		let firstSlideShortcut = event.shiftKey && keyCode === 37;
-		let lastSlideShortcut = event.shiftKey && keyCode === 39;
+		// Whitelist certain modifiers for slide navigation shortcuts
+		let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
 
 		// Prevent all other events when a modifier is pressed
-		let unusedModifier = 	!prevSlideShortcut && !firstSlideShortcut && !lastSlideShortcut &&
+		let unusedModifier = 	!( isNavigationKey && event.shiftKey || event.altKey ) &&
 								( event.shiftKey || event.altKey || event.ctrlKey || event.metaKey );
 
 		// Disregard the event if there's a focused element or a
@@ -277,52 +275,58 @@ export default class Keyboard {
 
 			// P, PAGE UP
 			if( keyCode === 80 || keyCode === 33 ) {
-				this.Reveal.prev();
+				this.Reveal.prev({skipFragments: event.altKey});
 			}
 			// N, PAGE DOWN
 			else if( keyCode === 78 || keyCode === 34 ) {
-				this.Reveal.next();
+				this.Reveal.next({skipFragments: event.altKey});
 			}
 			// H, LEFT
 			else if( keyCode === 72 || keyCode === 37 ) {
-				if( firstSlideShortcut ) {
+				if( event.shiftKey ) {
 					this.Reveal.slide( 0 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev();
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.left();
+					this.Reveal.left({skipFragments: event.altKey});
 				}
 			}
 			// L, RIGHT
 			else if( keyCode === 76 || keyCode === 39 ) {
-				if( lastSlideShortcut ) {
-					this.Reveal.slide( Number.MAX_VALUE );
+				if( event.shiftKey ) {
+					this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
 				}
 				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next();
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.right();
+					this.Reveal.right({skipFragments: event.altKey});
 				}
 			}
 			// K, UP
 			else if( keyCode === 75 || keyCode === 38 ) {
-				if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.prev();
+				if( event.shiftKey ) {
+					this.Reveal.slide( undefined, 0 );
+				}
+				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.up();
+					this.Reveal.up({skipFragments: event.altKey});
 				}
 			}
 			// J, DOWN
 			else if( keyCode === 74 || keyCode === 40 ) {
-				if( !this.Reveal.overview.isActive() && useLinearMode ) {
-					this.Reveal.next();
+				if( event.shiftKey ) {
+					this.Reveal.slide( undefined, Number.MAX_VALUE );
+				}
+				else if( !this.Reveal.overview.isActive() && useLinearMode ) {
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.down();
+					this.Reveal.down({skipFragments: event.altKey});
 				}
 			}
 			// HOME
@@ -331,7 +335,7 @@ export default class Keyboard {
 			}
 			// END
 			else if( keyCode === 35 ) {
-				this.Reveal.slide( Number.MAX_VALUE );
+				this.Reveal.slide( this.Reveal.getHorizontalSlides().length - 1 );
 			}
 			// SPACE
 			else if( keyCode === 32 ) {
@@ -339,10 +343,10 @@ export default class Keyboard {
 					this.Reveal.overview.deactivate();
 				}
 				if( event.shiftKey ) {
-					this.Reveal.prev();
+					this.Reveal.prev({skipFragments: event.altKey});
 				}
 				else {
-					this.Reveal.next();
+					this.Reveal.next({skipFragments: event.altKey});
 				}
 			}
 			// TWO-SPOT, SEMICOLON, B, V, PERIOD, LOGITECH PRESENTER TOOLS "BLACK SCREEN" BUTTON

js/controllers/location.js

@@ -3,6 +3,10 @@
  */
 export default class Location {
 
+	// The minimum number of milliseconds that must pass between
+	// calls to history.replaceState
+	MAX_REPLACE_STATE_FREQUENCY = 1000
+
 	constructor( Reveal ) {
 
 		this.Reveal = Reveal;
@@ -10,6 +14,8 @@ export default class Location {
 		// Delays updates to the URL due to a Chrome thumbnailer bug
 		this.writeURLTimeout = 0;
 
+		this.replaceStateTimestamp = 0;
+
 		this.onWindowHashChange = this.onWindowHashChange.bind( this );
 
 	}
@@ -27,19 +33,18 @@ export default class Location {
 	}
 
 	/**
-	 * Reads the current URL (hash) and navigates accordingly.
+	 * Returns the slide indices for the given hash link.
+	 *
+	 * @param {string} [hash] the hash string that we want to
+	 * find the indices for
+	 *
+	 * @returns slide indices or null
 	 */
-	readURL() {
-
-		let config = this.Reveal.getConfig();
-		let indices = this.Reveal.getIndices();
-		let currentSlide = this.Reveal.getCurrentSlide();
-
-		let hash = window.location.hash;
+	getIndicesFromHash( hash=window.location.hash ) {
 
 		// Attempt to parse the hash as either an index or name
-		let bits = hash.slice( 2 ).split( '/' ),
-			name = hash.replace( /#\/?/gi, '' );
+		let name = hash.replace( /^#\/?/, '' );
+		let bits = name.split( '/' );
 
 		// If the first bit is not fully numeric and there is a name we
 		// can assume that this is a named link
@@ -61,23 +66,12 @@ export default class Location {
 			}
 			catch ( error ) { }
 
-			// Ensure that we're not already on a slide with the same name
-			let isSameNameAsCurrentSlide = currentSlide ? currentSlide.getAttribute( 'id' ) === name : false;
-
 			if( element ) {
-				// If the slide exists and is not the current slide...
-				if ( !isSameNameAsCurrentSlide || typeof f !== 'undefined' ) {
-					// ...find the position of the named slide and navigate to it
-					let slideIndices = this.Reveal.getIndices( element );
-					this.Reveal.slide( slideIndices.h, slideIndices.v, f );
-				}
-			}
-			// If the slide doesn't exist, navigate to the current slide
-			else {
-				this.Reveal.slide( indices.h || 0, indices.v || 0 );
+				return { ...this.Reveal.getIndices( element ), f };
 			}
 		}
 		else {
+			const config = this.Reveal.getConfig();
 			let hashIndexBase = config.hashOneBasedIndex ? 1 : 0;
 
 			// Read the index components of the hash
@@ -92,10 +86,32 @@ export default class Location {
 				}
 			}
 
-			if( h !== indices.h || v !== indices.v || f !== undefined ) {
-				this.Reveal.slide( h, v, f );
+			return { h, v, f };
+		}
+
+		// The hash couldn't be parsed or no matching named link was found
+		return null
+
+	}
+
+	/**
+	 * Reads the current URL (hash) and navigates accordingly.
+	 */
+	readURL() {
+
+		const currentIndices = this.Reveal.getIndices();
+		const newIndices = this.getIndicesFromHash();
+
+		if( newIndices ) {
+			if( ( newIndices.h !== currentIndices.h || newIndices.v !== currentIndices.v || newIndices.f !== undefined ) ) {
+					this.Reveal.slide( newIndices.h, newIndices.v, newIndices.f );
 			}
 		}
+		// If no new indices are available, we're trying to navigate to
+		// a slide hash that does not exist
+		else {
+			this.Reveal.slide( currentIndices.h || 0, currentIndices.v || 0 );
+		}
 
 	}
 
@@ -132,10 +148,10 @@ export default class Location {
 			else if( config.hash ) {
 				// If the hash is empty, don't add it to the URL
 				if( hash === '/' ) {
-					window.history.replaceState( null, null, window.location.pathname + window.location.search );
+					this.debouncedReplaceState( window.location.pathname + window.location.search );
 				}
 				else {
-					window.history.replaceState( null, null, '#' + hash );
+					this.debouncedReplaceState( '#' + hash );
 				}
 			}
 			// UPDATE: The below nuking of all hash changes breaks
@@ -153,6 +169,26 @@ export default class Location {
 
 	}
 
+	replaceState( url ) {
+
+		window.history.replaceState( null, null, url );
+		this.replaceStateTimestamp = Date.now();
+
+	}
+
+	debouncedReplaceState( url ) {
+
+		clearTimeout( this.replaceStateTimeout );
+
+		if( Date.now() - this.replaceStateTimestamp > this.MAX_REPLACE_STATE_FREQUENCY ) {
+			this.replaceState( url );
+		}
+		else {
+			this.replaceStateTimeout = setTimeout( () => this.replaceState( url ), this.MAX_REPLACE_STATE_FREQUENCY );
+		}
+
+	}
+
 	/**
 	 * Return a hash URL that will resolve to the given slide location.
 	 *

js/controllers/notes.js

@@ -1,5 +1,5 @@
 /**
- * Handles the showing and 
+ * Handles the showing of speaker notes
  */
 export default class Notes {
 
@@ -89,7 +89,7 @@ export default class Notes {
 	 * Retrieves the speaker notes from a slide. Notes can be
 	 * defined in two ways:
 	 * 1. As a data-notes attribute on the slide <section>
-	 * 2. As an <aside class="notes"> inside of the slide
+	 * 2. With <aside class="notes"> elements inside the slide
 	 *
 	 * @param {HTMLElement} [slide=currentSlide]
 	 * @return {(string|null)}
@@ -101,14 +101,20 @@ export default class Notes {
 			return slide.getAttribute( 'data-notes' );
 		}
 
-		// ... or using an <aside class="notes"> element
-		let notesElement = slide.querySelector( 'aside.notes' );
-		if( notesElement ) {
-			return notesElement.innerHTML;
+		// ... or using <aside class="notes"> elements
+		let notesElements = slide.querySelectorAll( 'aside.notes' );
+		if( notesElements ) {
+			return Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
 		}
 
 		return null;
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
+
 }

js/controllers/plugins.js

@@ -238,4 +238,17 @@ export default class Plugins {
 
 	}
 
+	destroy() {
+
+		Object.values( this.registeredPlugins ).forEach( plugin => {
+			if( typeof plugin.destroy === 'function' ) {
+				plugin.destroy();
+			}
+		} );
+
+		this.registeredPlugins = {};
+		this.asyncDependencies = [];
+
+	}
+
 }

js/controllers/pointer.js

@@ -75,6 +75,17 @@ export default class Pointer {
 
 	}
 
+	destroy() {
+
+		this.showCursor();
+
+		document.removeEventListener( 'DOMMouseScroll', this.onDocumentMouseScroll, false );
+		document.removeEventListener( 'mousewheel', this.onDocumentMouseScroll, false );
+		document.removeEventListener( 'mousemove', this.onDocumentCursorActive, false );
+		document.removeEventListener( 'mousedown', this.onDocumentCursorActive, false );
+
+	}
+
 	/**
 	 * Called whenever there is mouse input at the document level
 	 * to determine if the cursor is active or not.

js/controllers/print.js

@@ -16,20 +16,26 @@ export default class Print {
 	 * Configures the presentation for printing to a static
 	 * PDF.
 	 */
-	setupPDF() {
+	async setupPDF() {
 
-		let config = this.Reveal.getConfig();
+		const config = this.Reveal.getConfig();
+		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
 
-		let slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
+		// Compute slide numbers now, before we start duplicating slides
+		const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+
+		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
 
 		// Dimensions of the PDF pages
-		let pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
+		const pageWidth = Math.floor( slideSize.width * ( 1 + config.margin ) ),
 			pageHeight = Math.floor( slideSize.height * ( 1 + config.margin ) );
 
 		// Dimensions of slides within the pages
-		let slideWidth = slideSize.width,
+		const slideWidth = slideSize.width,
 			slideHeight = slideSize.height;
 
+		await new Promise( requestAnimationFrame );
+
 		// Let the browser know what page size we want to print
 		createStyleSheet( '@page{size:'+ pageWidth +'px '+ pageHeight +'px; margin: 0px;}' );
 
@@ -40,26 +46,39 @@ export default class Print {
 		document.body.style.width = pageWidth + 'px';
 		document.body.style.height = pageHeight + 'px';
 
+		const viewportElement = document.querySelector( '.reveal-viewport' );
+		let presentationBackground;
+		if( viewportElement ) {
+			const viewportStyles = window.getComputedStyle( viewportElement );
+			if( viewportStyles && viewportStyles.background ) {
+				presentationBackground = viewportStyles.background;
+			}
+		}
+
 		// Make sure stretch elements fit on slide
+		await new Promise( requestAnimationFrame );
 		this.Reveal.layoutSlideContents( slideWidth, slideHeight );
 
-		// Compute slide numbers now, before we start duplicating slides
-		let doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
-		queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
-			slide.setAttribute( 'data-slide-number', this.Reveal.slideNumber.getSlideNumber( slide ) );
-		}, this );
+		// Batch scrollHeight access to prevent layout thrashing
+		await new Promise( requestAnimationFrame );
+
+		const slideScrollHeights = slides.map( slide => slide.scrollHeight );
+
+		const pages = [];
+		const pageContainer = slides[0].parentNode;
+		let slideNumber = 1;
 
 		// Slide and slide background layout
-		queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR ).forEach( function( slide ) {
+		slides.forEach( function( slide, index ) {
 
 			// Vertical stacks are not centred since their section
 			// children will be
 			if( slide.classList.contains( 'stack' ) === false ) {
 				// Center the slide inside of the page, giving the slide some margin
-				let left = ( pageWidth - slideWidth ) / 2,
-					top = ( pageHeight - slideHeight ) / 2;
+				let left = ( pageWidth - slideWidth ) / 2;
+				let top = ( pageHeight - slideHeight ) / 2;
 
-				let contentHeight = slide.scrollHeight;
+				const contentHeight = slideScrollHeights[ index ];
 				let numberOfPages = Math.max( Math.ceil( contentHeight / pageHeight ), 1 );
 
 				// Adhere to configured pages per slide limit
@@ -72,10 +91,18 @@ export default class Print {
 
 				// Wrap the slide in a page element and hide its overflow
 				// so that no page ever flows onto another
-				let page = document.createElement( 'div' );
+				const page = document.createElement( 'div' );
+				pages.push( page );
+
 				page.className = 'pdf-page';
 				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
-				slide.parentNode.insertBefore( page, slide );
+
+				// Copy the presentation-wide background to each individual
+				// page when printing
+				if( presentationBackground ) {
+					page.style.background = presentationBackground;
+				}
+
 				page.appendChild( slide );
 
 				// Position the slide inside of the page
@@ -83,6 +110,8 @@ export default class Print {
 				slide.style.top = top + 'px';
 				slide.style.width = slideWidth + 'px';
 
+				this.Reveal.slideContent.layout( slide );
+
 				if( slide.slideBackgroundElement ) {
 					page.insertBefore( slide.slideBackgroundElement, slide );
 				}
@@ -91,19 +120,19 @@ export default class Print {
 				if( config.showNotes ) {
 
 					// Are there notes for this slide?
-					let notes = this.Reveal.getSlideNotes( slide );
+					const notes = this.Reveal.getSlideNotes( slide );
 					if( notes ) {
 
-						let notesSpacing = 8;
-						let notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
-						let notesElement = document.createElement( 'div' );
+						const notesSpacing = 8;
+						const notesLayout = typeof config.showNotes === 'string' ? config.showNotes : 'inline';
+						const notesElement = document.createElement( 'div' );
 						notesElement.classList.add( 'speaker-notes' );
 						notesElement.classList.add( 'speaker-notes-pdf' );
 						notesElement.setAttribute( 'data-layout', notesLayout );
 						notesElement.innerHTML = notes;
 
 						if( notesLayout === 'separate-page' ) {
-							page.parentNode.insertBefore( notesElement, page.nextSibling );
+							pages.push( notesElement );
 						}
 						else {
 							notesElement.style.left = notesSpacing + 'px';
@@ -116,12 +145,12 @@ export default class Print {
 
 				}
 
-				// Inject slide numbers if `slideNumbers` are enabled
-				if( doingSlideNumbers ) {
-					let numberElement = document.createElement( 'div' );
+				// Inject page numbers if `slideNumbers` are enabled
+				if( injectPageNumbers ) {
+					const numberElement = document.createElement( 'div' );
 					numberElement.classList.add( 'slide-number' );
 					numberElement.classList.add( 'slide-number-pdf' );
-					numberElement.innerHTML = slide.getAttribute( 'data-slide-number' );
+					numberElement.innerHTML = slideNumber++;
 					page.appendChild( numberElement );
 				}
 
@@ -131,12 +160,11 @@ export default class Print {
 					// Each fragment 'group' is an array containing one or more
 					// fragments. Multiple fragments that appear at the same time
 					// are part of the same group.
-					let fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
+					const fragmentGroups = this.Reveal.fragments.sort( page.querySelectorAll( '.fragment' ), true );
 
 					let previousFragmentStep;
-					let previousPage;
 
-					fragmentGroups.forEach( function( fragments ) {
+					fragmentGroups.forEach( function( fragments, index ) {
 
 						// Remove 'current-fragment' from the previous group
 						if( previousFragmentStep ) {
@@ -151,11 +179,18 @@ export default class Print {
 						}, this );
 
 						// Create a separate page for the current fragment state
-						let clonedPage = page.cloneNode( true );
-						page.parentNode.insertBefore( clonedPage, ( previousPage || page ).nextSibling );
+						const clonedPage = page.cloneNode( true );
+
+						// Inject unique page numbers for fragments
+						if( injectPageNumbers ) {
+							const numberElement = clonedPage.querySelector( '.slide-number-pdf' );
+							const fragmentNumber = index + 1;
+							numberElement.innerHTML += '.' + fragmentNumber;
+						}
+
+						pages.push( clonedPage );
 
 						previousFragmentStep = fragments;
-						previousPage = clonedPage;
 
 					}, this );
 
@@ -178,6 +213,13 @@ export default class Print {
 
 		}, this );
 
+		await new Promise( requestAnimationFrame );
+
+		pages.forEach( page => pageContainer.appendChild( page ) );
+
+		// Re-run JS-based content layout after the slide is added to page DOM
+		this.Reveal.slideContent.layout( this.Reveal.getSlidesElement() );
+
 		// Notify subscribers that the PDF layout is good to go
 		this.Reveal.dispatchEvent({ type: 'pdf-ready' });
 
@@ -192,4 +234,4 @@ export default class Print {
 
 	}
 
-}
+}

js/controllers/progress.js

@@ -88,16 +88,23 @@ export default class Progress {
 
 		event.preventDefault();
 
-		let slidesTotal = this.Reveal.getHorizontalSlides().length;
+		let slides = this.Reveal.getSlides();
+		let slidesTotal = slides.length;
 		let slideIndex = Math.floor( ( event.clientX / this.getMaxWidth() ) * slidesTotal );
 
 		if( this.Reveal.getConfig().rtl ) {
 			slideIndex = slidesTotal - slideIndex;
 		}
 
-		this.Reveal.slide( slideIndex );
+		let targetIndices = this.Reveal.getIndices(slides[slideIndex]);
+		this.Reveal.slide( targetIndices.h, targetIndices.v );
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
 
 }

js/controllers/slidecontent.js

@@ -1,5 +1,4 @@
-import { HORIZONTAL_SLIDES_SELECTOR, VERTICAL_SLIDES_SELECTOR } from '../utils/constants.js'
-import { extend, queryAll, closest } from '../utils/util.js'
+import { extend, queryAll, closest, getMimeTypeFromFile } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
 import fitty from 'fitty';
@@ -102,7 +101,16 @@ export default class SlideContent {
 
 				// Images
 				if( backgroundImage ) {
-					backgroundContent.style.backgroundImage = 'url('+ encodeURI( backgroundImage ) +')';
+					// base64
+					if(  /^data:/.test( backgroundImage.trim() ) ) {
+						backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
+					}
+					// URL(s)
+					else {
+						backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
+							return `url(${encodeURI(background.trim())})`;
+						}).join( ',' );
+					}
 				}
 				// Videos
 				else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {
@@ -128,7 +136,13 @@ export default class SlideContent {
 
 					// Support comma separated lists of video sources
 					backgroundVideo.split( ',' ).forEach( source => {
-						video.innerHTML += '<source src="'+ source +'">';
+						let type = getMimeTypeFromFile( source );
+						if( type ) {
+							video.innerHTML += `<source src="${source}" type="${type}">`;
+						}
+						else {
+							video.innerHTML += `<source src="${source}">`;
+						}
 					} );
 
 					backgroundContent.appendChild( video );
@@ -167,11 +181,19 @@ export default class SlideContent {
 
 		}
 
+		this.layout( slide );
+
+	}
+
+	/**
+	 * Applies JS-dependent layout helpers for the scope.
+	 */
+	layout( scopeElement ) {
+
 		// Autosize text with the r-fit-text class based on the
 		// size of its container. This needs to happen after the
 		// slide is visible in order to measure the text.
-		Array.from( slide.querySelectorAll( '.r-fit-text:not([data-fitted])' ) ).forEach( element => {
-			element.dataset.fitted = '';
+		Array.from( scopeElement.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
 			fitty( element, {
 				minSize: 24,
 				maxSize: this.Reveal.getConfig().height * 0.8,
@@ -453,4 +475,4 @@ export default class SlideContent {
 
 	}
 
-}
+}

js/controllers/slidenumber.js

@@ -123,4 +123,10 @@ export default class SlideNumber {
 
 	}
 
+	destroy() {
+
+		this.element.remove();
+
+	}
+
 }

js/controllers/touch.js

@@ -1,4 +1,5 @@
 import { isAndroid } from '../utils/device.js'
+import { matches } from '../utils/util.js'
 
 const SWIPE_THRESHOLD = 40;
 
@@ -82,6 +83,9 @@ export default class Touch {
 	 */
 	isSwipePrevented( target ) {
 
+		// Prevent accidental swipes when scrubbing timelines
+		if( matches( target, 'video, audio' ) ) return true;
+
 		while( target && typeof target.hasAttribute === 'function' ) {
 			if( target.hasAttribute( 'data-prevent-swipe' ) ) return true;
 			target = target.parentNode;

js/reveal.js

@@ -26,14 +26,14 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '4.1.0';
+export const VERSION = '4.4.0';
 
 /**
  * reveal.js
  * https://revealjs.com
  * MIT licensed
  *
- * Copyright (C) 2020 Hakim El Hattab, https://hakim.se
+ * Copyright (C) 2011-2022 Hakim El Hattab, https://hakim.se
  */
 export default function( revealElement, options ) {
 
@@ -121,10 +121,14 @@ export default function( revealElement, options ) {
 	 */
 	function initialize( initOptions ) {
 
+		if( !revealElement ) throw 'Unable to find presentation root (<div class="reveal">).';
+
 		// Cache references to key DOM elements
 		dom.wrapper = revealElement;
 		dom.slides = revealElement.querySelector( '.slides' );
 
+		if( !dom.slides ) throw 'Unable to find slides container (<div class="slides">).';
+
 		// Compose our config object in order of increasing precedence:
 		// 1. Default reveal.js options
 		// 2. Options provided via Reveal.configure() prior to
@@ -186,6 +190,9 @@ export default function( revealElement, options ) {
 		// Prevent the slides from being scrolled out of view
 		setupScrollPrevention();
 
+		// Adds bindings for fullscreen mode
+		setupFullscreen();
+
 		// Resets all vertical slides so that only the first is visible
 		resetVerticalSlides();
 
@@ -372,6 +379,19 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * After entering fullscreen we need to force a layout to
+	 * get our presentations to scale correctly. This behavior
+	 * is inconsistent across browsers but a force layout seems
+	 * to normalize it.
+	 */
+	function setupFullscreen() {
+
+		document.addEventListener( 'fullscreenchange', onFullscreenChange );
+		document.addEventListener( 'webkitfullscreenchange', onFullscreenChange );
+
+	}
+
 	/**
 	 * Registers a listener to postMessage events, this makes it
 	 * possible to call all reveal.js API methods from another
@@ -385,32 +405,7 @@ export default function( revealElement, options ) {
 	function setupPostMessage() {
 
 		if( config.postMessage ) {
-			window.addEventListener( 'message', event => {
-				let data = event.data;
-
-				// Make sure we're dealing with JSON
-				if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
-					data = JSON.parse( data );
-
-					// Check if the requested method can be found
-					if( data.method && typeof Reveal[data.method] === 'function' ) {
-
-						if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
-
-							const result = Reveal[data.method].apply( Reveal, data.args );
-
-							// Dispatch a postMessage event with the returned value from
-							// our method invocation for getter functions
-							dispatchPostMessage( 'callback', { method: data.method, result: result } );
-
-						}
-						else {
-							console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
-						}
-
-					}
-				}
-			}, false );
+			window.addEventListener( 'message', onPostMessage, false );
 		}
 
 	}
@@ -525,6 +520,7 @@ export default function( revealElement, options ) {
 		controls.bind();
 		focus.bind();
 
+		dom.slides.addEventListener( 'click', onSlidesClicked, false );
 		dom.slides.addEventListener( 'transitionend', onTransitionEnd, false );
 		dom.pauseOverlay.addEventListener( 'click', resume, false );
 
@@ -550,11 +546,71 @@ export default function( revealElement, options ) {
 
 		window.removeEventListener( 'resize', onWindowResize, false );
 
+		dom.slides.removeEventListener( 'click', onSlidesClicked, false );
 		dom.slides.removeEventListener( 'transitionend', onTransitionEnd, false );
 		dom.pauseOverlay.removeEventListener( 'click', resume, false );
 
 	}
 
+	/**
+	 * Uninitializes reveal.js by undoing changes made to the
+	 * DOM and removing all event listeners.
+	 */
+	function destroy() {
+
+		removeEventListeners();
+		cancelAutoSlide();
+		disablePreviewLinks();
+
+		// Destroy controllers
+		notes.destroy();
+		focus.destroy();
+		plugins.destroy();
+		pointer.destroy();
+		controls.destroy();
+		progress.destroy();
+		backgrounds.destroy();
+		slideNumber.destroy();
+
+		// Remove event listeners
+		document.removeEventListener( 'fullscreenchange', onFullscreenChange );
+		document.removeEventListener( 'webkitfullscreenchange', onFullscreenChange );
+		document.removeEventListener( 'visibilitychange', onPageVisibilityChange, false );
+		window.removeEventListener( 'message', onPostMessage, false );
+		window.removeEventListener( 'load', layout, false );
+
+		// Undo DOM changes
+		if( dom.pauseOverlay ) dom.pauseOverlay.remove();
+		if( dom.statusElement ) dom.statusElement.remove();
+
+		document.documentElement.classList.remove( 'reveal-full-page' );
+
+		dom.wrapper.classList.remove( 'ready', 'center', 'has-horizontal-slides', 'has-vertical-slides' );
+		dom.wrapper.removeAttribute( 'data-transition-speed' );
+		dom.wrapper.removeAttribute( 'data-background-transition' );
+
+		dom.viewport.classList.remove( 'reveal-viewport' );
+		dom.viewport.style.removeProperty( '--slide-width' );
+		dom.viewport.style.removeProperty( '--slide-height' );
+
+		dom.slides.style.removeProperty( 'width' );
+		dom.slides.style.removeProperty( 'height' );
+		dom.slides.style.removeProperty( 'zoom' );
+		dom.slides.style.removeProperty( 'left' );
+		dom.slides.style.removeProperty( 'top' );
+		dom.slides.style.removeProperty( 'bottom' );
+		dom.slides.style.removeProperty( 'right' );
+		dom.slides.style.removeProperty( 'transform' );
+
+		Array.from( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( slide => {
+			slide.style.removeProperty( 'display' );
+			slide.style.removeProperty( 'top' );
+			slide.removeAttribute( 'hidden' );
+			slide.removeAttribute( 'aria-hidden' );
+		} );
+
+	}
+
 	/**
 	 * Adds a listener to one of our custom reveal.js events,
 	 * like slidechanged.
@@ -614,6 +670,8 @@ export default function( revealElement, options ) {
 			dispatchPostMessage( type );
 		}
 
+		return event;
+
 	}
 
 	/**
@@ -840,31 +898,12 @@ export default function( revealElement, options ) {
 					transformSlides( { layout: '' } );
 				}
 				else {
-					// Zoom Scaling
-					// Content remains crisp no matter how much we scale. Side
-					// effects are minor differences in text layout and iframe
-					// viewports changing size. A 200x200 iframe viewport in a
-					// 2x zoomed presentation ends up having a 400x400 viewport.
-					if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) {
-						dom.slides.style.zoom = scale;
-						dom.slides.style.left = '';
-						dom.slides.style.top = '';
-						dom.slides.style.bottom = '';
-						dom.slides.style.right = '';
-						transformSlides( { layout: '' } );
-					}
-					// Transform Scaling
-					// Content layout remains the exact same when scaled up.
-					// Side effect is content becoming blurred, especially with
-					// high scale values on ldpi screens.
-					else {
-						dom.slides.style.zoom = '';
-						dom.slides.style.left = '50%';
-						dom.slides.style.top = '50%';
-						dom.slides.style.bottom = 'auto';
-						dom.slides.style.right = 'auto';
-						transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
-					}
+					dom.slides.style.zoom = '';
+					dom.slides.style.left = '50%';
+					dom.slides.style.top = '50%';
+					dom.slides.style.bottom = 'auto';
+					dom.slides.style.right = 'auto';
+					transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
 				}
 
 				// Select all slides, vertical and horizontal
@@ -906,6 +945,8 @@ export default function( revealElement, options ) {
 				}
 			}
 
+			dom.viewport.style.setProperty( '--slide-scale', scale );
+
 			progress.update();
 			backgrounds.updateParallax();
 
@@ -1188,9 +1229,22 @@ export default function( revealElement, options ) {
 	 * @param {number} [v=indexv] Vertical index of the target slide
 	 * @param {number} [f] Index of a fragment within the
 	 * target slide to activate
-	 * @param {number} [o] Origin for use in multimaster environments
+	 * @param {number} [origin] Origin for use in multimaster environments
 	 */
-	function slide( h, v, f, o ) {
+	function slide( h, v, f, origin ) {
+
+		// Dispatch an event before hte slide
+		const slidechange = dispatchEvent({
+			type: 'beforeslidechange',
+			data: {
+				indexh: h === undefined ? indexh : h,
+				indexv: v === undefined ? indexv : v,
+				origin
+			}
+		});
+
+		// Abort if this slide change was prevented by an event listener
+		if( slidechange.defaultPrevented ) return;
 
 		// Remember where we were at before
 		previousSlide = currentSlide;
@@ -1251,7 +1305,10 @@ export default function( revealElement, options ) {
 			// Note 20-03-2020:
 			// This needs to happen before we update slide visibility,
 			// otherwise transitions will still run in Safari.
-			if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' ) ) {
+			if( previousSlide.hasAttribute( 'data-auto-animate' ) && currentSlide.hasAttribute( 'data-auto-animate' )
+					&& previousSlide.getAttribute( 'data-auto-animate-id' ) === currentSlide.getAttribute( 'data-auto-animate-id' )
+					&& !( ( indexh > indexhBefore || indexv > indexvBefore ) ? currentSlide : previousSlide ).hasAttribute( 'data-auto-animate-restart' ) ) {
+
 				autoAnimateTransition = true;
 				dom.slides.classList.add( 'disable-slide-transitions' );
 			}
@@ -1323,7 +1380,7 @@ export default function( revealElement, options ) {
 					indexv,
 					previousSlide,
 					currentSlide,
-					origin: o
+					origin
 				}
 			});
 		}
@@ -1335,7 +1392,11 @@ export default function( revealElement, options ) {
 		}
 
 		// Announce the current slide contents to screen readers
-		announceStatus( getStatusText( currentSlide ) );
+		// Use animation frame to prevent getComputedStyle in getStatusText
+		// from triggering layout mid-frame
+		requestAnimationFrame( () => {
+			announceStatus( getStatusText( currentSlide ) );
+		});
 
 		progress.update();
 		controls.update();
@@ -1510,15 +1571,20 @@ export default function( revealElement, options ) {
 			slidesLength = slides.length;
 
 		let printMode = print.isPrintingPDF();
+		let loopedForwards = false;
+		let loopedBackwards = false;
 
 		if( slidesLength ) {
 
 			// Should the index loop?
 			if( config.loop ) {
+				if( index >= slidesLength ) loopedForwards = true;
+
 				index %= slidesLength;
 
 				if( index < 0 ) {
 					index = slidesLength + index;
+					loopedBackwards = true;
 				}
 			}
 
@@ -1556,10 +1622,7 @@ export default function( revealElement, options ) {
 
 					if( config.fragments ) {
 						// Show all fragments in prior slides
-						Util.queryAll( element, '.fragment' ).forEach( fragment => {
-							fragment.classList.add( 'visible' );
-							fragment.classList.remove( 'current-fragment' );
-						} );
+						showFragmentsIn( element );
 					}
 				}
 				else if( i > index ) {
@@ -1568,9 +1631,17 @@ export default function( revealElement, options ) {
 
 					if( config.fragments ) {
 						// Hide all fragments in future slides
-						Util.queryAll( element, '.fragment.visible' ).forEach( fragment => {
-							fragment.classList.remove( 'visible', 'current-fragment' );
-						} );
+						hideFragmentsIn( element );
+					}
+				}
+				// Update the visibility of fragments when a presentation loops
+				// in either direction
+				else if( i === index && config.fragments ) {
+					if( loopedForwards ) {
+						hideFragmentsIn( element );
+					}
+					else if( loopedBackwards ) {
+						showFragmentsIn( element );
 					}
 				}
 			}
@@ -1610,6 +1681,29 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Shows all fragment elements within the given contaienr.
+	 */
+	function showFragmentsIn( container ) {
+
+		Util.queryAll( container, '.fragment' ).forEach( fragment => {
+			fragment.classList.add( 'visible' );
+			fragment.classList.remove( 'current-fragment' );
+		} );
+
+	}
+
+	/**
+	 * Hides all fragment elements within the given contaienr.
+	 */
+	function hideFragmentsIn( container ) {
+
+		Util.queryAll( container, '.fragment.visible' ).forEach( fragment => {
+			fragment.classList.remove( 'visible', 'current-fragment' );
+		} );
+
+	}
+
 	/**
 	 * Optimization method; hide all slides that are far away
 	 * from the present slide.
@@ -2186,55 +2280,55 @@ export default function( revealElement, options ) {
 
 	}
 
-	function navigateLeft() {
+	function navigateLeft({skipFragments=false}={}) {
 
 		navigationHistory.hasNavigatedHorizontally = true;
 
 		// Reverse for RTL
 		if( config.rtl ) {
-			if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().left ) {
+			if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().left ) {
 				slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
 			}
 		}
 		// Normal navigation
-		else if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().left ) {
+		else if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().left ) {
 			slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
 		}
 
 	}
 
-	function navigateRight() {
+	function navigateRight({skipFragments=false}={}) {
 
 		navigationHistory.hasNavigatedHorizontally = true;
 
 		// Reverse for RTL
 		if( config.rtl ) {
-			if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().right ) {
+			if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().right ) {
 				slide( indexh - 1, config.navigationMode === 'grid' ? indexv : undefined );
 			}
 		}
 		// Normal navigation
-		else if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().right ) {
+		else if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().right ) {
 			slide( indexh + 1, config.navigationMode === 'grid' ? indexv : undefined );
 		}
 
 	}
 
-	function navigateUp() {
+	function navigateUp({skipFragments=false}={}) {
 
 		// Prioritize hiding fragments
-		if( ( overview.isActive() || fragments.prev() === false ) && availableRoutes().up ) {
+		if( ( overview.isActive() || skipFragments || fragments.prev() === false ) && availableRoutes().up ) {
 			slide( indexh, indexv - 1 );
 		}
 
 	}
 
-	function navigateDown() {
+	function navigateDown({skipFragments=false}={}) {
 
 		navigationHistory.hasNavigatedVertically = true;
 
 		// Prioritize revealing fragments
-		if( ( overview.isActive() || fragments.next() === false ) && availableRoutes().down ) {
+		if( ( overview.isActive() || skipFragments || fragments.next() === false ) && availableRoutes().down ) {
 			slide( indexh, indexv + 1 );
 		}
 
@@ -2246,12 +2340,12 @@ export default function( revealElement, options ) {
 	 * 2) Previous vertical slide
 	 * 3) Previous horizontal slide
 	 */
-	function navigatePrev() {
+	function navigatePrev({skipFragments=false}={}) {
 
 		// Prioritize revealing fragments
-		if( fragments.prev() === false ) {
+		if( skipFragments || fragments.prev() === false ) {
 			if( availableRoutes().up ) {
-				navigateUp();
+				navigateUp({skipFragments});
 			}
 			else {
 				// Fetch the previous horizontal slide, if there is one
@@ -2264,11 +2358,16 @@ export default function( revealElement, options ) {
 					previousSlide = Util.queryAll( dom.wrapper, HORIZONTAL_SLIDES_SELECTOR + '.past' ).pop();
 				}
 
-				if( previousSlide ) {
+				// When going backwards and arriving on a stack we start
+				// at the bottom of the stack
+				if( previousSlide && previousSlide.classList.contains( 'stack' ) ) {
 					let v = ( previousSlide.querySelectorAll( 'section' ).length - 1 ) || undefined;
 					let h = indexh - 1;
 					slide( h, v );
 				}
+				else {
+					navigateLeft({skipFragments});
+				}
 			}
 		}
 
@@ -2277,31 +2376,31 @@ export default function( revealElement, options ) {
 	/**
 	 * The reverse of #navigatePrev().
 	 */
-	function navigateNext() {
+	function navigateNext({skipFragments=false}={}) {
 
 		navigationHistory.hasNavigatedHorizontally = true;
 		navigationHistory.hasNavigatedVertically = true;
 
 		// Prioritize revealing fragments
-		if( fragments.next() === false ) {
+		if( skipFragments || fragments.next() === false ) {
 
 			let routes = availableRoutes();
 
 			// When looping is enabled `routes.down` is always available
 			// so we need a separate check for when we've reached the
 			// end of a stack and should move horizontally
-			if( routes.down && routes.right && config.loop && isLastVerticalSlide( currentSlide ) ) {
+			if( routes.down && routes.right && config.loop && isLastVerticalSlide() ) {
 				routes.down = false;
 			}
 
 			if( routes.down ) {
-				navigateDown();
+				navigateDown({skipFragments});
 			}
 			else if( config.rtl ) {
-				navigateLeft();
+				navigateLeft({skipFragments});
 			}
 			else {
-				navigateRight();
+				navigateRight({skipFragments});
 			}
 		}
 
@@ -2326,6 +2425,38 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	* Listener for post message events posted to this window.
+	*/
+	function onPostMessage( event ) {
+
+		let data = event.data;
+
+		// Make sure we're dealing with JSON
+		if( typeof data === 'string' && data.charAt( 0 ) === '{' && data.charAt( data.length - 1 ) === '}' ) {
+			data = JSON.parse( data );
+
+			// Check if the requested method can be found
+			if( data.method && typeof Reveal[data.method] === 'function' ) {
+
+				if( POST_MESSAGE_METHOD_BLACKLIST.test( data.method ) === false ) {
+
+					const result = Reveal[data.method].apply( Reveal, data.args );
+
+					// Dispatch a postMessage event with the returned value from
+					// our method invocation for getter functions
+					dispatchPostMessage( 'callback', { method: data.method, result: result } );
+
+				}
+				else {
+					console.warn( 'reveal.js: "'+ data.method +'" is is blacklisted from the postMessage API' );
+				}
+
+			}
+		}
+
+	}
+
 	/**
 	 * Event listener for transition end on the current slide.
 	 *
@@ -2343,6 +2474,33 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * A global listener for all click events inside of the
+	 * .slides container.
+	 *
+	 * @param {object} [event]
+	 */
+	function onSlidesClicked( event ) {
+
+		const anchor = Util.closest( event.target, 'a[href^="#"]' );
+
+		// If a hash link is clicked, we find the target slide
+		// and navigate to it. We previously relied on 'hashchange'
+		// for links like these but that prevented media with
+		// audio tracks from playing in mobile browsers since it
+		// wasn't considered a direct interaction with the document.
+		if( anchor ) {
+			const hash = anchor.getAttribute( 'href' );
+			const indices = location.getIndicesFromHash( hash );
+
+			if( indices ) {
+				Reveal.slide( indices.h, indices.v, indices.f );
+				event.preventDefault();
+			}
+		}
+
+	}
+
 	/**
 	 * Handler for the window level 'resize' event.
 	 *
@@ -2373,6 +2531,26 @@ export default function( revealElement, options ) {
 
 	}
 
+	/**
+	 * Handler for the document level 'fullscreenchange' event.
+	 *
+	 * @param {object} [event]
+	 */
+	function onFullscreenChange( event ) {
+
+		let element = document.fullscreenElement || document.webkitFullscreenElement;
+		if( element === dom.wrapper ) {
+			event.stopImmediatePropagation();
+
+			// Timeout to avoid layout shift in Safari
+			setTimeout( () => {
+				Reveal.layout();
+				Reveal.focus.focus(); // focus.focus :'(
+			}, 1 );
+		}
+
+	}
+
 	/**
 	 * Handles clicks on links that are set to preview in the
 	 * iframe overlay.
@@ -2425,6 +2603,7 @@ export default function( revealElement, options ) {
 
 		initialize,
 		configure,
+		destroy,
 
 		sync,
 		syncSlide,
@@ -2500,6 +2679,10 @@ export default function( revealElement, options ) {
 		loadSlide: slideContent.load.bind( slideContent ),
 		unloadSlide: slideContent.unload.bind( slideContent ),
 
+		// Preview management
+		showPreview,
+		hidePreview: closeOverlay,
+
 		// Adds or removes all internal event listeners
 		addEventListeners,
 		removeEventListeners,
@@ -2577,6 +2760,9 @@ export default function( revealElement, options ) {
 		// Helper method, retrieves query string as a key:value map
 		getQueryHash: Util.getQueryHash,
 
+		// Returns the path to the current slide as represented in the URL
+		getSlidePath: location.getHash.bind( location ),
+
 		// Returns reveal.js DOM elements
 		getRevealElement: () => revealElement,
 		getSlidesElement: () => dom.slides,

js/utils/color.js

@@ -29,9 +29,9 @@ export const colorToRgb = ( color ) => {
 	if( hex6 && hex6[1] ) {
 		hex6 = hex6[1];
 		return {
-			r: parseInt( hex6.substr( 0, 2 ), 16 ),
-			g: parseInt( hex6.substr( 2, 2 ), 16 ),
-			b: parseInt( hex6.substr( 4, 2 ), 16 )
+			r: parseInt( hex6.slice( 0, 2 ), 16 ),
+			g: parseInt( hex6.slice( 2, 4 ), 16 ),
+			b: parseInt( hex6.slice( 4, 6 ), 16 )
 		};
 	}
 

js/utils/constants.js

@@ -4,7 +4,7 @@ export const HORIZONTAL_SLIDES_SELECTOR = '.slides>section';
 export const VERTICAL_SLIDES_SELECTOR = '.slides>section.present>section';
 
 // Methods that may not be invoked via the postMessage API
-export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener/;
+export const POST_MESSAGE_METHOD_BLACKLIST = /registerPlugin|registerKeyboardShortcut|addKeyBinding|addEventListener|showPreview/;
 
 // Regex for retrieving the fragment style from a class attribute
 export const FRAGMENT_STYLE_REGEX = /fade-(down|up|right|left|out|in-then-out|in-then-semi-out)|semi-fade-out|current-visible|shrink|grow/;

js/utils/device.js

@@ -1,15 +1,8 @@
 const UA = navigator.userAgent;
-const testElement = document.createElement( 'div' );
 
 export const isMobile = /(iphone|ipod|ipad|android)/gi.test( UA ) ||
 						( navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 ); // iPadOS
 
 export const isChrome = /chrome/i.test( UA ) && !/edge/i.test( UA );
 
-export const isAndroid = /android/gi.test( UA );
-
-// Flags if we should use zoom instead of transform to scale
-// up slides. Zoom produces crisper results but has a lot of
-// xbrowser quirks so we only use it in whitelisted browsers.
-export const supportsZoom = 'zoom' in testElement.style && !isMobile &&
-				( isChrome || /Version\/[\d\.]+.*Safari/.test( UA ) );
+export const isAndroid = /android/gi.test( UA );

js/utils/util.js

@@ -279,4 +279,19 @@ export const getRemainingHeight = ( element, height = 0 ) => {
 
 	return height;
 
+}
+
+const fileExtensionToMimeMap = {
+	'mp4': 'video/mp4',
+	'm4a': 'video/mp4',
+	'ogv': 'video/ogg',
+	'mpeg': 'video/mpeg',
+	'webm': 'video/webm'
+}
+
+/**
+ * Guess the MIME type for common file formats.
+ */
+export const getMimeTypeFromFile = ( filename='' ) => {
+	return fileExtensionToMimeMap[filename.split('.').pop()]
 }

leetcode-20230110.md

@@ -0,0 +1,147 @@
+# Leetcode 💻 寒假 20230110
+
+---
+
+### 179. Largest Number
+
+给定一个非负整数列表 nums，将它们排列成最大的数并返回。
+
+```cpp [|4-6|7-9|10-11|13]
+class Solution {
+public:
+    string largestNumber(vector<int>& nums) {
+        vector<string> v;
+        v.reserve(nums.size());
+        for (auto const &i : nums) v.push_back(to_string(i));
+        sort(v.begin(), v.end(), [](string &a, string &b) {
+            return a + b > b + a;
+        });
+        string ret;
+        for (auto const &s : v) ret += s;
+        // 处理 ["0", "0", "0"] 的情况
+        return ret.startswith('0') ? "0" : ret;
+    }
+};
+```
+
+Note:
+
+```python
+'1' + '3' < '2'    # True
+'1' + '3' < '22'   # True
+'1' < '11'         # True
+'1' + '0' == '10'  # True
+```
+
+---
+
+### 179. Largest Number
+
+Python 版本
+
+```python [|4|5-7|8]
+from functools import cmp_to_key
+class Solution:
+    def largestNumber(self, nums: List[int]) -> str:
+        strs = [str(i) for i in nums]
+        strs.sort(key = cmp_to_key(
+            lambda a, b: -1 if a + b > b + a else 1
+        ))
+        return '0' if strs[0] == '0' else ''.join(strs)
+```
+
+Note:
+
+思路和刚刚的 c++ 是一样的，但我主要想给各位介绍一下python的写法，
+因为我看群里用python的人还是不少的，当然这种写法是好是坏见仁见智了，我个人认为是比较好的。
+
+4 首先我们用这个列表生成式将nums转为字符串strs， strs 是一个列表，列表中的每个元素是str(i),i是遍历nums得到的变量。
+
+5-7 接着对strs进行排序，这个cmp to key 是python3的设计，他把一个比较用来比较大小的函数变成key函数，
+这个比较函数做什么呢，他输入两个变量，如果a+b比b+a大，则这个比较函数返回-1,否则返回1,注意这里a和b的类型
+都是字符串，a+b表示的是字符串a和字符串b拼接之后的结果
+
+8 最后用一个三元表达式返回结果，和上面c++的思路是一样的，
+注意这又有一个python好用的方法，字符串.join,后面跟一个数组，
+意思是把这个数组用空字符串拼接起来
+
+---
+
+### 347. Top K Frequent Element
+
+```cpp [|4-6|8-13|15-19|21-28]
+class Solution {
+public:
+    vector<int> topKFrequent(vector<int>& nums, int k) {
+        unordered_map<int, int> count;
+        for (auto const &n : nums)
+            count[n]++;
+        
+        // 将 map 转为列表
+        // [(0, 5), (1, 3), ... ]
+        // 代表数字 0 出现 5 次，数字 1 出现 3 次
+        vector<pair<int, int>> tmp;
+        for (auto const &pair : count)
+            tmp.push_back(pair);
+        
+        sort(tmp.begin(), tmp.end(), [](
+            const pair<int, int> &a,
+            const pair<int, int> &b) {
+                return a.second > b.second;
+            });
+        
+        vector<int> ret;
+        for (auto const &pair : tmp) {
+            if (ret.size() >= k)
+                break;
+            ret.push_back(pair.first);
+        }
+
+        return ret;
+    }
+};
+```
+
+---
+
+### 347. Top K Frequent Element
+
+Python 版本
+
+```python [4-5]
+import collections
+class Solution:
+    def topKFrequent(self, nums: List[int], k: int) -> List[int]:
+        count = collections.Counter(nums).most_common(k)
+        return [i[0] for i in count]
+```
+
+---
+
+### 75. Sort Colors
+
+C++
+
+```cpp [|2-5|6|7-11|12-14|15-18]
+void sortColors(vector<int> &nums) {
+  auto low = nums.begin();
+  auto high = nums.end() - 1;
+
+  for (auto mid = nums.begin(); mid <= high;) {
+    switch (*mid) {
+    case 0:
+      swap(*mid, *low);
+      mid++;
+      low++;
+      break;
+    case 1:
+      mid++;
+      break;
+    case 2:
+      swap(*mid, *high);
+      high--;
+      break;
+    }
+  }
+}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.1.0",
+  "version": "4.4.0",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",
@@ -10,7 +10,7 @@
   "scripts": {
     "test": "gulp test",
     "start": "gulp serve",
-    "build": "gulp"
+    "build": "gulp build"
   },
   "author": {
     "name": "Hakim El Hattab",
@@ -30,44 +30,45 @@
     "presentation"
   ],
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/preset-env": "^7.9.6",
-    "@rollup/plugin-babel": "^5.2.0",
-    "@rollup/plugin-commonjs": "^15.0.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "babel-eslint": "^10.1.0",
+    "@babel/core": "^7.14.3",
+    "@babel/eslint-parser": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "babel-plugin-transform-html-import-to-string": "0.0.1",
     "colors": "^1.4.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.12.1",
     "fitty": "^2.3.0",
-    "glob": "^7.1.6",
+    "glob": "^7.1.7",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-clean-css": "^4.2.0",
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
     "gulp-header": "^2.0.9",
-    "gulp-sass": "^4.0.2",
     "gulp-tap": "^2.0.0",
-    "gulp-zip": "^5.0.1",
+    "gulp-zip": "^4.2.0",
     "highlight.js": "^10.0.3",
-    "marked": "^1.1.0",
-    "node-qunit-puppeteer": "^2.0.1",
-    "qunit": "^2.10.0",
-    "rollup": "^2.26.4",
-    "rollup-plugin-terser": "^7.0.0",
+    "marked": "^4.0.12",
+    "node-qunit-puppeteer": "^2.1.0",
+    "qunit": "^2.17.2",
+    "rollup": "^2.48.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "sass": "^1.39.2",
     "yargs": "^15.1.0"
   },
-  "browserslist": "> 0.5%, IE 11, not dead",
+  "browserslist": "> 2%, not dead",
   "eslintConfig": {
     "env": {
       "browser": true,
       "es6": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "parserOptions": {
       "sourceType": "module",
-      "allowImportExportEverywhere": true
+      "allowImportExportEverywhere": true,
+      "requireConfigFile": false
     },
     "globals": {
       "module": false,

plugin/highlight/plugin.js

@@ -1,8 +1,8 @@
-import hljs from 'highlight.js'
+import hljs from 'highlight.js';
+
+/* highlightjs-line-numbers.js 2.8.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
+!function(r,o){"use strict";var e,i="hljs-ln",l="hljs-ln-line",h="hljs-ln-code",s="hljs-ln-numbers",c="hljs-ln-n",m="data-line-number",a=/\r\n|\r|\n/g;function u(e){for(var n=e.toString(),t=e.anchorNode;"TD"!==t.nodeName;)t=t.parentNode;for(var r=e.focusNode;"TD"!==r.nodeName;)r=r.parentNode;var o=parseInt(t.dataset.lineNumber),a=parseInt(r.dataset.lineNumber);if(o==a)return n;var i,l=t.textContent,s=r.textContent;for(a<o&&(i=o,o=a,a=i,i=l,l=s,s=i);0!==n.indexOf(l);)l=l.slice(1);for(;-1===n.lastIndexOf(s);)s=s.slice(0,-1);for(var c=l,u=function(e){for(var n=e;"TABLE"!==n.nodeName;)n=n.parentNode;return n}(t),d=o+1;d<a;++d){var f=p('.{0}[{1}="{2}"]',[h,m,d]);c+="\n"+u.querySelector(f).textContent}return c+="\n"+s}function n(e){try{var n=o.querySelectorAll("code.hljs,code.nohighlight");for(var t in n)n.hasOwnProperty(t)&&(n[t].classList.contains("nohljsln")||d(n[t],e))}catch(e){r.console.error("LineNumbers error: ",e)}}function d(e,n){if("object"==typeof e)e.innerHTML=f(e,n)}function f(e,n){var t,r,o=(t=e,{singleLine:function(e){return!!e.singleLine&&e.singleLine}(r=(r=n)||{}),startFrom:function(e,n){var t=1;isFinite(n.startFrom)&&(t=n.startFrom);var r=function(e,n){return e.hasAttribute(n)?e.getAttribute(n):null}(e,"data-ln-start-from");return null!==r&&(t=function(e,n){if(!e)return n;var t=Number(e);return isFinite(t)?t:n}(r,1)),t}(t,r)});return function e(n){var t=n.childNodes;for(var r in t){var o;t.hasOwnProperty(r)&&(o=t[r],0<(o.textContent.trim().match(a)||[]).length&&(0<o.childNodes.length?e(o):v(o.parentNode)))}}(e),function(e,n){var t=g(e);""===t[t.length-1].trim()&&t.pop();if(1<t.length||n.singleLine){for(var r="",o=0,a=t.length;o<a;o++)r+=p('<tr><td class="{0} {1}" {3}="{5}"><div class="{2}" {3}="{5}"></div></td><td class="{0} {4}" {3}="{5}">{6}</td></tr>',[l,s,c,m,h,o+n.startFrom,0<t[o].length?t[o]:" "]);return p('<table class="{0}">{1}</table>',[i,r])}return e}(e.innerHTML,o)}function v(e){var n=e.className;if(/hljs-/.test(n)){for(var t=g(e.innerHTML),r=0,o="";r<t.length;r++){o+=p('<span class="{0}">{1}</span>\n',[n,0<t[r].length?t[r]:" "])}e.innerHTML=o.trim()}}function g(e){return 0===e.length?[]:e.split(a)}function p(e,t){return e.replace(/\{(\d+)\}/g,function(e,n){return void 0!==t[n]?t[n]:e})}hljs?(hljs.initLineNumbersOnLoad=function(e){"interactive"===o.readyState||"complete"===o.readyState?n(e):r.addEventListener("DOMContentLoaded",function(){n(e)})},hljs.lineNumbersBlock=d,hljs.lineNumbersValue=function(e,n){if("string"!=typeof e)return;var t=document.createElement("code");return t.innerHTML=e,f(t,n)},(e=o.createElement("style")).type="text/css",e.innerHTML=p(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[i,c,m]),o.getElementsByTagName("head")[0].appendChild(e)):r.console.error("highlight.js not detected!"),document.addEventListener("copy",function(e){var n,t=window.getSelection();!function(e){for(var n=e;n;){if(n.className&&-1!==n.className.indexOf("hljs-ln-code"))return 1;n=n.parentNode}}(t.anchorNode)||(n=-1!==window.navigator.userAgent.indexOf("Edge")?u(t):t.toString(),e.clipboardData.setData("text/plain",n),e.preventDefault())})}(window,document);
 
-/* highlightjs-line-numbers.js 2.6.0 | (C) 2018 Yauheni Pakala | MIT License | github.com/wcoder/highlightjs-line-numbers.js */
-/* Edited by Hakim for reveal.js; removed async timeout */
-!function(n,e){"use strict";function t(){var n=e.createElement("style");n.type="text/css",n.innerHTML=g(".{0}{border-collapse:collapse}.{0} td{padding:0}.{1}:before{content:attr({2})}",[v,L,b]),e.getElementsByTagName("head")[0].appendChild(n)}function r(t){"interactive"===e.readyState||"complete"===e.readyState?i(t):n.addEventListener("DOMContentLoaded",function(){i(t)})}function i(t){try{var r=e.querySelectorAll("code.hljs,code.nohighlight");for(var i in r)r.hasOwnProperty(i)&&l(r[i],t)}catch(o){n.console.error("LineNumbers error: ",o)}}function l(n,e){"object"==typeof n&&f(function(){n.innerHTML=s(n,e)})}function o(n,e){if("string"==typeof n){var t=document.createElement("code");return t.innerHTML=n,s(t,e)}}function s(n,e){e=e||{singleLine:!1};var t=e.singleLine?0:1;return c(n),a(n.innerHTML,t)}function a(n,e){var t=u(n);if(""===t[t.length-1].trim()&&t.pop(),t.length>e){for(var r="",i=0,l=t.length;i<l;i++)r+=g('<tr><td class="{0}"><div class="{1} {2}" {3}="{5}"></div></td><td class="{4}"><div class="{1}">{6}</div></td></tr>',[j,m,L,b,p,i+1,t[i].length>0?t[i]:" "]);return g('<table class="{0}">{1}</table>',[v,r])}return n}function c(n){var e=n.childNodes;for(var t in e)if(e.hasOwnProperty(t)){var r=e[t];h(r.textContent)>0&&(r.childNodes.length>0?c(r):d(r.parentNode))}}function d(n){var e=n.className;if(/hljs-/.test(e)){for(var t=u(n.innerHTML),r=0,i="";r<t.length;r++){var l=t[r].length>0?t[r]:" ";i+=g('<span class="{0}">{1}</span>\n',[e,l])}n.innerHTML=i.trim()}}function u(n){return 0===n.length?[]:n.split(y)}function h(n){return(n.trim().match(y)||[]).length}function f(e){e()}function g(n,e){return n.replace(/\{(\d+)\}/g,function(n,t){return e[t]?e[t]:n})}var v="hljs-ln",m="hljs-ln-line",p="hljs-ln-code",j="hljs-ln-numbers",L="hljs-ln-n",b="data-line-number",y=/\r\n|\r|\n/g;hljs?(hljs.initLineNumbersOnLoad=r,hljs.lineNumbersBlock=l,hljs.lineNumbersValue=o,t()):n.console.error("highlight.js not detected!")}(window,document);
 
 /*!
  * reveal.js plugin that adds syntax highlight support.
@@ -16,10 +16,10 @@ const Plugin = {
 	HIGHLIGHT_LINE_DELIMITER: ',',
 	HIGHLIGHT_LINE_RANGE_DELIMITER: '-',
 
-	hljs: hljs,
+	hljs,
 
 	/**
-	 * Highlights code blocks withing the given deck.
+	 * Highlights code blocks within the given deck.
 	 *
 	 * Note that this can be called multiple times if
 	 * there are multiple presentations on one page.
@@ -29,11 +29,14 @@ const Plugin = {
 	init: function( reveal ) {
 
 		// Read the plugin config options and provide fallbacks
-		var config = reveal.getConfig().highlight || {};
+		let config = reveal.getConfig().highlight || {};
+
 		config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
 		config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
 
-		[].slice.call( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( function( block ) {
+		Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
+
+			block.parentNode.classList.add('code-wrapper');
 
 			// Code can optionally be wrapped in script template to avoid
 			// HTML being parsed by the browser (i.e. when you need to
@@ -56,15 +59,23 @@ const Plugin = {
 
 			// Re-highlight when focus is lost (for contenteditable code)
 			block.addEventListener( 'focusout', function( event ) {
-				hljs.highlightBlock( event.currentTarget );
+				hljs.highlightElement( event.currentTarget );
 			}, false );
 
-			if( config.highlightOnLoad ) {
-				Plugin.highlightBlock( block );
-			}
-
 		} );
 
+		// Triggers a callback function before we trigger highlighting
+		if( typeof config.beforeHighlight === 'function' ) {
+			config.beforeHighlight( hljs );
+		}
+
+		// Run initial highlighting for all code
+		if( config.highlightOnLoad ) {
+			Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
+				Plugin.highlightBlock( block );
+			} );
+		}
+
 		// If we're printing to PDF, scroll the code highlights of
 		// all blocks in the deck into view at once
 		reveal.on( 'pdf-ready', function() {
@@ -85,7 +96,7 @@ const Plugin = {
 	 */
 	highlightBlock: function( block ) {
 
-		hljs.highlightBlock( block );
+		hljs.highlightElement( block );
 
 		// Don't generate line numbers for empty code blocks
 		if( block.innerHTML.trim().length === 0 ) return;
@@ -95,7 +106,7 @@ const Plugin = {
 
 			var scrollState = { currentBlock: block };
 
-			// If there is at least one highlight step, generate
+			// If there is more than one highlight step, generate
 			// fragments
 			var highlightSteps = Plugin.deserializeHighlightSteps( block.getAttribute( 'data-line-numbers' ) );
 			if( highlightSteps.length > 1 ) {
@@ -131,7 +142,7 @@ const Plugin = {
 
 				} );
 
-				block.removeAttribute( 'data-fragment-index' )
+				block.removeAttribute( 'data-fragment-index' );
 				block.setAttribute( 'data-line-numbers', Plugin.serializeHighlightSteps( [ highlightSteps[0] ] ) );
 
 			}

plugin/markdown/plugin.js

@@ -4,9 +4,9 @@
  * of external markdown documents.
  */
 
-import marked from 'marked'
+import { marked } from 'marked';
 
-const DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
+const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
 	  DEFAULT_NOTES_SEPARATOR = 'notes?:',
 	  DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
 	  DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
@@ -206,7 +206,7 @@ const Plugin = () => {
 
 			var externalPromises = [];
 
-			[].slice.call( scope.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
+			[].slice.call( scope.querySelectorAll( 'section[data-markdown]:not([data-markdown-parsed])') ).forEach( function( section, i ) {
 
 				if( section.getAttribute( 'data-markdown' ).length ) {
 
@@ -234,7 +234,7 @@ const Plugin = () => {
 					) );
 
 				}
-				else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
+				else {
 
 					section.outerHTML = slidify( getMarkdownFromSlide( section ), {
 						separator: section.getAttribute( 'data-separator' ),
@@ -244,9 +244,6 @@ const Plugin = () => {
 					});
 
 				}
-				else {
-					section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
-				}
 
 			});
 
@@ -424,34 +421,42 @@ const Plugin = () => {
 
 			deck = reveal;
 
-			let renderer = new marked.Renderer();
+			let { renderer, animateLists, ...markedOptions } = deck.getConfig().markdown || {};
 
-			renderer.code = ( code, language ) => {
+			if( !renderer ) {
+				renderer = new marked.Renderer();
 
-				// Off by default
-				let lineNumbers = '';
+				renderer.code = ( code, language ) => {
 
-				// Users can opt in to show line numbers and highlight
-				// specific lines.
-				// ```javascript []        show line numbers
-				// ```javascript [1,4-8]   highlights lines 1 and 4-8
-				if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
-					lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
-					lineNumbers = `data-line-numbers="${lineNumbers}"`;
-					language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
-				}
+					// Off by default
+					let lineNumbers = '';
 
-				// Escape before this gets injected into the DOM to
-				// avoid having the HTML parser alter our code before
-				// highlight.js is able to read it
-				code = escapeForHTML( code );
+					// Users can opt in to show line numbers and highlight
+					// specific lines.
+					// ```javascript []        show line numbers
+					// ```javascript [1,4-8]   highlights lines 1 and 4-8
+					if( CODE_LINE_NUMBER_REGEX.test( language ) ) {
+						lineNumbers = language.match( CODE_LINE_NUMBER_REGEX )[1].trim();
+						lineNumbers = `data-line-numbers="${lineNumbers}"`;
+						language = language.replace( CODE_LINE_NUMBER_REGEX, '' ).trim();
+					}
 
-				return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
-			};
+					// Escape before this gets injected into the DOM to
+					// avoid having the HTML parser alter our code before
+					// highlight.js is able to read it
+					code = escapeForHTML( code );
+
+					return `<pre><code ${lineNumbers} class="${language}">${code}</code></pre>`;
+				};
+			}
+
+			if( animateLists === true ) {
+				renderer.listitem = text => `<li class="fragment">${text}</li>`;
+			}
 
 			marked.setOptions( {
 				renderer,
-				...deck.getConfig().markdown
+				...markedOptions
 			} );
 
 			return processSlides( deck.getRevealElement() ).then( convertSlides );

plugin/math/katex.js

@@ -0,0 +1,96 @@
+/**
+ * A plugin which enables rendering of math equations inside
+ * of reveal.js slides. Essentially a thin wrapper for KaTeX.
+ *
+ * @author Hakim El Hattab
+ * @author Gerhard Burger
+ */
+export const KaTeX = () => {
+	let deck;
+
+	let defaultOptions = {
+		version: 'latest',
+		delimiters: [
+			{left: '$$', right: '$$', display: true}, // Note: $$ has to come before $
+			{left: '$', right: '$', display: false},
+			{left: '\\(', right: '\\)', display: false},
+			{left: '\\[', right: '\\]', display: true}
+		],
+		ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+	}
+
+	const loadCss = src => {
+		let link = document.createElement('link');
+		link.rel = 'stylesheet';
+		link.href = src;
+		document.head.appendChild(link);
+	};
+
+	/**
+	 * Loads a JavaScript file and returns a Promise for when it is loaded
+	 * Credits: https://aaronsmith.online/easily-load-an-external-script-using-javascript/
+	 */
+	const loadScript = src => {
+		return new Promise((resolve, reject) => {
+			const script = document.createElement('script')
+			script.type = 'text/javascript'
+			script.onload = resolve
+			script.onerror = reject
+			script.src = src
+			document.head.append(script)
+		})
+	};
+
+	async function loadScripts(urls) {
+		for(const url of urls) {
+			await loadScript(url);
+		}
+	}
+
+	return {
+		id: 'katex',
+
+		init: function (reveal) {
+
+			deck = reveal;
+
+			let revealOptions = deck.getConfig().katex || {};
+
+			let options = {...defaultOptions, ...revealOptions};
+			const {local, version, extensions, ...katexOptions} = options;
+
+			let baseUrl = options.local || 'https://cdn.jsdelivr.net/npm/katex';
+			let versionString = options.local ? '' : '@' + options.version;
+
+			let cssUrl = baseUrl + versionString + '/dist/katex.min.css';
+			let katexUrl = baseUrl + versionString + '/dist/katex.min.js';
+			let mhchemUrl = baseUrl + versionString + '/dist/contrib/mhchem.min.js'
+			let karUrl = baseUrl + versionString + '/dist/contrib/auto-render.min.js';
+
+			let katexScripts = [katexUrl];
+			if(options.extensions && options.extensions.includes("mhchem")) {
+				katexScripts.push(mhchemUrl);
+			}
+			katexScripts.push(karUrl);
+
+			const renderMath = () => {
+				renderMathInElement(reveal.getSlidesElement(), katexOptions);
+				deck.layout();
+			}
+
+			loadCss(cssUrl);
+
+			// For some reason dynamically loading with defer attribute doesn't result in the expected behavior, the below code does
+			loadScripts(katexScripts).then(() => {
+				if( deck.isReady() ) {
+					renderMath();
+				}
+				else {
+					deck.on( 'ready', renderMath.bind( this ) );
+				}
+			});
+
+		}
+	}
+
+};

plugin/math/math.esm.js

@@ -1 +1,6 @@
-function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function n(n){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?t(Object(a),!0).forEach((function(t){e(n,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):t(Object(a)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(a,e))}))}return n}export default function(){var e,t={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"math",init:function(r){var a=(e=r).getConfig().math||{},o=n(n({},t),a),c=(o.mathjax||"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js")+"?config="+(o.config||"TeX-AMS_HTML-full");o.tex2jax=n(n({},t.tex2jax),a.tex2jax),o.mathjax=o.config=null,function(e,t){var n=this,r=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=e;var o=function(){"function"==typeof t&&(t.call(),t=null)};a.onload=o,a.onreadystatechange=function(){"loaded"===n.readyState&&o()},r.appendChild(a)}(c,(function(){MathJax.Hub.Config(o),MathJax.Hub.Queue(["Typeset",MathJax.Hub,e.getRevealElement()]),MathJax.Hub.Queue(e.layout),e.on("slidechanged",(function(e){MathJax.Hub.Queue(["Typeset",MathJax.Hub,e.currentSlide])}))}))}}}
+const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(a){t=a;let n=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...n},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...n.tex2jax},i.mathjax=i.config=null,function(t,e){let a=document.querySelector("head"),n=document.createElement("script");n.type="text/javascript",n.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};n.onload=i,n.onreadystatechange=()=>{"loaded"===this.readyState&&i()},a.appendChild(n)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;
+/*!
+ * This plugin is a wrapper for the MathJax2,
+ * MathJax3 and KaTeX typesetter plugins.
+ */
+var a=Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const a=t=>new Promise(((e,a)=>{const n=document.createElement("script");n.type="text/javascript",n.onload=e,n.onerror=a,n.src=t,document.head.append(n)}));return{id:"katex",init:function(n){t=n;let i=t.getConfig().katex||{},s={...e,...i};const{local:l,version:o,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",p=s.local?"":"@"+s.version,u=d+p+"/dist/katex.min.css",h=d+p+"/dist/contrib/mhchem.min.js",x=d+p+"/dist/contrib/auto-render.min.js",m=[d+p+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(n.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(u),async function(t){for(const e of t)await a(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(a){t=a;let n=t.getConfig().mathjax3||{},i={...e,...n};i.tex={...e.tex,...n.tex},i.options={...e.options,...n.options},i.startup={...e.startup,...n.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let a=document.createElement("script");a.type="text/javascript",a.id="MathJax-script",a.src=t,a.async=!0,a.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(a)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}});export default a;

plugin/math/math.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealMath=t()}(this,(function(){"use strict";function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function n(n){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?t(Object(a),!0).forEach((function(t){e(n,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):t(Object(a)).forEach((function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(a,e))}))}return n}return function(){var e,t={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"math",init:function(r){var a=(e=r).getConfig().math||{},o=n(n({},t),a),i=(o.mathjax||"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js")+"?config="+(o.config||"TeX-AMS_HTML-full");o.tex2jax=n(n({},t.tex2jax),a.tex2jax),o.mathjax=o.config=null,function(e,t){var n=this,r=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=e;var o=function(){"function"==typeof t&&(t.call(),t=null)};a.onload=o,a.onreadystatechange=function(){"loaded"===n.readyState&&o()},r.appendChild(a)}(i,(function(){MathJax.Hub.Config(o),MathJax.Hub.Queue(["Typeset",MathJax.Hub,e.getRevealElement()]),MathJax.Hub.Queue(e.layout),e.on("slidechanged",(function(e){MathJax.Hub.Queue(["Typeset",MathJax.Hub,e.currentSlide])}))}))}}}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).RevealMath=e()}(this,(function(){"use strict";const t=()=>{let t,e={messageStyle:"none",tex2jax:{inlineMath:[["$","$"],["\\(","\\)"]],skipTags:["script","noscript","style","textarea","pre"]},skipStartupTypeset:!0};return{id:"mathjax2",init:function(n){t=n;let a=t.getConfig().mathjax2||t.getConfig().math||{},i={...e,...a},s=(i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js")+"?config="+(i.config||"TeX-AMS_HTML-full");i.tex2jax={...e.tex2jax,...a.tex2jax},i.mathjax=i.config=null,function(t,e){let n=document.querySelector("head"),a=document.createElement("script");a.type="text/javascript",a.src=t;let i=()=>{"function"==typeof e&&(e.call(),e=null)};a.onload=i,a.onreadystatechange=()=>{"loaded"===this.readyState&&i()},n.appendChild(a)}(s,(function(){MathJax.Hub.Config(i),MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.getRevealElement()]),MathJax.Hub.Queue(t.layout),t.on("slidechanged",(function(t){MathJax.Hub.Queue(["Typeset",MathJax.Hub,t.currentSlide])}))}))}}},e=t;return Plugin=Object.assign(e(),{KaTeX:()=>{let t,e={version:"latest",delimiters:[{left:"$$",right:"$$",display:!0},{left:"$",right:"$",display:!1},{left:"\\(",right:"\\)",display:!1},{left:"\\[",right:"\\]",display:!0}],ignoredTags:["script","noscript","style","textarea","pre"]};const n=t=>new Promise(((e,n)=>{const a=document.createElement("script");a.type="text/javascript",a.onload=e,a.onerror=n,a.src=t,document.head.append(a)}));return{id:"katex",init:function(a){t=a;let i=t.getConfig().katex||{},s={...e,...i};const{local:o,version:l,extensions:r,...c}=s;let d=s.local||"https://cdn.jsdelivr.net/npm/katex",u=s.local?"":"@"+s.version,p=d+u+"/dist/katex.min.css",h=d+u+"/dist/contrib/mhchem.min.js",x=d+u+"/dist/contrib/auto-render.min.js",m=[d+u+"/dist/katex.min.js"];s.extensions&&s.extensions.includes("mhchem")&&m.push(h),m.push(x);const f=()=>{renderMathInElement(a.getSlidesElement(),c),t.layout()};(t=>{let e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)})(p),async function(t){for(const e of t)await n(e)}(m).then((()=>{t.isReady()?f():t.on("ready",f.bind(this))}))}}},MathJax2:t,MathJax3:()=>{let t,e={tex:{inlineMath:[["$","$"],["\\(","\\)"]]},options:{skipHtmlTags:["script","noscript","style","textarea","pre"]},startup:{ready:()=>{MathJax.startup.defaultReady(),MathJax.startup.promise.then((()=>{Reveal.layout()}))}}};return{id:"mathjax3",init:function(n){t=n;let a=t.getConfig().mathjax3||{},i={...e,...a};i.tex={...e.tex,...a.tex},i.options={...e.options,...a.options},i.startup={...e.startup,...a.startup};let s=i.mathjax||"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";i.mathjax=null,window.MathJax=i,function(t,e){let n=document.createElement("script");n.type="text/javascript",n.id="MathJax-script",n.src=t,n.async=!0,n.onload=()=>{"function"==typeof e&&(e.call(),e=null)},document.head.appendChild(n)}(s,(function(){Reveal.addEventListener("slidechanged",(function(t){MathJax.typeset()}))}))}}}})}));

plugin/math/mathjax2.js

@@ -0,0 +1,89 @@
+/**
+ * A plugin which enables rendering of math equations inside
+ * of reveal.js slides. Essentially a thin wrapper for MathJax.
+ *
+ * @author Hakim El Hattab
+ */
+export const MathJax2 = () => {
+
+	// The reveal.js instance this plugin is attached to
+	let deck;
+
+	let defaultOptions = {
+		messageStyle: 'none',
+		tex2jax: {
+			inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
+			skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
+		},
+		skipStartupTypeset: true
+	};
+
+	function loadScript( url, callback ) {
+
+		let head = document.querySelector( 'head' );
+		let script = document.createElement( 'script' );
+		script.type = 'text/javascript';
+		script.src = url;
+
+		// Wrapper for callback to make sure it only fires once
+		let finish = () => {
+			if( typeof callback === 'function' ) {
+				callback.call();
+				callback = null;
+			}
+		}
+
+		script.onload = finish;
+
+		// IE
+		script.onreadystatechange = () => {
+			if ( this.readyState === 'loaded' ) {
+				finish();
+			}
+		}
+
+		// Normal browsers
+		head.appendChild( script );
+
+	}
+
+	return {
+		id: 'mathjax2',
+
+		init: function( reveal ) {
+
+			deck = reveal;
+
+			let revealOptions = deck.getConfig().mathjax2 || deck.getConfig().math || {};
+
+			let options = { ...defaultOptions, ...revealOptions };
+			let mathjax = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js';
+			let config = options.config || 'TeX-AMS_HTML-full';
+			let url = mathjax + '?config=' + config;
+
+			options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.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, deck.getRevealElement() ] );
+				MathJax.Hub.Queue( deck.layout );
+
+				// Reprocess equations in slides when they turn visible
+				deck.on( 'slidechanged', function( event ) {
+
+					MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
+
+				} );
+
+			} );
+
+		}
+	}
+
+};

plugin/math/mathjax3.js

@@ -0,0 +1,77 @@
+/**
+ * A plugin which enables rendering of math equations inside
+ * of reveal.js slides. Essentially a thin wrapper for MathJax 3
+ *
+ * @author Hakim El Hattab
+ * @author Gerhard Burger
+ */
+export const MathJax3 = () => {
+
+    // The reveal.js instance this plugin is attached to
+    let deck;
+
+    let defaultOptions = {
+        tex: {
+            inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ]  ]
+        },
+        options: {
+            skipHtmlTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
+        },
+        startup: {
+            ready: () => {
+                MathJax.startup.defaultReady();
+                MathJax.startup.promise.then(() => {
+                    Reveal.layout();
+                });
+            }
+        }
+    };
+
+    function loadScript( url, callback ) {
+
+        let script = document.createElement( 'script' );
+        script.type = "text/javascript"
+        script.id = "MathJax-script"
+        script.src = url;
+        script.async = true
+
+        // Wrapper for callback to make sure it only fires once
+        script.onload = () => {
+            if (typeof callback === 'function') {
+                callback.call();
+                callback = null;
+            }
+        };
+
+        document.head.appendChild( script );
+
+    }
+
+    return {
+        id: 'mathjax3',
+        init: function(reveal) {
+
+            deck = reveal;
+
+            let revealOptions = deck.getConfig().mathjax3 || {};
+            let options = {...defaultOptions, ...revealOptions};
+            options.tex = {...defaultOptions.tex, ...revealOptions.tex}
+            options.options = {...defaultOptions.options, ...revealOptions.options}
+            options.startup = {...defaultOptions.startup, ...revealOptions.startup}
+
+            let url = options.mathjax || 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js';
+            options.mathjax = null;
+
+            window.MathJax = options;
+
+            loadScript( url, function() {
+                // Reprocess equations in slides when they turn visible
+                Reveal.addEventListener( 'slidechanged', function( event ) {
+                    MathJax.typeset();
+                } );
+            } );
+
+        }
+    }
+
+};

plugin/math/plugin.js

@@ -1,91 +1,15 @@
-/**
- * A plugin which enables rendering of math equations inside
- * of reveal.js slides. Essentially a thin wrapper for MathJax.
- *
- * @author Hakim El Hattab
+import {KaTeX} from "./katex";
+import {MathJax2} from "./mathjax2";
+import {MathJax3} from "./mathjax3";
+
+const defaultTypesetter = MathJax2;
+
+/*!
+ * This plugin is a wrapper for the MathJax2,
+ * MathJax3 and KaTeX typesetter plugins.
  */
-const Plugin = () => {
-
-	// The reveal.js instance this plugin is attached to
-	let deck;
-
-	let defaultOptions = {
-		messageStyle: 'none',
-		tex2jax: {
-			inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
-			skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
-		},
-		skipStartupTypeset: true
-	};
-
-	function loadScript( url, callback ) {
-
-		let head = document.querySelector( 'head' );
-		let script = document.createElement( 'script' );
-		script.type = 'text/javascript';
-		script.src = url;
-
-		// Wrapper for callback to make sure it only fires once
-		let finish = () => {
-			if( typeof callback === 'function' ) {
-				callback.call();
-				callback = null;
-			}
-		}
-
-		script.onload = finish;
-
-		// IE
-		script.onreadystatechange = () => {
-			if ( this.readyState === 'loaded' ) {
-				finish();
-			}
-		}
-
-		// Normal browsers
-		head.appendChild( script );
-
-	}
-
-	return {
-		id: 'math',
-
-		init: function( reveal ) {
-
-			deck = reveal;
-
-			let revealOptions = deck.getConfig().math || {};
-
-			let options = { ...defaultOptions, ...revealOptions };
-			let mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
-			let config = options.config || 'TeX-AMS_HTML-full';
-			let url = mathjax + '?config=' + config;
-
-			options.tex2jax = { ...defaultOptions.tex2jax, ...revealOptions.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, deck.getRevealElement() ] );
-				MathJax.Hub.Queue( deck.layout );
-
-				// Reprocess equations in slides when they turn visible
-				deck.on( 'slidechanged', function( event ) {
-
-					MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
-
-				} );
-
-			} );
-
-		}
-	}
-
-};
-
-export default Plugin;
+export default Plugin = Object.assign( defaultTypesetter(), {
+	KaTeX,
+	MathJax2,
+	MathJax3
+} );

plugin/notes/plugin.js

@@ -1,6 +1,6 @@
-import speakerViewHTML from './speaker-view.html';
+import speakerViewHTML from './speaker-view.html'
 
-import marked from 'marked';
+import { marked } from 'marked';
 
 /**
  * Handles opening of and synchronization with the reveal.js
@@ -15,141 +15,197 @@ import marked from 'marked';
  */
 const Plugin = () => {
 
-    let popup = null;
+	let connectInterval;
+	let speakerWindow = null;
+	let deck;
 
-    let deck;
+	/**
+	 * Opens a new speaker view window.
+	 */
+	function openSpeakerWindow() {
 
-	function openNotes() {
+		// If a window is already open, focus it
+		if( speakerWindow && !speakerWindow.closed ) {
+			speakerWindow.focus();
+		}
+		else {
+			speakerWindow = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
+			speakerWindow.marked = marked;
+			speakerWindow.document.write( speakerViewHTML );
 
-        if (popup && !popup.closed) {
-            popup.focus();
-            return;
-        }
+			if( !speakerWindow ) {
+				alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
+				return;
+			}
 
-		popup = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
-		popup.marked = marked;
-		popup.document.write( speakerViewHTML );
-
-		if( !popup ) {
-			alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
-			return;
+			connect();
 		}
 
-		/**
-		 * Connect to the notes window through a postmessage handshake.
-		 * Using postmessage enables us to work in situations where the
-		 * origins differ, such as a presentation being opened from the
-		 * file system.
-		 */
-		function connect() {
-			// Keep trying to connect until we get a 'connected' message back
-			let connectInterval = setInterval( function() {
-				popup.postMessage( JSON.stringify( {
-					namespace: 'reveal-notes',
-					type: 'connect',
-					url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
-					state: deck.getState()
-				} ), '*' );
-			}, 500 );
+	}
 
-			window.addEventListener( 'message', function( event ) {
-				let data = JSON.parse( event.data );
-				if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
-					clearInterval( connectInterval );
-					onConnected();
-				}
-				if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
-					callRevealApi( data.methodName, data.arguments, data.callId );
-				}
-			} );
+	/**
+	 * Reconnect with an existing speaker view window.
+	 */
+	function reconnectSpeakerWindow( reconnectWindow ) {
+
+		if( speakerWindow && !speakerWindow.closed ) {
+			speakerWindow.focus();
+		}
+		else {
+			speakerWindow = reconnectWindow;
+			window.addEventListener( 'message', onPostMessage );
+			onConnected();
 		}
 
-		/**
-		 * Calls the specified Reveal.js method with the provided argument
-		 * and then pushes the result to the notes frame.
-		 */
-		function callRevealApi( methodName, methodArguments, callId ) {
+	}
 
-			let result = deck[methodName].apply( deck, methodArguments );
-			popup.postMessage( JSON.stringify( {
+	/**
+		* Connect to the notes window through a postmessage handshake.
+		* Using postmessage enables us to work in situations where the
+		* origins differ, such as a presentation being opened from the
+		* file system.
+		*/
+	function connect() {
+
+		const presentationURL = deck.getConfig().url;
+
+		const url = typeof presentationURL === 'string' ? presentationURL :
+								window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search;
+
+		// Keep trying to connect until we get a 'connected' message back
+		connectInterval = setInterval( function() {
+			speakerWindow.postMessage( JSON.stringify( {
 				namespace: 'reveal-notes',
-				type: 'return',
-				result: result,
-				callId: callId
+				type: 'connect',
+				state: deck.getState(),
+				url
 			} ), '*' );
+		}, 500 );
 
+		window.addEventListener( 'message', onPostMessage );
+
+	}
+
+	/**
+	 * Calls the specified Reveal.js method with the provided argument
+	 * and then pushes the result to the notes frame.
+	 */
+	function callRevealApi( methodName, methodArguments, callId ) {
+
+		let result = deck[methodName].apply( deck, methodArguments );
+		speakerWindow.postMessage( JSON.stringify( {
+			namespace: 'reveal-notes',
+			type: 'return',
+			result,
+			callId
+		} ), '*' );
+
+	}
+
+	/**
+	 * Posts the current slide data to the notes window.
+	 */
+	function post( event ) {
+
+		let slideElement = deck.getCurrentSlide(),
+			notesElements = slideElement.querySelectorAll( 'aside.notes' ),
+			fragmentElement = slideElement.querySelector( '.current-fragment' );
+
+		let messageData = {
+			namespace: 'reveal-notes',
+			type: 'state',
+			notes: '',
+			markdown: false,
+			whitespace: 'normal',
+			state: deck.getState()
+		};
+
+		// Look for notes defined in a slide attribute
+		if( slideElement.hasAttribute( 'data-notes' ) ) {
+			messageData.notes = slideElement.getAttribute( 'data-notes' );
+			messageData.whitespace = 'pre-wrap';
 		}
 
-		/**
-		 * Posts the current slide data to the notes window
-		 */
-		function post( event ) {
+		// Look for notes defined in a fragment
+		if( fragmentElement ) {
+			let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
+			if( fragmentNotes ) {
+				messageData.notes = fragmentNotes.innerHTML;
+				messageData.markdown = typeof fragmentNotes.getAttribute( 'data-markdown' ) === 'string';
 
-			let slideElement = deck.getCurrentSlide(),
-				notesElement = slideElement.querySelector( 'aside.notes' ),
-				fragmentElement = slideElement.querySelector( '.current-fragment' );
-
-			let messageData = {
-				namespace: 'reveal-notes',
-				type: 'state',
-				notes: '',
-				markdown: false,
-				whitespace: 'normal',
-				state: deck.getState()
-			};
-
-			// Look for notes defined in a slide attribute
-			if( slideElement.hasAttribute( 'data-notes' ) ) {
-				messageData.notes = slideElement.getAttribute( 'data-notes' );
+				// Ignore other slide notes
+				notesElements = null;
+			}
+			else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
+				messageData.notes = fragmentElement.getAttribute( 'data-notes' );
 				messageData.whitespace = 'pre-wrap';
+
+				// In case there are slide notes
+				notesElements = null;
 			}
+		}
 
-			// Look for notes defined in a fragment
-			if( fragmentElement ) {
-				let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
-				if( fragmentNotes ) {
-					notesElement = fragmentNotes;
-				}
-				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
-					messageData.notes = fragmentElement.getAttribute( 'data-notes' );
-					messageData.whitespace = 'pre-wrap';
+		// Look for notes defined in an aside element
+		if( notesElements ) {
+			messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
+			messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
+		}
 
-					// In case there are slide notes
-					notesElement = null;
-				}
+		speakerWindow.postMessage( JSON.stringify( messageData ), '*' );
+
+	}
+
+	/**
+	 * Check if the given event is from the same origin as the
+	 * current window.
+	 */
+	function isSameOriginEvent( event ) {
+
+		try {
+			return window.location.origin === event.source.location.origin;
+		}
+		catch ( error ) {
+			return false;
+		}
+
+	}
+
+	function onPostMessage( event ) {
+
+		// Only allow same-origin messages
+		// (added 12/5/22 as a XSS safeguard)
+		if( isSameOriginEvent( event ) ) {
+
+			let data = JSON.parse( event.data );
+			if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
+				clearInterval( connectInterval );
+				onConnected();
 			}
-
-			// Look for notes defined in an aside element
-			if( notesElement ) {
-				messageData.notes = notesElement.innerHTML;
-				messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
+			else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
+				callRevealApi( data.methodName, data.arguments, data.callId );
 			}
 
-			popup.postMessage( JSON.stringify( messageData ), '*' );
-
 		}
 
-		/**
-		 * Called once we have established a connection to the notes
-		 * window.
-		 */
-		function onConnected() {
+	}
 
-			// Monitor events that trigger a change in state
-			deck.on( 'slidechanged', post );
-			deck.on( 'fragmentshown', post );
-			deck.on( 'fragmenthidden', post );
-			deck.on( 'overviewhidden', post );
-			deck.on( 'overviewshown', post );
-			deck.on( 'paused', post );
-			deck.on( 'resumed', post );
+	/**
+	 * Called once we have established a connection to the notes
+	 * window.
+	 */
+	function onConnected() {
 
-			// Post the initial state
-			post();
+		// Monitor events that trigger a change in state
+		deck.on( 'slidechanged', post );
+		deck.on( 'fragmentshown', post );
+		deck.on( 'fragmenthidden', post );
+		deck.on( 'overviewhidden', post );
+		deck.on( 'overviewshown', post );
+		deck.on( 'paused', post );
+		deck.on( 'resumed', post );
 
-		}
-
-		connect();
+		// Post the initial state
+		post();
 
 	}
 
@@ -164,19 +220,40 @@ const Plugin = () => {
 
 				// If the there's a 'notes' query set, open directly
 				if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
-					openNotes();
+					openSpeakerWindow();
+				}
+				else {
+					// Keep listening for speaker view hearbeats. If we receive a
+					// heartbeat from an orphaned window, reconnect it. This ensures
+					// that we remain connected to the notes even if the presentation
+					// is reloaded.
+					window.addEventListener( 'message', event => {
+
+						if( !speakerWindow && typeof event.data === 'string' ) {
+							let data;
+
+							try {
+								data = JSON.parse( event.data );
+							}
+							catch( error ) {}
+
+							if( data && data.namespace === 'reveal-notes' && data.type === 'heartbeat' ) {
+								reconnectSpeakerWindow( event.source );
+							}
+						}
+					});
 				}
 
 				// Open the notes when the 's' key is hit
 				deck.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
-					openNotes();
+					openSpeakerWindow();
 				} );
 
 			}
 
 		},
 
-		open: openNotes
+		open: openSpeakerWindow
 	};
 
 };

plugin/notes/speaker-view.html

@@ -1,3 +1,6 @@
+<!--
+	NOTE: You need to build the notes plugin after making changes to this file.
+-->
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
@@ -347,7 +350,9 @@
 					layoutDropdown,
 					pendingCalls = {},
 					lastRevealApiCallId = 0,
-					connected = false;
+					connected = false
+
+				var connectionStatus = document.querySelector( '#connection-status' );
 
 				var SPEAKER_LAYOUTS = {
 					'default': 'Default',
@@ -358,7 +363,20 @@
 
 				setupLayout();
 
-				var connectionStatus = document.querySelector( '#connection-status' );
+				let openerOrigin;
+
+				try {
+					openerOrigin = window.opener.location.origin;
+				}
+				catch ( error ) { console.warn( error ) }
+
+				// In order to prevent XSS, the speaker view will only run if its
+				// opener has the same origin as itself
+				if( window.location.origin !== openerOrigin ) {
+					connectionStatus.innerHTML = 'Cross origin error.<br>The speaker window can only be opened from the same origin.';
+					return;
+				}
+
 				var connectionTimeout = setTimeout( function() {
 					connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
 				}, 5000 );
@@ -395,13 +413,21 @@
 						}
 						else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
 
-							window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
+							dispatchStateToMainWindow( data.state );
 
 						}
 					}
 
 				} );
 
+				/**
+				 * Updates the presentation in the main window to match the state
+				 * of the presentation in the notes window.
+				 */
+				const dispatchStateToMainWindow = debounce(( state ) => {
+					window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ state ]} ), '*' );
+				}, 500);
+
 				/**
 				 * Asynchronously calls the Reveal.js API of the main frame.
 				 */
@@ -432,6 +458,7 @@
 						setupKeyboard();
 						setupNotes();
 						setupTimer();
+						setupHeartbeat();
 					}
 
 				}
@@ -533,6 +560,18 @@
 
 				}
 
+				/**
+				 * We send out a heartbeat at all times to ensure we can
+				 * reconnect with the main presentation window after reloads.
+				 */
+				function setupHeartbeat() {
+
+					setInterval( () => {
+						window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'heartbeat'} ), '*' );
+					}, 1000 );
+
+				}
+
 				function getTimings( callback ) {
 
 					callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {

plugin/zoom/plugin.js

@@ -25,6 +25,12 @@ const Plugin = {
 			}
 		} );
 
+	},
+
+	destroy: () => {
+
+		zoom.reset();
+
 	}
 
 };
@@ -52,19 +58,11 @@ var zoom = (function(){
 		panUpdateInterval = -1;
 
 	// Check for transform support so that we can fallback otherwise
-	var supportsTransforms = 	'WebkitTransform' in document.body.style ||
-								'MozTransform' in document.body.style ||
-								'msTransform' in document.body.style ||
-								'OTransform' in document.body.style ||
-								'transform' in document.body.style;
+	var supportsTransforms = 	'transform' in document.body.style;
 
 	if( supportsTransforms ) {
 		// The easing that will be applied when we zoom in/out
 		document.body.style.transition = 'transform 0.8s ease';
-		document.body.style.OTransition = '-o-transform 0.8s ease';
-		document.body.style.msTransition = '-ms-transform 0.8s ease';
-		document.body.style.MozTransition = '-moz-transform 0.8s ease';
-		document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
 	}
 
 	// Zoom out if the user hits escape
@@ -105,10 +103,6 @@ var zoom = (function(){
 			// Reset
 			if( scale === 1 ) {
 				document.body.style.transform = '';
-				document.body.style.OTransform = '';
-				document.body.style.msTransform = '';
-				document.body.style.MozTransform = '';
-				document.body.style.WebkitTransform = '';
 			}
 			// Scale
 			else {
@@ -116,16 +110,7 @@ var zoom = (function(){
 					transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
 
 				document.body.style.transformOrigin = origin;
-				document.body.style.OTransformOrigin = origin;
-				document.body.style.msTransformOrigin = origin;
-				document.body.style.MozTransformOrigin = origin;
-				document.body.style.WebkitTransformOrigin = origin;
-
 				document.body.style.transform = transform;
-				document.body.style.OTransform = transform;
-				document.body.style.msTransform = transform;
-				document.body.style.MozTransform = transform;
-				document.body.style.WebkitTransform = transform;
 			}
 		}
 		else {

plugin/zoom/zoom.esm.js

@@ -1,4 +1,11 @@
 /*!
  * reveal.js Zoom plugin
  */
-var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(o){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;o[i]&&!e.isOverview()&&(o.preventDefault(),t.to({x:o.clientX,y:o.clientY,scale:d,pan:!1}))}))}},t=function(){var e=1,o=0,n=0,i=-1,d=-1,s="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style;function r(t,o){var n=y();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*o)/2,t.y-=(window.innerHeight-t.height*o)/2,s)if(1===o)document.body.style.transform="",document.body.style.OTransform="",document.body.style.msTransform="",document.body.style.MozTransform="",document.body.style.WebkitTransform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+o+")";document.body.style.transformOrigin=i,document.body.style.OTransformOrigin=i,document.body.style.msTransformOrigin=i,document.body.style.MozTransformOrigin=i,document.body.style.WebkitTransformOrigin=i,document.body.style.transform=d,document.body.style.OTransform=d,document.body.style.msTransform=d,document.body.style.MozTransform=d,document.body.style.WebkitTransform=d}else 1===o?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+t.x)/o+"px",document.body.style.top=-(n.y+t.y)/o+"px",document.body.style.width=100*o+"%",document.body.style.height=100*o+"%",document.body.style.zoom=o);e=o,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function m(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=y();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),o<t?window.scroll(d.x-14/e*(1-o/t),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/e),d.y)}function y(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return s&&(document.body.style.transition="transform 0.8s ease",document.body.style.OTransition="-o-transform 0.8s ease",document.body.style.msTransition="-ms-transform 0.8s ease",document.body.style.MozTransition="-moz-transform 0.8s ease",document.body.style.WebkitTransition="-webkit-transform 0.8s ease"),document.addEventListener("keyup",(function(o){1!==e&&27===o.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(o=t.clientX,n=t.clientY)})),{to:function(o){if(1!==e)t.out();else{if(o.x=o.x||0,o.y=o.y||0,o.element){var n=o.element.getBoundingClientRect();o.x=n.left-20,o.y=n.top-20,o.width=n.width+40,o.height=n.height+40}void 0!==o.width&&void 0!==o.height&&(o.scale=Math.max(Math.min(window.innerWidth/o.width,window.innerHeight/o.height),1)),o.scale>1&&(o.x*=o.scale,o.y*=o.scale,r(o,o.scale),!1!==o.pan&&(i=setTimeout((function(){d=setInterval(m,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),r({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();export default function(){return e}
+const e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(o){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;o[i]&&!e.isOverview()&&(o.preventDefault(),t.to({x:o.clientX,y:o.clientY,scale:d,pan:!1}))}))},destroy:()=>{t.reset()}};var t=function(){var e=1,o=0,n=0,i=-1,d=-1,l="transform"in document.body.style;function s(t,o){var n=r();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*o)/2,t.y-=(window.innerHeight-t.height*o)/2,l)if(1===o)document.body.style.transform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+o+")";document.body.style.transformOrigin=i,document.body.style.transform=d}else 1===o?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+t.x)/o+"px",document.body.style.top=-(n.y+t.y)/o+"px",document.body.style.width=100*o+"%",document.body.style.height=100*o+"%",document.body.style.zoom=o);e=o,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function c(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=r();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),o<t?window.scroll(d.x-14/e*(1-o/t),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/e),d.y)}function r(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return l&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",(function(o){1!==e&&27===o.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(o=t.clientX,n=t.clientY)})),{to:function(o){if(1!==e)t.out();else{if(o.x=o.x||0,o.y=o.y||0,o.element){var n=o.element.getBoundingClientRect();o.x=n.left-20,o.y=n.top-20,o.width=n.width+40,o.height=n.height+40}void 0!==o.width&&void 0!==o.height&&(o.scale=Math.max(Math.min(window.innerWidth/o.width,window.innerHeight/o.height),1)),o.scale>1&&(o.x*=o.scale,o.y*=o.scale,s(o,o.scale),!1!==o.pan&&(i=setTimeout((function(){d=setInterval(c,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),s({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();
+/*!
+ * zoom.js 0.3 (modified for use with reveal.js)
+ * http://lab.hakim.se/zoom-js
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
+ */export default()=>e;

plugin/zoom/zoom.js

@@ -1,4 +1,11 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o():"function"==typeof define&&define.amd?define(o):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealZoom=o()}(this,(function(){"use strict";
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).RevealZoom=t()}(this,(function(){"use strict";
 /*!
 	 * reveal.js Zoom plugin
-	 */var e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(t){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;t[i]&&!e.isOverview()&&(t.preventDefault(),o.to({x:t.clientX,y:t.clientY,scale:d,pan:!1}))}))}},o=function(){var e=1,t=0,n=0,i=-1,d=-1,s="WebkitTransform"in document.body.style||"MozTransform"in document.body.style||"msTransform"in document.body.style||"OTransform"in document.body.style||"transform"in document.body.style;function r(o,t){var n=l();if(o.width=o.width||1,o.height=o.height||1,o.x-=(window.innerWidth-o.width*t)/2,o.y-=(window.innerHeight-o.height*t)/2,s)if(1===t)document.body.style.transform="",document.body.style.OTransform="",document.body.style.msTransform="",document.body.style.MozTransform="",document.body.style.WebkitTransform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-o.x+"px,"+-o.y+"px) scale("+t+")";document.body.style.transformOrigin=i,document.body.style.OTransformOrigin=i,document.body.style.msTransformOrigin=i,document.body.style.MozTransformOrigin=i,document.body.style.WebkitTransformOrigin=i,document.body.style.transform=d,document.body.style.OTransform=d,document.body.style.msTransform=d,document.body.style.MozTransform=d,document.body.style.WebkitTransform=d}else 1===t?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+o.x)/t+"px",document.body.style.top=-(n.y+o.y)/t+"px",document.body.style.width=100*t+"%",document.body.style.height=100*t+"%",document.body.style.zoom=t);e=t,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function m(){var o=.12*window.innerWidth,i=.12*window.innerHeight,d=l();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),t<o?window.scroll(d.x-14/e*(1-t/o),d.y):t>window.innerWidth-o&&window.scroll(d.x+(1-(window.innerWidth-t)/o)*(14/e),d.y)}function l(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return s&&(document.body.style.transition="transform 0.8s ease",document.body.style.OTransition="-o-transform 0.8s ease",document.body.style.msTransition="-ms-transform 0.8s ease",document.body.style.MozTransition="-moz-transform 0.8s ease",document.body.style.WebkitTransition="-webkit-transform 0.8s ease"),document.addEventListener("keyup",(function(t){1!==e&&27===t.keyCode&&o.out()})),document.addEventListener("mousemove",(function(o){1!==e&&(t=o.clientX,n=o.clientY)})),{to:function(t){if(1!==e)o.out();else{if(t.x=t.x||0,t.y=t.y||0,t.element){var n=t.element.getBoundingClientRect();t.x=n.left-20,t.y=n.top-20,t.width=n.width+40,t.height=n.height+40}void 0!==t.width&&void 0!==t.height&&(t.scale=Math.max(Math.min(window.innerWidth/t.width,window.innerHeight/t.height),1)),t.scale>1&&(t.x*=t.scale,t.y*=t.scale,r(t,t.scale),!1!==t.pan&&(i=setTimeout((function(){d=setInterval(m,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),r({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();return function(){return e}}));
+	 */const e={id:"zoom",init:function(e){e.getRevealElement().addEventListener("mousedown",(function(o){var n=/Linux/.test(window.navigator.platform)?"ctrl":"alt",i=(e.getConfig().zoomKey?e.getConfig().zoomKey:n)+"Key",d=e.getConfig().zoomLevel?e.getConfig().zoomLevel:2;o[i]&&!e.isOverview()&&(o.preventDefault(),t.to({x:o.clientX,y:o.clientY,scale:d,pan:!1}))}))},destroy:()=>{t.reset()}};var t=function(){var e=1,o=0,n=0,i=-1,d=-1,l="transform"in document.body.style;function s(t,o){var n=r();if(t.width=t.width||1,t.height=t.height||1,t.x-=(window.innerWidth-t.width*o)/2,t.y-=(window.innerHeight-t.height*o)/2,l)if(1===o)document.body.style.transform="";else{var i=n.x+"px "+n.y+"px",d="translate("+-t.x+"px,"+-t.y+"px) scale("+o+")";document.body.style.transformOrigin=i,document.body.style.transform=d}else 1===o?(document.body.style.position="",document.body.style.left="",document.body.style.top="",document.body.style.width="",document.body.style.height="",document.body.style.zoom=""):(document.body.style.position="relative",document.body.style.left=-(n.x+t.x)/o+"px",document.body.style.top=-(n.y+t.y)/o+"px",document.body.style.width=100*o+"%",document.body.style.height=100*o+"%",document.body.style.zoom=o);e=o,document.documentElement.classList&&(1!==e?document.documentElement.classList.add("zoomed"):document.documentElement.classList.remove("zoomed"))}function c(){var t=.12*window.innerWidth,i=.12*window.innerHeight,d=r();n<i?window.scroll(d.x,d.y-14/e*(1-n/i)):n>window.innerHeight-i&&window.scroll(d.x,d.y+(1-(window.innerHeight-n)/i)*(14/e)),o<t?window.scroll(d.x-14/e*(1-o/t),d.y):o>window.innerWidth-t&&window.scroll(d.x+(1-(window.innerWidth-o)/t)*(14/e),d.y)}function r(){return{x:void 0!==window.scrollX?window.scrollX:window.pageXOffset,y:void 0!==window.scrollY?window.scrollY:window.pageYOffset}}return l&&(document.body.style.transition="transform 0.8s ease"),document.addEventListener("keyup",(function(o){1!==e&&27===o.keyCode&&t.out()})),document.addEventListener("mousemove",(function(t){1!==e&&(o=t.clientX,n=t.clientY)})),{to:function(o){if(1!==e)t.out();else{if(o.x=o.x||0,o.y=o.y||0,o.element){var n=o.element.getBoundingClientRect();o.x=n.left-20,o.y=n.top-20,o.width=n.width+40,o.height=n.height+40}void 0!==o.width&&void 0!==o.height&&(o.scale=Math.max(Math.min(window.innerWidth/o.width,window.innerHeight/o.height),1)),o.scale>1&&(o.x*=o.scale,o.y*=o.scale,s(o,o.scale),!1!==o.pan&&(i=setTimeout((function(){d=setInterval(c,1e3/60)}),800)))}},out:function(){clearTimeout(i),clearInterval(d),s({x:0,y:0},1),e=1},magnify:function(e){this.to(e)},reset:function(){this.out()},zoomLevel:function(){return e}}}();
+/*!
+	 * zoom.js 0.3 (modified for use with reveal.js)
+	 * http://lab.hakim.se/zoom-js
+	 * MIT licensed
+	 *
+	 * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
+	 */return()=>e}));

test/simple.md

@@ -9,4 +9,4 @@ var a = 1;
 
 
 
-## Slide 2
+## Slide 2

test/test-auto-animate.html

@@ -23,19 +23,19 @@
 				<section data-auto-animate>
 					<h1>h1</h1>
 					<h2>h2</h2>
-					<h3 style="position: absolute; left: 0;">h3</h2>
+					<h3 style="position: absolute; left: 0;">h3</h3>
 				</section>
 
 				<section data-auto-animate>
 					<h1 data-auto-animate-duration="0.1">h1</h1>
 					<h2 style="opacity: 0;">h2</h2>
-					<h3 style="position: absolute; left: 100px;">h3</h2>
+					<h3 style="position: absolute; left: 100px;">h3</h3>
 				</section>
 
 				<section data-auto-animate data-auto-animate-duration="0.1">
 					<h1>h1</h1>
 					<h2>h2</h2>
-					<h3>h3</h2>
+					<h3>h3</h3>
 				</section>
 
 				<section>

test/test-markdown.html

@@ -281,6 +281,15 @@
 						```
 					</script>
 				</section>
+				<section data-markdown class="with-code-in-fragment">
+					<script type="text/template">
+					```js
+					foo.bar();
+					```
+
+					<!-- .element: class="fragment" -->
+					</script>
+				</section>
 			</div>
 		</div>
 
@@ -452,6 +461,10 @@
 				QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
 					assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
 				});
+				
+				QUnit.test( '```block should allow custom fragment', function( assert ) {
+					assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
+				});
 
 			} );
 

test/test.html

@@ -36,7 +36,7 @@
 					<section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
 						<h1>2.1</h1>
 					</section>
-					<section>
+					<section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
 						<h1>2.2</h1>
 					</section>
 					<section>
@@ -97,6 +97,11 @@
 			// 4
 			Reveal.initialize().then( function() {
 
+				// Helper methods
+				function triggerKeyboardEvent(config) {
+					document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
+				}
+
 				// ---------------------------------------------------------------
 				// DOM TESTS
 
@@ -336,38 +341,38 @@
 					Reveal.configure({ hash: true, fragmentInURL: false });
 
 					Reveal.slide( 2, 0 );
-					assert.strictEqual( window.location.hash, '#/2' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2' );
 
 					Reveal.slide( 2, 1 );
-					assert.strictEqual( window.location.hash, '#/2/1' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
 
 					Reveal.slide( 2, 0, 1 );
-					assert.strictEqual( window.location.hash, '#/2' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2' );
 
 					Reveal.slide( 2, 2, 0 );
-					assert.strictEqual( window.location.hash, '#/fragments3' );
+					assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
 
 					Reveal.slide( 2, 2, 1 );
-					assert.strictEqual( window.location.hash, '#/fragments3' );
+					assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
 				});
 
 				QUnit.test( 'Write (fragmentInURL: true)', function( assert ) {
 					Reveal.configure({ hash: true, fragmentInURL: true });
 
 					Reveal.slide( 2, 0, -1 );
-					assert.strictEqual( window.location.hash, '#/2' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2' );
 
 					Reveal.slide( 2, 1, -1 );
-					assert.strictEqual( window.location.hash, '#/2/1' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2/1' );
 
 					Reveal.slide( 2, 0, 1 );
-					assert.strictEqual( window.location.hash, '#/2/0/1' );
+					assert.strictEqual( Reveal.getSlidePath(), '/2/0/1' );
 
 					Reveal.slide( 2, 2, -1 );
-					assert.strictEqual( window.location.hash, '#/fragments3' );
+					assert.strictEqual( Reveal.getSlidePath(), '/fragments3' );
 
 					Reveal.slide( 2, 2, 1 );
-					assert.strictEqual( window.location.hash, '#/fragments3/1' );
+					assert.strictEqual( Reveal.getSlidePath(), '/fragments3/1' );
 				});
 
 				QUnit.test( 'Read', async function( assert ) {
@@ -407,13 +412,41 @@
 					assert.ok( /X\-SHORTCUT\-X/.test( document.body.innerHTML ), 'binding is added to help overlay' );
 					Reveal.toggleHelp( false );
 
-					let event = new KeyboardEvent( 'keydown', { 'keyCode':88 } );
-					document.dispatchEvent( event );
+					triggerKeyboardEvent({ keyCode: 88 });
 
 					Reveal.removeKeyBinding( 88 );
 
 					// should do nothing
-					document.dispatchEvent( event );
+					triggerKeyboardEvent({ keyCode: 88 });
+				});
+
+				QUnit.test( 'Navigation bindings', function( assert ) {
+					Reveal.slide( 0 );
+
+					// right arrow
+					triggerKeyboardEvent({ keyCode: 39 });
+					assert.strictEqual( Reveal.getIndices().h, 1 );
+
+					// down arrow + shift
+					triggerKeyboardEvent({ keyCode: 40, shiftKey: true });
+					assert.strictEqual( Reveal.getIndices().v, 2, 'shift + down arrow goes to last vertical slide' );
+
+					// up arrow
+					triggerKeyboardEvent({ keyCode: 38 });
+					assert.strictEqual( Reveal.getIndices().v, 1 );
+
+					// right arrow + shift
+					triggerKeyboardEvent({ keyCode: 39, shiftKey: true });
+					assert.ok( Reveal.isLastSlide(), 'shift + right arrow goes to last horizontal slide' );
+
+
+					// right arrow on slide with fragments
+					Reveal.slide( 2, 0, -1 );
+					triggerKeyboardEvent({ keyCode: 39 });
+					assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'right arrow shows fragment' );
+
+					triggerKeyboardEvent({ keyCode: 39, altKey: true });
+					assert.strictEqual( Reveal.getIndices().h, 3, 'right arrow skips fragments when alt key is pressed' );
 				});
 
 				// ---------------------------------------------------------------
@@ -694,7 +727,16 @@
 					Reveal.right();
 					assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
 
-					Reveal.configure({ loop: false });
+					Reveal.configure({ navigationMode: 'linear' });
+					Reveal.slide( 0, 0 );
+
+					Reveal.prev();
+					assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end in linear mode' );
+
+					Reveal.next();
+					assert.equal( Reveal.getIndices().h, 0, 'looped from end to start in linear mode' );
+
+					Reveal.configure({ loop: false, navigationMode: 'default' });
 				});
 
 
@@ -727,10 +769,12 @@
 				QUnit.test( 'background images', function( assert ) {
 					var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
 					var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
+					var imageSource3 = Reveal.getSlide( 1, 1 ).getAttribute( 'data-background-image' );
 
 					// check that the images are applied to the background elements
 					assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
 					assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
+					assert.ok( Reveal.getSlideBackground( 1, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
 				});
 
 
@@ -739,6 +783,31 @@
 
 				QUnit.module( 'Events' );
 
+				QUnit.test( 'beforeslidechange', function( assert ) {
+					var done = assert.async( 2 );
+
+					var normalEvent = function( event ) {
+						assert.ok( true, 'event fired' );
+						done();
+					}
+					var blockingEvent = function( event ) {
+						event.preventDefault();
+						assert.ok( true, 'event fired' );
+						done();
+					}
+
+					Reveal.on( 'beforeslidechange', normalEvent );
+					Reveal.slide( 2, 0 );
+					Reveal.off( 'beforeslidechange', normalEvent );
+
+					Reveal.on( 'beforeslidechange', blockingEvent );
+					Reveal.slide( 3, 0 );
+					Reveal.off( 'beforeslidechange', blockingEvent );
+
+					assert.strictEqual( Reveal.getIndices().h, 2, 'preventing "beforeslidechange" blocks navigation ' );
+
+				});
+
 				QUnit.test( 'slidechanged', function( assert ) {
 					assert.expect( 3 );
 					var done = assert.async( 3 );