internship: change word

fix: truncated long r-fit-text on pdf

.github/CONTRIBUTING.md

@@ -1,10 +1,9 @@
 ## Contributing
-
+Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**.
-Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
 
 
-### Personal Support
+### General Questions and Support
-If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
+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

.gitignore

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

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
+Want to create reveal.js presentation in a graphical editor? Try <https://slides.com>. It's made by the same people behind reveal.js.
-The full reveal.js documentation is available at [revealjs.com](https://revealjs.com).
 
-## 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-2021 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);
 	}
@@ -1167,7 +1178,6 @@ $controlsArrowAngleActive: 36deg;
 .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:not([data-background-transition]),
 	.reveal>.backgrounds .slide-background.past[data-background-transition=slide] {
@@ -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/template/exposer.scss

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

css/theme/template/theme.scss

@@ -8,25 +8,25 @@
 
 .reveal-viewport {
 	@include bodyBackground();
-	background-color: var(--background-color);
+	background-color: var(--r-background-color);
 }
 
 .reveal {
-	font-family: var(--main-font);
+	font-family: var(--r-main-font);
-	font-size: var(--main-font-size);
+	font-size: var(--r-main-font-size);
 	font-weight: normal;
-	color: var(--main-color);
+	color: var(--r-main-color);
 }
 
 .reveal ::selection {
-	color: var(--selection-color);
+	color: var(--r-selection-color);
-	background: var(--selection-background-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-	color: var(--selection-color);
+	color: var(--r-selection-color);
-	background: var(--selection-background-color);
+	background: var(--r-selection-background-color);
 	text-shadow: none;
 }
 
@@ -46,27 +46,27 @@
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-	margin: var(--heading-margin);
+	margin: var(--r-heading-margin);
-	color: var(--heading-color);
+	color: var(--r-heading-color);
 
-	font-family: var(--heading-font);
+	font-family: var(--r-heading-font);
-	font-weight: var(--heading-font-weight);
+	font-weight: var(--r-heading-font-weight);
-	line-height: var(--heading-line-height);
+	line-height: var(--r-heading-line-height);
-	letter-spacing: var(--heading-letter-spacing);
+	letter-spacing: var(--r-heading-letter-spacing);
 
-	text-transform: var(--heading-text-transform);
+	text-transform: var(--r-heading-text-transform);
-	text-shadow: var(--heading-text-shadow);
+	text-shadow: var(--r-heading-text-shadow);
 
 	word-wrap: break-word;
 }
 
-.reveal h1 {font-size: var(--heading1-size); }
+.reveal h1 {font-size: var(--r-heading1-size); }
-.reveal h2 {font-size: var(--heading2-size); }
+.reveal h2 {font-size: var(--r-heading2-size); }
-.reveal h3 {font-size: var(--heading3-size); }
+.reveal h3 {font-size: var(--r-heading3-size); }
-.reveal h4 {font-size: var(--heading4-size); }
+.reveal h4 {font-size: var(--r-heading4-size); }
 
 .reveal h1 {
-	text-shadow: var(--heading1-text-shadow);
+	text-shadow: var(--r-heading1-text-shadow);
 }
 
 
@@ -75,7 +75,7 @@
  *********************************************/
 
 .reveal p {
-	margin: var(--block-margin) 0;
+	margin: var(--r-block-margin) 0;
 	line-height: 1.3;
 }
 
@@ -150,7 +150,7 @@
 	display: block;
 	position: relative;
 	width: 70%;
-	margin: var(--block-margin) auto;
+	margin: var(--r-block-margin) auto;
 	padding: 5px;
 
 	font-style: italic;
@@ -170,11 +170,11 @@
 	display: block;
 	position: relative;
 	width: 90%;
-	margin: var(--block-margin) auto;
+	margin: var(--r-block-margin) auto;
 
 	text-align: left;
 	font-size: 0.55em;
-	font-family: var(--code-font);
+	font-family: var(--r-code-font);
 	line-height: 1.2em;
 
 	word-wrap: break-word;
@@ -183,7 +183,7 @@
 }
 
 .reveal code {
-	font-family: var(--code-font);
+	font-family: var(--r-code-font);
 	text-transform: none;
 	tab-size: 2;
 }
@@ -257,7 +257,7 @@
 }
 
 .reveal img {
-	margin: var(--block-margin) 0;
+	margin: var(--r-block-margin) 0;
 }
 
 
@@ -266,20 +266,20 @@
  *********************************************/
 
 .reveal a {
-	color: var(--link-color);
+	color: var(--r-link-color);
 	text-decoration: none;
 	transition: color .15s ease;
 }
 	.reveal a:hover {
-		color: var(--link-color-hover);
+		color: var(--r-link-color-hover);
 		text-shadow: none;
 		border: none;
 	}
 
 .reveal .roll span:after {
 	color: #fff;
-	// background: darken( var(--link-color), 15% );
+	// background: darken( var(--r-link-color), 15% );
-	 background: var(--link-color-dark);
+	 background: var(--r-link-color-dark);
 
 }
 
@@ -289,7 +289,7 @@
  *********************************************/
 
 .reveal .r-frame {
-	border: 4px solid var(--main-color);
+	border: 4px solid var(--r-main-color);
 	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -298,7 +298,7 @@
 }
 
 .reveal a:hover .r-frame {
-	border-color: var(--link-color);
+	border-color: var(--r-link-color);
 	box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -308,7 +308,7 @@
  *********************************************/
 
 .reveal .controls {
-	color: var(--link-color);
+	color: var(--r-link-color);
 }
 
 
@@ -318,7 +318,7 @@
 
 .reveal .progress {
 	background: rgba(0,0,0,0.2);
-	color: var(--link-color);
+	color: var(--r-link-color);
 }
 
 /*********************************************
@@ -326,6 +326,6 @@
  *********************************************/
  @media print {
     .backgrounds {
-        background-color: var(--background-color);
+        background-color: var(--r-background-color);
     }
 }

demo.html

@@ -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>
@@ -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

@@ -13,30 +13,30 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #f7f3de;
+  --r-background-color: #f7f3de;
-  --main-font: Lato, sans-serif;
+  --r-main-font: Lato, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #333;
+  --r-main-color: #333;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #333;
+  --r-heading-color: #333;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-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);
+  --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);
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #8b743d;
+  --r-link-color: #8b743d;
-  --link-color-dark: #564826;
+  --r-link-color-dark: #564826;
-  --link-color-hover: #c0a86e;
+  --r-link-color-hover: #c0a86e;
-  --selection-background-color: rgba(79, 64, 28, 0.99);
+  --r-selection-background-color: rgba(79, 64, 28, 0.99);
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
@@ -47,25 +47,25 @@ 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: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -84,42 +84,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -194,7 +194,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -214,17 +214,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -299,34 +299,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -335,7 +335,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -343,7 +343,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -351,7 +351,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -359,6 +359,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/black.css

@@ -12,53 +12,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #191919;
+  --r-background-color: #191919;
-  --main-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --main-font-size: 42px;
+  --r-main-font-size: 42px;
-  --main-color: #fff;
+  --r-main-color: #fff;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --heading-color: #fff;
+  --r-heading-color: #fff;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: 600;
+  --r-heading-font-weight: 600;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 2.5em;
+  --r-heading1-size: 2.5em;
-  --heading2-size: 1.6em;
+  --r-heading2-size: 1.6em;
-  --heading3-size: 1.3em;
+  --r-heading3-size: 1.3em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #42affa;
+  --r-link-color: #42affa;
-  --link-color-dark: #068de9;
+  --r-link-color-dark: #068de9;
-  --link-color-hover: #8dcffc;
+  --r-link-color-hover: #8dcffc;
-  --selection-background-color: #bee4fd;
+  --r-selection-background-color: #bee4fd;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #191919;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -77,42 +77,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -187,7 +187,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -207,17 +207,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -292,34 +292,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -328,7 +328,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -336,7 +336,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -344,7 +344,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -352,6 +352,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/blood.css

@@ -18,53 +18,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #222;
+  --r-background-color: #222;
-  --main-font: Ubuntu, sans-serif;
+  --r-main-font: Ubuntu, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #eee;
+  --r-main-color: #eee;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Ubuntu, sans-serif;
+  --r-heading-font: Ubuntu, sans-serif;
-  --heading-color: #eee;
+  --r-heading-color: #eee;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: 2px 2px 2px #222;
+  --r-heading-text-shadow: 2px 2px 2px #222;
-  --heading-font-weight: normal;
+  --r-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);
+  --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);
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #a23;
+  --r-link-color: #a23;
-  --link-color-dark: #6a1520;
+  --r-link-color-dark: #6a1520;
-  --link-color-hover: #dd5566;
+  --r-link-color-hover: #dd5566;
-  --selection-background-color: #a23;
+  --r-selection-background-color: #a23;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #222;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -83,42 +83,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -193,7 +193,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -213,17 +213,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -298,34 +298,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -334,7 +334,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -342,7 +342,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -350,7 +350,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -358,7 +358,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }
 .reveal p {

dist/theme/league.css

@@ -15,30 +15,30 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #2b2b2b;
+  --r-background-color: #2b2b2b;
-  --main-font: Lato, sans-serif;
+  --r-main-font: Lato, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #eee;
+  --r-main-color: #eee;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #eee;
+  --r-heading-color: #eee;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+  --r-heading-text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
-  --heading-font-weight: normal;
+  --r-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);
+  --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);
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #13DAEC;
+  --r-link-color: #13DAEC;
-  --link-color-dark: #0d99a5;
+  --r-link-color-dark: #0d99a5;
-  --link-color-hover: #71e9f4;
+  --r-link-color-hover: #71e9f4;
-  --selection-background-color: #FF5E99;
+  --r-selection-background-color: #FF5E99;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
@@ -49,25 +49,25 @@ 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: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -86,42 +86,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -196,7 +196,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -216,17 +216,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -301,34 +301,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -337,7 +337,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -345,7 +345,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -353,7 +353,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -361,6 +361,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/moon.css

@@ -20,53 +20,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #002b36;
+  --r-background-color: #002b36;
-  --main-font: Lato, sans-serif;
+  --r-main-font: Lato, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #93a1a1;
+  --r-main-color: #93a1a1;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #eee8d5;
+  --r-heading-color: #eee8d5;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #268bd2;
+  --r-link-color: #268bd2;
-  --link-color-dark: #1a6091;
+  --r-link-color-dark: #1a6091;
-  --link-color-hover: #78b9e6;
+  --r-link-color-hover: #78b9e6;
-  --selection-background-color: #d33682;
+  --r-selection-background-color: #d33682;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #002b36;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -85,42 +85,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -195,7 +195,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -215,17 +215,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -300,34 +300,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -336,7 +336,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -344,7 +344,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -352,7 +352,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -360,6 +360,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/night.css

@@ -13,53 +13,53 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #111;
+  --r-background-color: #111;
-  --main-font: Open Sans, sans-serif;
+  --r-main-font: Open Sans, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #eee;
+  --r-main-color: #eee;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Montserrat, Impact, sans-serif;
+  --r-heading-font: Montserrat, Impact, sans-serif;
-  --heading-color: #eee;
+  --r-heading-color: #eee;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: -0.03em;
+  --r-heading-letter-spacing: -0.03em;
-  --heading-text-transform: none;
+  --r-heading-text-transform: none;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #e7ad52;
+  --r-link-color: #e7ad52;
-  --link-color-dark: #d08a1d;
+  --r-link-color-dark: #d08a1d;
-  --link-color-hover: #f3d7ac;
+  --r-link-color-hover: #f3d7ac;
-  --selection-background-color: #e7ad52;
+  --r-selection-background-color: #e7ad52;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #111;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -78,42 +78,42 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -188,7 +188,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -208,17 +208,17 @@ section.has-light-background, section.has-light-background h1, section.has-light
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -293,34 +293,34 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -329,7 +329,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -337,7 +337,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -345,7 +345,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -353,6 +353,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/serif.css

@@ -16,53 +16,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #F0F1EB;
+  --r-background-color: #F0F1EB;
-  --main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --r-main-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #000;
+  --r-main-color: #000;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
+  --r-heading-font: Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif;
-  --heading-color: #383D3D;
+  --r-heading-color: #383D3D;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: none;
+  --r-heading-text-transform: none;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #51483D;
+  --r-link-color: #51483D;
-  --link-color-dark: #25211c;
+  --r-link-color-dark: #25211c;
-  --link-color-hover: #8b7c69;
+  --r-link-color-hover: #8b7c69;
-  --selection-background-color: #26351C;
+  --r-selection-background-color: #26351C;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #F0F1EB;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -81,42 +81,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -191,7 +191,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -211,17 +211,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -296,34 +296,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -332,7 +332,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -340,7 +340,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -348,7 +348,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -356,6 +356,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/simple.css

@@ -15,53 +15,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fff;
+  --r-background-color: #fff;
-  --main-font: Lato, sans-serif;
+  --r-main-font: Lato, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #000;
+  --r-main-color: #000;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: News Cycle, Impact, sans-serif;
+  --r-heading-font: News Cycle, Impact, sans-serif;
-  --heading-color: #000;
+  --r-heading-color: #000;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: none;
+  --r-heading-text-transform: none;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #00008B;
+  --r-link-color: #00008B;
-  --link-color-dark: #00003f;
+  --r-link-color-dark: #00003f;
-  --link-color-hover: #0000f1;
+  --r-link-color-hover: #0000f1;
-  --selection-background-color: rgba(0, 0, 0, 0.99);
+  --r-selection-background-color: rgba(0, 0, 0, 0.99);
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #fff;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -80,42 +80,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -190,7 +190,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -210,17 +210,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -295,34 +295,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -331,7 +331,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -339,7 +339,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -347,7 +347,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -355,6 +355,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/sky.css

@@ -17,30 +17,30 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #f7fbfc;
+  --r-background-color: #f7fbfc;
-  --main-font: Open Sans, sans-serif;
+  --r-main-font: Open Sans, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #333;
+  --r-main-color: #333;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Quicksand, sans-serif;
+  --r-heading-font: Quicksand, sans-serif;
-  --heading-color: #333;
+  --r-heading-color: #333;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: -0.08em;
+  --r-heading-letter-spacing: -0.08em;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #3b759e;
+  --r-link-color: #3b759e;
-  --link-color-dark: #264c66;
+  --r-link-color-dark: #264c66;
-  --link-color-hover: #74a7cb;
+  --r-link-color-hover: #74a7cb;
-  --selection-background-color: #134674;
+  --r-selection-background-color: #134674;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
@@ -51,25 +51,25 @@ 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: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -88,42 +88,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -198,7 +198,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -218,17 +218,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -303,34 +303,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -339,7 +339,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -347,7 +347,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -355,7 +355,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -363,6 +363,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/solarized.css

@@ -16,53 +16,53 @@ html * {
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fdf6e3;
+  --r-background-color: #fdf6e3;
-  --main-font: Lato, sans-serif;
+  --r-main-font: Lato, sans-serif;
-  --main-font-size: 40px;
+  --r-main-font-size: 40px;
-  --main-color: #657b83;
+  --r-main-color: #657b83;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: League Gothic, Impact, sans-serif;
+  --r-heading-font: League Gothic, Impact, sans-serif;
-  --heading-color: #586e75;
+  --r-heading-color: #586e75;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: normal;
+  --r-heading-font-weight: normal;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 3.77em;
+  --r-heading1-size: 3.77em;
-  --heading2-size: 2.11em;
+  --r-heading2-size: 2.11em;
-  --heading3-size: 1.55em;
+  --r-heading3-size: 1.55em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #268bd2;
+  --r-link-color: #268bd2;
-  --link-color-dark: #1a6091;
+  --r-link-color-dark: #1a6091;
-  --link-color-hover: #78b9e6;
+  --r-link-color-hover: #78b9e6;
-  --selection-background-color: #d33682;
+  --r-selection-background-color: #d33682;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #fdf6e3;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -81,42 +81,42 @@ html * {
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -191,7 +191,7 @@ html * {
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -211,17 +211,17 @@ html * {
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -296,34 +296,34 @@ html * {
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -332,7 +332,7 @@ html * {
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -340,7 +340,7 @@ html * {
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -348,7 +348,7 @@ html * {
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -356,6 +356,6 @@ html * {
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

dist/theme/white.css

@@ -12,53 +12,53 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * GLOBAL STYLES
  *********************************************/
 :root {
-  --background-color: #fff;
+  --r-background-color: #fff;
-  --main-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
-  --main-font-size: 42px;
+  --r-main-font-size: 42px;
-  --main-color: #222;
+  --r-main-color: #222;
-  --block-margin: 20px;
+  --r-block-margin: 20px;
-  --heading-margin: 0 0 20px 0;
+  --r-heading-margin: 0 0 20px 0;
-  --heading-font: Source Sans Pro, Helvetica, sans-serif;
+  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
-  --heading-color: #222;
+  --r-heading-color: #222;
-  --heading-line-height: 1.2;
+  --r-heading-line-height: 1.2;
-  --heading-letter-spacing: normal;
+  --r-heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --r-heading-text-transform: uppercase;
-  --heading-text-shadow: none;
+  --r-heading-text-shadow: none;
-  --heading-font-weight: 600;
+  --r-heading-font-weight: 600;
-  --heading1-text-shadow: none;
+  --r-heading1-text-shadow: none;
-  --heading1-size: 2.5em;
+  --r-heading1-size: 2.5em;
-  --heading2-size: 1.6em;
+  --r-heading2-size: 1.6em;
-  --heading3-size: 1.3em;
+  --r-heading3-size: 1.3em;
-  --heading4-size: 1em;
+  --r-heading4-size: 1em;
-  --code-font: monospace;
+  --r-code-font: monospace;
-  --link-color: #2a76dd;
+  --r-link-color: #2a76dd;
-  --link-color-dark: #1a53a1;
+  --r-link-color-dark: #1a53a1;
-  --link-color-hover: #6ca0e8;
+  --r-link-color-hover: #6ca0e8;
-  --selection-background-color: #98bdef;
+  --r-selection-background-color: #98bdef;
-  --selection-color: #fff;
+  --r-selection-color: #fff;
 }
 
 .reveal-viewport {
   background: #fff;
-  background-color: var(--background-color);
+  background-color: var(--r-background-color);
 }
 
 .reveal {
-  font-family: var(--main-font);
+  font-family: var(--r-main-font);
-  font-size: var(--main-font-size);
+  font-size: var(--r-main-font-size);
   font-weight: normal;
-  color: var(--main-color);
+  color: var(--r-main-color);
 }
 
 .reveal ::selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
 .reveal ::-moz-selection {
-  color: var(--selection-color);
+  color: var(--r-selection-color);
-  background: var(--selection-background-color);
+  background: var(--r-selection-background-color);
   text-shadow: none;
 }
 
@@ -77,42 +77,42 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 .reveal h4,
 .reveal h5,
 .reveal h6 {
-  margin: var(--heading-margin);
+  margin: var(--r-heading-margin);
-  color: var(--heading-color);
+  color: var(--r-heading-color);
-  font-family: var(--heading-font);
+  font-family: var(--r-heading-font);
-  font-weight: var(--heading-font-weight);
+  font-weight: var(--r-heading-font-weight);
-  line-height: var(--heading-line-height);
+  line-height: var(--r-heading-line-height);
-  letter-spacing: var(--heading-letter-spacing);
+  letter-spacing: var(--r-heading-letter-spacing);
-  text-transform: var(--heading-text-transform);
+  text-transform: var(--r-heading-text-transform);
-  text-shadow: var(--heading-text-shadow);
+  text-shadow: var(--r-heading-text-shadow);
   word-wrap: break-word;
 }
 
 .reveal h1 {
-  font-size: var(--heading1-size);
+  font-size: var(--r-heading1-size);
 }
 
 .reveal h2 {
-  font-size: var(--heading2-size);
+  font-size: var(--r-heading2-size);
 }
 
 .reveal h3 {
-  font-size: var(--heading3-size);
+  font-size: var(--r-heading3-size);
 }
 
 .reveal h4 {
-  font-size: var(--heading4-size);
+  font-size: var(--r-heading4-size);
 }
 
 .reveal h1 {
-  text-shadow: var(--heading1-text-shadow);
+  text-shadow: var(--r-heading1-text-shadow);
 }
 
 /*********************************************
  * OTHER
  *********************************************/
 .reveal p {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
   line-height: 1.3;
 }
 
@@ -187,7 +187,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 70%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   padding: 5px;
   font-style: italic;
   background: rgba(255, 255, 255, 0.05);
@@ -207,17 +207,17 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   display: block;
   position: relative;
   width: 90%;
-  margin: var(--block-margin) auto;
+  margin: var(--r-block-margin) auto;
   text-align: left;
   font-size: 0.55em;
-  font-family: var(--code-font);
+  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(--code-font);
+  font-family: var(--r-code-font);
   text-transform: none;
   tab-size: 2;
 }
@@ -292,34 +292,34 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal img {
-  margin: var(--block-margin) 0;
+  margin: var(--r-block-margin) 0;
 }
 
 /*********************************************
  * LINKS
  *********************************************/
 .reveal a {
-  color: var(--link-color);
+  color: var(--r-link-color);
   text-decoration: none;
   transition: color 0.15s ease;
 }
 
 .reveal a:hover {
-  color: var(--link-color-hover);
+  color: var(--r-link-color-hover);
   text-shadow: none;
   border: none;
 }
 
 .reveal .roll span:after {
   color: #fff;
-  background: var(--link-color-dark);
+  background: var(--r-link-color-dark);
 }
 
 /*********************************************
  * Frame helper
  *********************************************/
 .reveal .r-frame {
-  border: 4px solid var(--main-color);
+  border: 4px solid var(--r-main-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }
 
@@ -328,7 +328,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 }
 
 .reveal a:hover .r-frame {
-  border-color: var(--link-color);
+  border-color: var(--r-link-color);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
 }
 
@@ -336,7 +336,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -344,7 +344,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: var(--link-color);
+  color: var(--r-link-color);
 }
 
 /*********************************************
@@ -352,6 +352,6 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: var(--background-color);
+    background-color: var(--r-background-color);
   }
 }

examples/auto-animate.html

@@ -125,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>
@@ -133,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>
@@ -141,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>
@@ -149,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>
@@ -176,6 +176,37 @@
 					<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) -->
+                <!-- Slides are separated by three dashes (the default) -->
-                <section data-markdown data-separator="---">
+                <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) -->
+                <!-- No "extra" slides, since the separator can't be matched ("---" will become horizontal rulers) -->
-                <section data-markdown>
+                <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: {
+				mathjax2: {
-					// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
 					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

@@ -24,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
@@ -60,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 Chrome versions',
-    'last 2 Safari versions', 'not Safari < 10.1',
+    'last 2 Safari versions',
-    'last 2 iOS versions', 'not iOS < 10.3',
+    'last 2 iOS versions',
-    'last 2 Firefox versions', 'not Firefox < 60',
+    'last 2 Firefox versions',
-    'last 2 Edge versions', 'not Edge < 16',
+    'last 2 Edge versions',
 ] };
 
 let cache = {};
@@ -196,7 +197,7 @@ gulp.task('qunit', () => {
     let serverConfig = {
         root,
         port: 8009,
-        host: '0.0.0.0',
+        host: 'localhost',
         name: 'test-server'
     }
 
@@ -268,16 +269,20 @@ 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([
+    gulp.src(
-        './index.html',
+        [
-        './dist/**',
+            './index.html',
-        './lib/**',
+            './dist/**',
-        './images/**',
+            './lib/**',
-        './plugin/**',
+            './images/**',
-        './**.md'
+            './plugin/**',
-    ]).pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
+            './**.md'
+        ],
+        { base: './' }
+    )
+    .pipe(zip('reveal-js-presentation.zip')).pipe(gulp.dest('./'))
 
 ))
 
@@ -289,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(['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}',

index.html

@@ -11,7 +11,7 @@
 
     <link rel="stylesheet" href="dist/reset.css" />
     <link rel="stylesheet" href="dist/reveal.css" />
-    <link rel="stylesheet" href="dist/theme/black.css" />
+    <link rel="stylesheet" href="dist/theme/serif.css" />
 
     <!-- Theme used for syntax highlighted code -->
     <link rel="stylesheet" href="plugin/highlight/monokai.css" />
@@ -19,93 +19,178 @@
   <body>
     <div class="reveal">
       <div class="slides">
-	      <section data-markdown
+        <section data-markdown>
-                 data-background-image="./images/mikufans.jpg"
+          ![logo](./images/logo.png)
-            data-background-opacity="0.39"
-            data-background-color="white"
-          >
-          ### 峰悦交易看板
 
-          By `mikufans`
+          ### Accounting Internship Report
+
+          - Author: CHEN Yongyuan (Walter)
+          - Report date: 2022-11-09
+
+          Note:
+          My name is Walter.
+
+          First of all, I am very happy that I can share my accounting internship experience here.
+
+          During last summer holiday, I took an internship at Grant Thornton.
         </section>
+        <section data-markdown>
+          ### Agenda
+
+          1. About the accounting internship
+          2. Details of the internship project
+          3. Key lessons learned
+          4. Suggestion
+        </section>
+        <section>
           <section
-              data-background-image="./images/tg_image_1349760345.jpeg"
+            data-background-image="./images/haiyoulogo.png"
-              data-background-size="contain"
+            data-background-size="contain"
+            data-background-opacity="0.139"
             >
-            <img src="./images/photo_2022-11-20_17-55-46.jpg" width="400" />
+            <h3>Accounting Internship Overview</h3>
+            <ul>
+              <li class="fragment">
+              🏠 Company: China National Offshore Oil Corp
+                (<b>CNOOC Guangdong Sales Co. Ltd</b>)
+              </li>
+              <aside class="notes">
+              <p>
+                The company we audited was CNOOC which this is a huge group coporation.
+                Our team is focusing on the CNOOC Guangdong sales company.
+              </p>
+              </aside>
+              <li class="fragment">👨 Supervisor: FU Kaijun</li>
+              <aside class="notes">
+                <p>
+                My supervisor, also our team leader, is FU kaijun.
+                </p>
+              </aside>
+              <li class="fragment">👕 Role: Audit assistant of Guangdong audit team</li>
+              <aside class="notes">
+                <p>
+                My role in the audit team is audit assistant.
+                I assist the team to do some of the perform substantive procedures.
+                Also, I check for errors in the subsidiary's financial reports and parent's consolidated financial statements.
+                Then I summarize my work into audit working paper.
+                </p>
+              </aside>
+              <li class="fragment">🌍 Location: Guangdong area (Zhanjiang, Zhuhai, Jiangmen, and Guangzhou)</li>
+              <aside class="notes">
+                <p>
+                There are many subsidiaries in Guangdong, and our team is mainly responsible for (these places).
+                and finally, we returned to the parent company in Guangzhou to do the work related to consolidation.
+                </p>
+              </aside>
+            </ul>
+            <p class="fragment" style="text-align: left;">
+              My job is to perform
+              <span class="fragment highlight-red">substantive procedures</span>,
+              <span class="fragment highlight-green">prepare audit working paper</span>,
+              and <span class="fragment highlight-blue">write programs</span> to reduce repetitive work.
+            </p>
           </section>
-        <section 
+          <section data-background-image="./images/guquanjiegou.png" data-background-size="contain">
-                 data-background-image="./images/workflow.svg"
+            <aside class="notes">
-                 data-background-size="contain"
+              This is the equity strcture.
-          >
+              Our team is focusing on the CNOOC Guangdong sales company which has more than 27 subsidiaries.
-          <div style="padding: 3em; background-color: rgba(0,0,0,0.39);">
+            </aside>
-            整体架构图
+          </section>
-            <br />
+          <section data-background-image="./images/oil.jpg" data-background-size="contain">
-
+            <aside class="notes">
-            <small>全部模块采用 Docker 容器化部署</small>
+              We go to each subsidiary's gas station to check fixed assets and oil inventory.
-          </div>
+            </aside>
+          </section>
+          <section data-background-image="./images/paper.jpg" data-background-size="contain">
+            <aside class="notes">
+              In this photo, we use sampling method to get a checklist, and then we go to the office to look for the corresponding accounting documents according to the checklist.
+            </aside>
+          </section>
+          <section data-background-image="./images/report.png" data-background-size="contain">
+            <aside class="notes">
+              And another of my job, which is probably why I got hired, is to write a computer program to automatically transfer some data from excel to word report.
+              Because during the interview they asked my lots of question about the PDF and excel processing.
+            </aside>
+          </section>
+          <section data-background-image="./images/highlight.png" data-background-size="contain"></section>
+          <section data-background-image="./images/excel.png" data-background-size="contain"></section>
         </section>
         <section>
-          <section data-markdown
+        <section data-markdown>
-            data-background-image="./images/elephant.png"
+            ### Key Lessons Learned
-            data-background-opacity="0.39"
-            data-background-size="cover"
-            >
-            ### 后端数据库 - PostgreSQL
 
-            - 开源、稳定、高性能的混合式数据库后端
+            > If there is anything unsure, be sure to ask.
-            - 能够储存结构化和非结构化的混合式数据
+
-            - 储存股票时序记录
+            Notes:
-            - 超过1000只股票的10年数据纪录
+            Although I had not taken any auditing course when I start the internship, I still manage to learn some basic concept before I went to workplace.
+            During the internship, I learned a lot, not just accounting and auditing standard such as consolidated financial statement.
+            Also include work etiquette, communication methods, etc.
+
+            The first lessons I learned, also the first thing my supervisor told my in the work, is if there anything unsure, be sure to ask.
+            Let me explain.
+
+            Our audit schedule is very tight.
+            We spent most of our time in reviewing and correcting errors in financial statements.
+            After we audit the subsidiaries individual financial statement, then we will put them together and review the consolidated financial statement.
+            At the same time, we will also prepare audit papers.
+            So that means if there are errors in subsidiary's statement, but found it during the consolidated process, that means we need to go back to readjust the consolidated statement and audit worksheet.
+            This will not only slow down the entire audit project, but also add extra workload to other team members.
           </section>
-          <section data-markdown
+          <section data-markdown>
-                   data-background-image="./images/logo.png"
+            ### Key Lessons Learned
-            data-background-opacity="0.39"
-            >
-            ### 后端数据源 - RSSHub
 
-            - 活跃开源项目，超过8000个commit
+            > Don't work hard, work smart!
-            - 聚合超过数十家金融平台的新闻、文章、评论
+
+            Notes:
+            The difference between work hard and work smart is how much time you spend in completing tasks. Hard work tends to be when someone spends a great amout of time completing many things, while smart work is when they spend more time to find the right way to complete right things.
+
+            A very typically example during my internship is. Once we use scanner to scan hundreds of documents and needed to rename those file in certain order. On of my co-worker said "Okey, just give me one hour I will rename them one by one". However the correct way to do that is simply select all files, and press F2 then you can rename all files at once.
+            
+            At that time I didn't know that F2 is the shortcut to rename files, but I am sure there must be some way to do this task quickly, so I spent two minutes seaerching on Baidu, and spend one minute to complete the task.
+
+            In general, if you find yourself doing a very repetitive task, there may be a smater way to accomplish the task. Never stop learning new knowledge.
           </section>
-            <section data-markdown
-                     data-background-image="./images/grafana_logo-web-white-text.svg"
-                     data-background-size="contain"
-            data-background-opacity="0.39"
-              >
-              ### 前端数据面板 - Grafana
-
-              - 开源的专业实时数据监控面板
-              - 组件化配置各个数据源模块
-              - 自定义筛选各类数据源
-              - 跨平台支持PC、手机，自适应屏幕大小
-              - 设置监控警告事件，及时处理突发情况
-            </section>
         </section>
         <section>
+          <section data-markdown>
+            ## Suggestion
+          </section>
+          <section data-markdown>
+            ## For the Company
+
+            > Information Island: Data in system that has no external connectivity.
+
+            - Can't sync/compare data between systems
+            - Require manually input data
+            - Involve more errors
+            - Increase complexity
+
+            Invest on developing a all-in-one solution system or pipeline between system, and traning employee to use the system.
+
+            Notes:
+
+            SAP, 久其报表，海油卡
+          </section>
+          <section data-markdown>
+            ## For the Accounting Program
+
+            - Set a file naming standard
+              - Instead of something like `Water final ver.2 (1).docx`
+            - Set a version control system for the files
+            - Automate repetitive tasks
+          </section>
           <section>
-            <h3>DEMO !</h3>
+            <h2>For Future Accounting Interns</h2>
-            <a href="https://baka.link/zv2w" target="_blank">Snapshot https://baka.link/zv2w</a>
+            <ul>
-            <small>
+              <li class="fragment">Get an accounting certification</li>
-              <p>or</p>
+              <li class="fragment">Be familiar with Chinese tax & laws</li>
-            <a href="https://home.bakaawt.com:3000/d/BKKLA5dVz/feng-yue-jiao-yi-kan-ban">
+              <li class="fragment">Learn a programming language (Recommend: <code>Python</code>)</li>
-              https://home.bakaawt.com:3000/d/BKKLA5dVz/feng-yue-jiao-yi-kan-ban
+            </ul>
-            </a></small>
           </section>
         </section>
         <section>
-          <div>
+          <h1>Thank you</h1>
-            <h2>Creators</h2>
+          <p>for listining</p>
-            <div style="display: flex; justify-content: space-evenly;">
-              <div style="display: flex; flex-direction: column;">
-                <img src="./images/avatar.jpg" width="200" style="border-radius: 50%;" />
-                <span>艾文韬</span>
-              </div>
-              <div style="display: flex; flex-direction: column;">
-                <img src="./images/heimoshuiyu.jpg" width="200" style="border-radius: 50%;" />
-                <span>陈永源</span>
-              </div>
-            </div>
-          </div>
         </section>
       </div>
     </div>
@@ -114,17 +199,18 @@
     <script src="plugin/notes/notes.js"></script>
     <script src="plugin/markdown/markdown.js"></script>
     <script src="plugin/highlight/highlight.js"></script>
+    <script src="plugin/zoom/zoom.js"></script>
     <script>
       // More info about initialization & config:
       // - https://revealjs.com/initialization/
       // - https://revealjs.com/config/
       Reveal.initialize({
         hash: true,
-        heigh: 1920,
+        width: 1920,
-        wdith: 1080,
+        height: 1080,
 
         // Learn about plugins: https://revealjs.com/plugins/
-        plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
+        plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom],
       });
     </script>
   </body>

js/controllers/autoanimate.js

@@ -50,11 +50,19 @@ export default class AutoAnimate {
 			// Flag the navigation direction, needed for fragment buildup
 			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 ) {
 
@@ -391,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 !== '' ) {
@@ -467,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

@@ -122,6 +122,7 @@ export default class Backgrounds {
 			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' ),
@@ -150,7 +151,7 @@ export default class Backgrounds {
 
 		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,6 +179,7 @@ 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( dataPreload ) element.setAttribute( 'data-preload', '' );
@@ -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/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['Alt + ←/&#8593/→/↓']        = 'Navigate without fragments';
-		this.shortcuts['End  ,  Shift →']         = 'Last slide';
+		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
+		// Whitelist certain modifiers for slide navigation shortcuts
-		let prevSlideShortcut = event.shiftKey && event.keyCode === 32;
+		let isNavigationKey = [32, 37, 38, 39, 40, 78, 80].indexOf( event.keyCode ) !== -1;
-		let firstSlideShortcut = event.shiftKey && keyCode === 37;
-		let lastSlideShortcut = event.shiftKey && keyCode === 39;
 
 		// 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 ) {
+				if( event.shiftKey ) {
-					this.Reveal.slide( Number.MAX_VALUE );
+					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 ) {
+				if( event.shiftKey ) {
-					this.Reveal.prev();
+					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 ) {
+				if( event.shiftKey ) {
-					this.Reveal.next();
+					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() {
+	getIndicesFromHash( hash=window.location.hash ) {
-
-		let config = this.Reveal.getConfig();
-		let indices = this.Reveal.getIndices();
-		let currentSlide = this.Reveal.getCurrentSlide();
-
-		let hash = window.location.hash;
 
 		// Attempt to parse the hash as either an index or name
-		let bits = hash.slice( 2 ).split( '/' ),
+		let name = hash.replace( /^#\/?/, '' );
-			name = hash.replace( /#\/?/gi, '' );
+		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...
+				return { ...this.Reveal.getIndices( element ), f };
-				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 );
 			}
 		}
 		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 ) {
+			return { h, v, f };
-				this.Reveal.slide( 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
+		// ... or using <aside class="notes"> elements
-		let notesElement = slide.querySelector( 'aside.notes' );
+		let notesElements = slide.querySelectorAll( 'aside.notes' );
-		if( notesElement ) {
+		if( notesElements ) {
-			return notesElement.innerHTML;
+			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

@@ -22,7 +22,7 @@ export default class Print {
 		const slides = queryAll( this.Reveal.getRevealElement(), SLIDES_SELECTOR )
 
 		// Compute slide numbers now, before we start duplicating slides
-		const doingSlideNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
+		const injectPageNumbers = config.slideNumber && /all|print/i.test( config.showSlideNumber );
 
 		const slideSize = this.Reveal.getComputedSlideSize( window.innerWidth, window.innerHeight );
 
@@ -46,14 +46,19 @@ 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 );
 
-		// Re-run the slide layout so that r-fit-text is applied based on
-		// the printed slide size
-		slides.forEach( slide => this.Reveal.slideContent.layout( slide ) );
-
 		// Batch scrollHeight access to prevent layout thrashing
 		await new Promise( requestAnimationFrame );
 
@@ -61,6 +66,7 @@ export default class Print {
 
 		const pages = [];
 		const pageContainer = slides[0].parentNode;
+		let slideNumber = 1;
 
 		// Slide and slide background layout
 		slides.forEach( function( slide, index ) {
@@ -90,6 +96,13 @@ export default class Print {
 
 				page.className = 'pdf-page';
 				page.style.height = ( ( pageHeight + config.pdfPageHeightOffset ) * numberOfPages ) + 'px';
+
+				// 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
@@ -97,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 );
 				}
@@ -130,13 +145,12 @@ export default class Print {
 
 				}
 
-				// Inject slide numbers if `slideNumbers` are enabled
+				// Inject page numbers if `slideNumbers` are enabled
-				if( doingSlideNumbers ) {
+				if( injectPageNumbers ) {
-					const slideNumber = index + 1;
 					const numberElement = document.createElement( 'div' );
 					numberElement.classList.add( 'slide-number' );
 					numberElement.classList.add( 'slide-number-pdf' );
-					numberElement.innerHTML = slideNumber;
+					numberElement.innerHTML = slideNumber++;
 					page.appendChild( numberElement );
 				}
 
@@ -150,7 +164,7 @@ export default class Print {
 
 					let previousFragmentStep;
 
-					fragmentGroups.forEach( function( fragments ) {
+					fragmentGroups.forEach( function( fragments, index ) {
 
 						// Remove 'current-fragment' from the previous group
 						if( previousFragmentStep ) {
@@ -166,6 +180,14 @@ export default class Print {
 
 						// Create a separate page for the current fragment state
 						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;
@@ -195,6 +217,9 @@ export default class Print {
 
 		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' });
 

js/controllers/progress.js

@@ -101,5 +101,10 @@ export default class Progress {
 
 	}
 
+	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, getMimeTypeFromFile } from '../utils/util.js'
-import { extend, queryAll, closest } from '../utils/util.js'
 import { isMobile } from '../utils/device.js'
 
 import fitty from 'fitty';
@@ -102,9 +101,16 @@ export default class SlideContent {
 
 				// Images
 				if( backgroundImage ) {
-					backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
+					// base64
-						return `url(${encodeURI(background.trim())})`;
+					if(  /^data:/.test( backgroundImage.trim() ) ) {
-					}).join( ',' );
+						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() ) {
@@ -130,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 );
@@ -174,15 +186,14 @@ export default class SlideContent {
 	}
 
 	/**
-	 * Applies JS-dependent layout helpers for the given slide,
+	 * Applies JS-dependent layout helpers for the scope.
-	 * if there are any.
 	 */
-	layout( slide ) {
+	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' ) ).forEach( element => {
+		Array.from( scopeElement.querySelectorAll( '.r-fit-text' ) ).forEach( element => {
 			fitty( element, {
 				minSize: 24,
 				maxSize: this.Reveal.getConfig().height * 0.8,
@@ -464,4 +475,4 @@ export default class SlideContent {
 
 	}
 
-}
+}

js/controllers/slidenumber.js

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

js/reveal.js

@@ -26,14 +26,14 @@ import {
 } from './utils/constants.js'
 
 // The reveal.js version
-export const VERSION = '4.1.1';
+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 => {
+			window.addEventListener( 'message', onPostMessage, false );
-				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 );
 		}
 
 	}
@@ -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
+					dom.slides.style.zoom = '';
-					// Content remains crisp no matter how much we scale. Side
+					dom.slides.style.left = '50%';
-					// effects are minor differences in text layout and iframe
+					dom.slides.style.top = '50%';
-					// viewports changing size. A 200x200 iframe viewport in a
+					dom.slides.style.bottom = 'auto';
-					// 2x zoomed presentation ends up having a 400x400 viewport.
+					dom.slides.style.right = 'auto';
-					if( scale > 1 && Device.supportsZoom && window.devicePixelRatio < 2 ) {
+					transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } );
-						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 +')' } );
-					}
 				}
 
 				// 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;
@@ -1326,7 +1380,7 @@ export default function( revealElement, options ) {
 					indexv,
 					previousSlide,
 					currentSlide,
-					origin: o
+					origin
 				}
 			});
 		}
@@ -1517,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;
 				}
 			}
 
@@ -1563,10 +1622,7 @@ export default function( revealElement, options ) {
 
 					if( config.fragments ) {
 						// Show all fragments in prior slides
-						Util.queryAll( element, '.fragment' ).forEach( fragment => {
+						showFragmentsIn( element );
-							fragment.classList.add( 'visible' );
-							fragment.classList.remove( 'current-fragment' );
-						} );
 					}
 				}
 				else if( i > index ) {
@@ -1575,9 +1631,17 @@ export default function( revealElement, options ) {
 
 					if( config.fragments ) {
 						// Hide all fragments in future slides
-						Util.queryAll( element, '.fragment.visible' ).forEach( fragment => {
+						hideFragmentsIn( element );
-							fragment.classList.remove( 'visible', 'current-fragment' );
+					}
-						} );
+				}
+				// 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 );
 					}
 				}
 			}
@@ -1617,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.
@@ -2193,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 );
 		}
 
@@ -2253,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
@@ -2271,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});
+				}
 			}
 		}
 
@@ -2284,13 +2376,13 @@ 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();
 
@@ -2302,13 +2394,13 @@ export default function( revealElement, options ) {
 			}
 
 			if( routes.down ) {
-				navigateDown();
+				navigateDown({skipFragments});
 			}
 			else if( config.rtl ) {
-				navigateLeft();
+				navigateLeft({skipFragments});
 			}
 			else {
-				navigateRight();
+				navigateRight({skipFragments});
 			}
 		}
 
@@ -2333,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.
 	 *
@@ -2350,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.
 	 *
@@ -2380,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.
@@ -2432,6 +2603,7 @@ export default function( revealElement, options ) {
 
 		initialize,
 		configure,
+		destroy,
 
 		sync,
 		syncSlide,
@@ -2588,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 ),
+			r: parseInt( hex6.slice( 0, 2 ), 16 ),
-			g: parseInt( hex6.substr( 2, 2 ), 16 ),
+			g: parseInt( hex6.slice( 2, 4 ), 16 ),
-			b: parseInt( hex6.substr( 4, 2 ), 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 );
+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 ) );

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()]
 }

package-lock.json

@@ -1,11 +1,12 @@
 {
   "name": "reveal.js",
-  "version": "4.1.0",
+  "version": "4.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "4.1.0",
+      "name": "reveal.js",
+      "version": "4.4.0",
       "license": "MIT",
       "devDependencies": {
         "@babel/core": "^7.14.3",
@@ -20,7 +21,7 @@
         "fitty": "^2.3.0",
         "glob": "^7.1.7",
         "gulp": "^4.0.2",
-        "gulp-autoprefixer": "^5.0.0",
+        "gulp-autoprefixer": "^8.0.0",
         "gulp-clean-css": "^4.2.0",
         "gulp-connect": "^5.7.0",
         "gulp-eslint": "^6.0.0",
@@ -28,12 +29,12 @@
         "gulp-tap": "^2.0.0",
         "gulp-zip": "^4.2.0",
         "highlight.js": "^10.0.3",
-        "marked": "^2.0.3",
+        "marked": "^4.0.12",
-        "node-qunit-puppeteer": "^2.0.1",
+        "node-qunit-puppeteer": "^2.1.0",
-        "qunit": "^2.10.0",
+        "qunit": "^2.17.2",
         "rollup": "^2.48.0",
         "rollup-plugin-terser": "^7.0.2",
-        "sass": "^1.32.13",
+        "sass": "^1.39.2",
         "yargs": "^15.1.0"
       },
       "engines": {
@@ -1619,9 +1620,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -1903,33 +1904,30 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "8.6.5",
+      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
-      "integrity": "sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^3.2.8",
+        "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30000864",
+        "caniuse-lite": "^1.0.30001297",
+        "fraction.js": "^4.1.2",
         "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
+        "picocolors": "^1.0.0",
-        "postcss": "^6.0.23",
+        "postcss-value-parser": "^4.2.0"
-        "postcss-value-parser": "^3.2.3"
       },
       "bin": {
         "autoprefixer": "bin/autoprefixer"
-      }
-    },
-    "node_modules/autoprefixer/node_modules/browserslist": {
-      "version": "3.2.8",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
-      "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
-      "dev": true,
-      "dependencies": {
-        "caniuse-lite": "^1.0.30000844",
-        "electron-to-chromium": "^1.3.47"
       },
-      "bin": {
+      "engines": {
-        "browserslist": "cli.js"
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
     "node_modules/babel-plugin-dynamic-import-node": {
@@ -2111,16 +2109,16 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.16.6",
+      "version": "4.19.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
       "dev": true,
       "dependencies": {
-        "caniuse-lite": "^1.0.30001219",
+        "caniuse-lite": "^1.0.30001312",
-        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.4.71",
-        "electron-to-chromium": "^1.3.723",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
+        "node-releases": "^2.0.2",
+        "picocolors": "^1.0.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -2227,14 +2225,20 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001228",
+      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
+      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==",
       "dev": true,
-      "funding": {
+      "funding": [
-        "type": "opencollective",
+        {
-        "url": "https://opencollective.com/browserslist"
+          "type": "opencollective",
-      }
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -2538,12 +2542,6 @@
         "color-support": "bin.js"
       }
     },
-    "node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
     "node_modules/colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -2554,9 +2552,9 @@
       }
     },
     "node_modules/commander": {
-      "version": "7.1.0",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "dev": true,
       "engines": {
         "node": ">= 10"
@@ -2924,9 +2922,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.732",
+      "version": "1.4.73",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.732.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz",
-      "integrity": "sha512-qKD5Pbq+QMk4nea4lMuncUMhpEiQwaJyCW7MrvissnRcBDENhVfDmAqQYRQ3X525oTzhar9Zh1cK0L2d1UKYcw==",
+      "integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -3886,6 +3884,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
+      "integrity": "sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://www.patreon.com/infusion"
+      }
+    },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -4200,20 +4211,52 @@
       }
     },
     "node_modules/gulp-autoprefixer": {
-      "version": "5.0.0",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-8.0.0.tgz",
-      "integrity": "sha1-gjfCeKaXdScKHK/n1vEBz81YVUQ=",
+      "integrity": "sha512-sVR++PIaXpa81p52dmmA/jt50bw0egmylK5mjagfgOJ8uLDGaF9tHyzvetkY9Uo0gBZUS5sVqN3kX/GlUKOyog==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "autoprefixer": "^8.0.0",
+        "autoprefixer": "^10.2.6",
-        "fancy-log": "^1.3.2",
+        "fancy-log": "^1.3.3",
         "plugin-error": "^1.0.1",
-        "postcss": "^6.0.1",
+        "postcss": "^8.3.0",
-        "through2": "^2.0.0",
+        "through2": "^4.0.2",
-        "vinyl-sourcemaps-apply": "^0.2.0"
+        "vinyl-sourcemaps-apply": "^0.2.1"
       },
       "engines": {
-        "node": ">=4.5"
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "gulp": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "gulp": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/gulp-autoprefixer/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/gulp-autoprefixer/node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "3"
       }
     },
     "node_modules/gulp-clean-css": {
@@ -5579,15 +5622,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/js-reporters": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/js-reporters/-/js-reporters-2.0.0.tgz",
-      "integrity": "sha512-VJd/86niT7GzsaVc+Yxrs8QPrYl1orzv8bYZPuSOtxU6rk/pv8aOXTcIa7HaANvtvdLMTsZspAiucNQ6T2QFHw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5911,15 +5945,15 @@
       }
     },
     "node_modules/marked": {
-      "version": "2.0.3",
+      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.12.tgz",
-      "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==",
+      "integrity": "sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==",
       "dev": true,
       "bin": {
-        "marked": "bin/marked"
+        "marked": "bin/marked.js"
       },
       "engines": {
-        "node": ">= 8.16.2"
+        "node": ">= 12"
       }
     },
     "node_modules/matchdep": {
@@ -6177,6 +6211,18 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -6273,9 +6319,9 @@
       "dev": true
     },
     "node_modules/node-qunit-puppeteer": {
-      "version": "2.0.3",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/node-qunit-puppeteer/-/node-qunit-puppeteer-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/node-qunit-puppeteer/-/node-qunit-puppeteer-2.1.0.tgz",
-      "integrity": "sha512-G4mWn3RBQ+JPzCNWzFQ4r6RUUZqj52D5E3Z7wxqRi5b4daph0Alk/mgBpAQqZq7TVR1oV2emnN0Bk0EgYz/4gw==",
+      "integrity": "sha512-53ytjfu+t51r9qbOsek5D9biAlGO808Pp6b1gGdg/fcGJGFZIJNHoVpFF3OLRe7IUXA9QjhsQL9IkK4NGenHCA==",
       "dev": true,
       "dependencies": {
         "colors": "^1.4.0",
@@ -6286,15 +6332,15 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "1.1.72",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
       "dev": true
     },
     "node_modules/node-watch": {
-      "version": "0.7.1",
+      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.2.tgz",
-      "integrity": "sha512-UWblPYuZYrkCQCW5PxAwYSxaELNBLUckrTBBk8xr1/bUgyOkYYTsUcV4e3ytcazFEOyiRyiUrsG37pu6I0I05g==",
+      "integrity": "sha512-g53VjSARRv1JdST0LZRIg8RiuLr1TaBbVPsVvxh0/0Ymvi0xYUjDuoqQQAWtHJQUXhiShowPT/aXKNeHBcyQsw==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -6351,12 +6397,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
-    },
     "node_modules/number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -6790,9 +6830,9 @@
       }
     },
     "node_modules/path-parse": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "node_modules/path-root": {
@@ -6836,6 +6876,12 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "node_modules/picomatch": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
@@ -6952,34 +6998,29 @@
       }
     },
     "node_modules/postcss": {
-      "version": "6.0.23",
+      "version": "8.4.7",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
       "dev": true,
       "dependencies": {
-        "chalk": "^2.4.1",
+        "nanoid": "^3.3.1",
-        "source-map": "^0.6.1",
+        "picocolors": "^1.0.0",
-        "supports-color": "^5.4.0"
+        "source-map-js": "^1.0.2"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-value-parser": {
-      "version": "3.3.1",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "node_modules/postcss/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -7100,15 +7141,14 @@
       }
     },
     "node_modules/qunit": {
-      "version": "2.15.0",
+      "version": "2.17.2",
-      "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.17.2.tgz",
-      "integrity": "sha512-9ZoOILeyRZzrdvy2m7M4S76bneGD75Bh4B2aot3uKRKZuoEvA9gevvzU339L805Ys0AN2C7cnAV9nIBD5t72IQ==",
+      "integrity": "sha512-17isVvuOmALzsPjiV7wFg/6O5vJYXBrQZPwocfQSSh0I/rXvfX7bKMFJ4GMVW3U4P8r2mBeUy8EAngti4QD2Vw==",
       "dev": true,
       "dependencies": {
-        "commander": "7.1.0",
+        "commander": "7.2.0",
-        "js-reporters": "2.0.0",
+        "node-watch": "0.7.2",
-        "node-watch": "0.7.1",
+        "tiny-glob": "0.2.9"
-        "tiny-glob": "0.2.8"
       },
       "bin": {
         "qunit": "bin/qunit.js"
@@ -7671,9 +7711,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.32.13",
+      "version": "1.42.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.42.1.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "integrity": "sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -8328,6 +8368,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -8788,9 +8837,9 @@
       }
     },
     "node_modules/tiny-glob": {
-      "version": "0.2.8",
+      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
-      "integrity": "sha512-vkQP7qOslq63XRX9kMswlby99kyO5OvKptw7AMwBVMjXEI7Tb61eoI5DydyEMOseyGS5anDN1VPoVxEvH01q8w==",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
       "dev": true,
       "dependencies": {
         "globalyzer": "0.1.0",
@@ -9462,9 +9511,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "6.2.1",
+      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
       "dev": true,
       "dependencies": {
         "async-limiter": "~1.0.0"
@@ -10824,9 +10873,9 @@
       }
     },
     "ansi-regex": {
-      "version": "5.0.0",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "dev": true
     },
     "ansi-styles": {
@@ -11042,29 +11091,17 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "8.6.5",
+      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-8.6.5.tgz",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz",
-      "integrity": "sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==",
+      "integrity": "sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==",
       "dev": true,
       "requires": {
-        "browserslist": "^3.2.8",
+        "browserslist": "^4.19.1",
-        "caniuse-lite": "^1.0.30000864",
+        "caniuse-lite": "^1.0.30001297",
+        "fraction.js": "^4.1.2",
         "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
+        "picocolors": "^1.0.0",
-        "postcss": "^6.0.23",
+        "postcss-value-parser": "^4.2.0"
-        "postcss-value-parser": "^3.2.3"
-      },
-      "dependencies": {
-        "browserslist": {
-          "version": "3.2.8",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz",
-          "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30000844",
-            "electron-to-chromium": "^1.3.47"
-          }
-        }
       }
     },
     "babel-plugin-dynamic-import-node": {
@@ -11224,16 +11261,16 @@
       }
     },
     "browserslist": {
-      "version": "4.16.6",
+      "version": "4.19.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.3.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "integrity": "sha512-XK3X4xtKJ+Txj8G5c30B4gsm71s69lqXlkYui4s6EkKxuv49qjYlY6oVd+IFJ73d4YymtM3+djvvt/R/iJwwDg==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001219",
+        "caniuse-lite": "^1.0.30001312",
-        "colorette": "^1.2.2",
+        "electron-to-chromium": "^1.4.71",
-        "electron-to-chromium": "^1.3.723",
         "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
+        "node-releases": "^2.0.2",
+        "picocolors": "^1.0.0"
       }
     },
     "buffer-crc32": {
@@ -11306,9 +11343,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001228",
+      "version": "1.0.30001374",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz",
-      "integrity": "sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==",
+      "integrity": "sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==",
       "dev": true
     },
     "chalk": {
@@ -11565,12 +11602,6 @@
       "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
       "dev": true
     },
-    "colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
     "colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
@@ -11578,9 +11609,9 @@
       "dev": true
     },
     "commander": {
-      "version": "7.1.0",
+      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-pRxBna3MJe6HKnBGsDyMv8ETbptw3axEdYHoqNh7gu5oDcew8fs0xnivZGm06Ogk8zGAJ9VX+OPEr2GXEQK4dg==",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "dev": true
     },
     "commondir": {
@@ -11882,9 +11913,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.732",
+      "version": "1.4.73",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.732.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.73.tgz",
-      "integrity": "sha512-qKD5Pbq+QMk4nea4lMuncUMhpEiQwaJyCW7MrvissnRcBDENhVfDmAqQYRQ3X525oTzhar9Zh1cK0L2d1UKYcw==",
+      "integrity": "sha512-RlCffXkE/LliqfA5m29+dVDPB2r72y2D2egMMfIy3Le8ODrxjuZNVo4NIC2yPL01N4xb4nZQLwzi6Z5tGIGLnA==",
       "dev": true
     },
     "emoji-regex": {
@@ -12677,6 +12708,12 @@
         "for-in": "^1.0.1"
       }
     },
+    "fraction.js": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
+      "integrity": "sha512-pUHWWt6vHzZZiQJcM6S/0PXfS+g6FM4BF5rj9wZyreivhQPdsh5PpE25VtSNxq80wHS5RfY51Ii+8Z0Zl/pmzg==",
+      "dev": true
+    },
     "fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -12924,17 +12961,39 @@
       }
     },
     "gulp-autoprefixer": {
-      "version": "5.0.0",
+      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/gulp-autoprefixer/-/gulp-autoprefixer-8.0.0.tgz",
-      "integrity": "sha1-gjfCeKaXdScKHK/n1vEBz81YVUQ=",
+      "integrity": "sha512-sVR++PIaXpa81p52dmmA/jt50bw0egmylK5mjagfgOJ8uLDGaF9tHyzvetkY9Uo0gBZUS5sVqN3kX/GlUKOyog==",
       "dev": true,
       "requires": {
-        "autoprefixer": "^8.0.0",
+        "autoprefixer": "^10.2.6",
-        "fancy-log": "^1.3.2",
+        "fancy-log": "^1.3.3",
         "plugin-error": "^1.0.1",
-        "postcss": "^6.0.1",
+        "postcss": "^8.3.0",
-        "through2": "^2.0.0",
+        "through2": "^4.0.2",
-        "vinyl-sourcemaps-apply": "^0.2.0"
+        "vinyl-sourcemaps-apply": "^0.2.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "through2": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+          "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+          "dev": true,
+          "requires": {
+            "readable-stream": "3"
+          }
+        }
       }
     },
     "gulp-clean-css": {
@@ -14033,12 +14092,6 @@
         }
       }
     },
-    "js-reporters": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/js-reporters/-/js-reporters-2.0.0.tgz",
-      "integrity": "sha512-VJd/86niT7GzsaVc+Yxrs8QPrYl1orzv8bYZPuSOtxU6rk/pv8aOXTcIa7HaANvtvdLMTsZspAiucNQ6T2QFHw==",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14306,9 +14359,9 @@
       }
     },
     "marked": {
-      "version": "2.0.3",
+      "version": "4.0.12",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.0.12.tgz",
-      "integrity": "sha512-5otztIIcJfPc2qGTN8cVtOJEjNJZ0jwa46INMagrYfk0EvqtRuEHLsEe0LrFS0/q+ZRKT0+kXK7P2T1AN5lWRA==",
+      "integrity": "sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==",
       "dev": true
     },
     "matchdep": {
@@ -14515,6 +14568,12 @@
       "dev": true,
       "optional": true
     },
+    "nanoid": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
+      "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
+      "dev": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -14595,9 +14654,9 @@
       "dev": true
     },
     "node-qunit-puppeteer": {
-      "version": "2.0.3",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/node-qunit-puppeteer/-/node-qunit-puppeteer-2.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/node-qunit-puppeteer/-/node-qunit-puppeteer-2.1.0.tgz",
-      "integrity": "sha512-G4mWn3RBQ+JPzCNWzFQ4r6RUUZqj52D5E3Z7wxqRi5b4daph0Alk/mgBpAQqZq7TVR1oV2emnN0Bk0EgYz/4gw==",
+      "integrity": "sha512-53ytjfu+t51r9qbOsek5D9biAlGO808Pp6b1gGdg/fcGJGFZIJNHoVpFF3OLRe7IUXA9QjhsQL9IkK4NGenHCA==",
       "dev": true,
       "requires": {
         "colors": "^1.4.0",
@@ -14605,15 +14664,15 @@
       }
     },
     "node-releases": {
-      "version": "1.1.72",
+      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.72.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.2.tgz",
-      "integrity": "sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==",
+      "integrity": "sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==",
       "dev": true
     },
     "node-watch": {
-      "version": "0.7.1",
+      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/node-watch/-/node-watch-0.7.2.tgz",
-      "integrity": "sha512-UWblPYuZYrkCQCW5PxAwYSxaELNBLUckrTBBk8xr1/bUgyOkYYTsUcV4e3ytcazFEOyiRyiUrsG37pu6I0I05g==",
+      "integrity": "sha512-g53VjSARRv1JdST0LZRIg8RiuLr1TaBbVPsVvxh0/0Ymvi0xYUjDuoqQQAWtHJQUXhiShowPT/aXKNeHBcyQsw==",
       "dev": true
     },
     "normalize-package-data": {
@@ -14657,12 +14716,6 @@
         "once": "^1.3.2"
       }
     },
-    "num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
-      "dev": true
-    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -14986,9 +15039,9 @@
       "peer": true
     },
     "path-parse": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "path-root": {
@@ -15023,6 +15076,12 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "picomatch": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
@@ -15108,28 +15167,20 @@
       "dev": true
     },
     "postcss": {
-      "version": "6.0.23",
+      "version": "8.4.7",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
       "dev": true,
       "requires": {
-        "chalk": "^2.4.1",
+        "nanoid": "^3.3.1",
-        "source-map": "^0.6.1",
+        "picocolors": "^1.0.0",
-        "supports-color": "^5.4.0"
+        "source-map-js": "^1.0.2"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "postcss-value-parser": {
-      "version": "3.3.1",
+      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
     "prelude-ls": {
@@ -15229,15 +15280,14 @@
       }
     },
     "qunit": {
-      "version": "2.15.0",
+      "version": "2.17.2",
-      "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.15.0.tgz",
+      "resolved": "https://registry.npmjs.org/qunit/-/qunit-2.17.2.tgz",
-      "integrity": "sha512-9ZoOILeyRZzrdvy2m7M4S76bneGD75Bh4B2aot3uKRKZuoEvA9gevvzU339L805Ys0AN2C7cnAV9nIBD5t72IQ==",
+      "integrity": "sha512-17isVvuOmALzsPjiV7wFg/6O5vJYXBrQZPwocfQSSh0I/rXvfX7bKMFJ4GMVW3U4P8r2mBeUy8EAngti4QD2Vw==",
       "dev": true,
       "requires": {
-        "commander": "7.1.0",
+        "commander": "7.2.0",
-        "js-reporters": "2.0.0",
+        "node-watch": "0.7.2",
-        "node-watch": "0.7.1",
+        "tiny-glob": "0.2.9"
-        "tiny-glob": "0.2.8"
       }
     },
     "randombytes": {
@@ -15679,9 +15729,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.32.13",
+      "version": "1.42.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.42.1.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "integrity": "sha512-/zvGoN8B7dspKc5mC6HlaygyCBRvnyzzgD5khiaCfglWztY99cYoiTUksVx11NlnemrcfH5CEaCpsUKoW0cQqg==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -16219,6 +16269,12 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -16611,9 +16667,9 @@
       "dev": true
     },
     "tiny-glob": {
-      "version": "0.2.8",
+      "version": "0.2.9",
-      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
-      "integrity": "sha512-vkQP7qOslq63XRX9kMswlby99kyO5OvKptw7AMwBVMjXEI7Tb61eoI5DydyEMOseyGS5anDN1VPoVxEvH01q8w==",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
       "dev": true,
       "requires": {
         "globalyzer": "0.1.0",
@@ -17161,9 +17217,9 @@
       }
     },
     "ws": {
-      "version": "6.2.1",
+      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
       "dev": true,
       "requires": {
         "async-limiter": "~1.0.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reveal.js",
-  "version": "4.1.1",
+  "version": "4.4.0",
   "description": "The HTML Presentation Framework",
   "homepage": "https://revealjs.com",
   "subdomain": "revealjs",
@@ -42,7 +42,7 @@
     "fitty": "^2.3.0",
     "glob": "^7.1.7",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^5.0.0",
+    "gulp-autoprefixer": "^8.0.0",
     "gulp-clean-css": "^4.2.0",
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
@@ -50,15 +50,15 @@
     "gulp-tap": "^2.0.0",
     "gulp-zip": "^4.2.0",
     "highlight.js": "^10.0.3",
-    "marked": "^2.0.3",
+    "marked": "^4.0.12",
-    "node-qunit-puppeteer": "^2.0.1",
+    "node-qunit-puppeteer": "^2.1.0",
-    "qunit": "^2.10.0",
+    "qunit": "^2.17.2",
     "rollup": "^2.48.0",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.32.13",
+    "sass": "^1.39.2",
     "yargs": "^15.1.0"
   },
-  "browserslist": "> 0.5%, IE 11, not dead",
+  "browserslist": "> 2%, not dead",
   "eslintConfig": {
     "env": {
       "browser": true,

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.
@@ -30,12 +30,13 @@ const Plugin = {
 
 		// Read the plugin config options and provide fallbacks
 		let config = reveal.getConfig().highlight || {};
+
 		config.highlightOnLoad = typeof config.highlightOnLoad === 'boolean' ? config.highlightOnLoad : true;
 		config.escapeHTML = typeof config.escapeHTML === 'boolean' ? config.escapeHTML : true;
 
 		Array.from( reveal.getRevealElement().querySelectorAll( 'pre code' ) ).forEach( block => {
 
-			block.parentNode.className = 'code-wrapper';
+			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
@@ -61,12 +62,20 @@ const Plugin = {
 				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() {
@@ -97,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 ) {
@@ -133,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,7 +4,7 @@
  * of external markdown documents.
  */
 
-import marked from 'marked'
+import { marked } from 'marked';
 
 const DEFAULT_SLIDE_SEPARATOR = '\r?\n---\r?\n',
 	  DEFAULT_NOTES_SEPARATOR = 'notes?:',
@@ -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 ) {
 

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){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 t(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?e(Object(a),!0).forEach((function(e){n(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):e(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}export default function(){var e,n={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=t(t({},n),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=t(t({},n.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){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 t(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?e(Object(a),!0).forEach((function(e){n(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):e(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){var e,n={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=t(t({},n),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=t(t({},n.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 @@
-/**
+import {KaTeX} from "./katex";
- * A plugin which enables rendering of math equations inside
+import {MathJax2} from "./mathjax2";
- * of reveal.js slides. Essentially a thin wrapper for MathJax.
+import {MathJax3} from "./mathjax3";
- *
+
- * @author Hakim El Hattab
+const defaultTypesetter = MathJax2;
+
+/*!
+ * This plugin is a wrapper for the MathJax2,
+ * MathJax3 and KaTeX typesetter plugins.
  */
-const Plugin = () => {
+export default Plugin = Object.assign( defaultTypesetter(), {
-
+	KaTeX,
-	// The reveal.js instance this plugin is attached to
+	MathJax2,
-	let deck;
+	MathJax3
-
+} );
-	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;

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) {
+			if( !speakerWindow ) {
-            popup.focus();
+				alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
-            return;
+				return;
-        }
+			}
 
-		popup = window.open( 'about:blank', 'reveal.js - Notes', 'width=1100,height=700' );
+			connect();
-		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 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 );
+	 * Reconnect with an existing speaker view window.
-				if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
+	 */
-					clearInterval( connectInterval );
+	function reconnectSpeakerWindow( reconnectWindow ) {
-					onConnected();
+
-				}
+		if( speakerWindow && !speakerWindow.closed ) {
-				if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
+			speakerWindow.focus();
-					callRevealApi( data.methodName, data.arguments, data.callId );
+		}
-				}
+		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',
+				type: 'connect',
-				result: result,
+				state: deck.getState(),
-				callId: callId
+				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';
 		}
 
-		/**
+		// Look for notes defined in a fragment
-		 * Posts the current slide data to the notes window
+		if( fragmentElement ) {
-		 */
+			let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
-		function post( event ) {
+			if( fragmentNotes ) {
+				messageData.notes = fragmentNotes.innerHTML;
+				messageData.markdown = typeof fragmentNotes.getAttribute( 'data-markdown' ) === 'string';
 
-			let slideElement = deck.getCurrentSlide(),
+				// Ignore other slide notes
-				notesElement = slideElement.querySelector( 'aside.notes' ),
+				notesElements = null;
-				fragmentElement = slideElement.querySelector( '.current-fragment' );
+			}
-
+			else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
-			let messageData = {
+				messageData.notes = fragmentElement.getAttribute( 'data-notes' );
-				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';
+
+				// In case there are slide notes
+				notesElements = null;
 			}
+		}
 
-			// Look for notes defined in a fragment
+		// Look for notes defined in an aside element
-			if( fragmentElement ) {
+		if( notesElements ) {
-				let fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
+			messageData.notes = Array.from(notesElements).map( notesElement => notesElement.innerHTML ).join( '\n' );
-				if( fragmentNotes ) {
+			messageData.markdown = notesElements[0] && typeof notesElements[0].getAttribute( 'data-markdown' ) === 'string';
-					notesElement = fragmentNotes;
+		}
-				}
-				else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
-					messageData.notes = fragmentElement.getAttribute( 'data-notes' );
-					messageData.whitespace = 'pre-wrap';
 
-					// In case there are slide notes
+		speakerWindow.postMessage( JSON.stringify( messageData ), '*' );
-					notesElement = null;
+
-				}
+	}
+
+	/**
+	 * 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();
 			}
-
+			else if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
-			// Look for notes defined in an aside element
+				callRevealApi( data.methodName, data.arguments, data.callId );
-			if( notesElement ) {
-				messageData.notes = notesElement.innerHTML;
-				messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
 			}
 
-			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 );
+	 * Called once we have established a connection to the notes
-			deck.on( 'fragmentshown', post );
+	 * window.
-			deck.on( 'fragmenthidden', post );
+	 */
-			deck.on( 'overviewhidden', post );
+	function onConnected() {
-			deck.on( 'overviewshown', post );
-			deck.on( 'paused', post );
-			deck.on( 'resumed', post );
 
-			// Post the initial state
+		// Monitor events that trigger a change in state
-			post();
+		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 );
 
-		}
+		// Post the initial state
-
+		post();
-		connect();
 
 	}
 
@@ -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 ||
+	var supportsTransforms = 	'transform' in document.body.style;
-								'MozTransform' in document.body.style ||
-								'msTransform' in document.body.style ||
-								'OTransform' in document.body.style ||
-								'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 } );
+					triggerKeyboardEvent({ keyCode: 88 });
-					document.dispatchEvent( event );
 
 					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 );