Update to support slide preview in both mode

public/css/extra.css

@@ -81,6 +81,8 @@
 }
 
 .ui-infobar {
+    position: relative;
+    z-index: 2;
     max-width: 758px;
     margin-top: 25px;
     margin-bottom: -25px;

public/css/slide-preview.css

@@ -0,0 +1,54 @@
+.markdown-body.slides {
+  position: relative;
+  z-index: 1;
+  color: #222;
+}
+
+.markdown-body.slides::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background-color: currentColor;
+  box-shadow: 0 0 0 50vw;
+}
+
+.markdown-body.slides section[data-markdown] {
+  position: relative;
+  margin-bottom: 1.5em;
+  background-color: #fff;
+  text-align: center;
+}
+
+.markdown-body.slides section[data-markdown]::before {
+  content: '';
+  display: block;
+  padding-bottom: 56.23%;
+}
+
+.markdown-body.slides section[data-markdown] div:first-child {
+  position: absolute;
+  top: 50%;
+  left: 1em;
+  right: 1em;
+  transform: translateY(-50%);
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.markdown-body.slides section[data-markdown] ul {
+  display: inline-block;
+}
+
+.markdown-body.slides > section > section + section::after {
+  content: '';
+  position: absolute;
+  top: -1.5em;
+  right: 1em;
+  height: 1.5em;
+  border: 3px solid #777;
+}

public/js/index.js

@@ -2914,18 +2914,39 @@ function updateViewInner() {
     var lastMeta = md.meta;
     md.meta = {};
     var rendered = md.render(value);
-    // only render again when meta changed
-    if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
-        parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix'));
-        rendered = md.render(value);
+    if (md.meta.type && md.meta.type === 'slide') {
+        var slideOptions = {
+            separator: '^(\r\n?|\n)---(\r\n?|\n)$',
+            verticalSeparator: '^(\r\n?|\n)----(\r\n?|\n)$'
+        };
+        var slides = RevealMarkdown.slidify(editor.getValue(), slideOptions);
+        ui.area.markdown.html(slides);
+        RevealMarkdown.initialize();
+        // prevent XSS
+        ui.area.markdown.html(preventXSS(ui.area.markdown.html()));
+        ui.area.markdown.addClass('slides');
+        syncscroll = false;
+        checkSyncToggle();
+    } else {
+        if (lastMeta.type && lastMeta.type === 'slide') {
+            refreshView();
+            ui.area.markdown.removeClass('slides');
+            syncscroll = true;
+            checkSyncToggle();
+        }
+        // only render again when meta changed
+        if (JSON.stringify(md.meta) != JSON.stringify(lastMeta)) {
+            parseMeta(md, ui.area.codemirror, ui.area.markdown, $('#toc'), $('#toc-affix'));
+            rendered = md.render(value);
+        }
+        // prevent XSS
+        rendered = preventXSS(rendered);
+        var result = postProcess(rendered).children().toArray();
+        partialUpdate(result, lastResult, ui.area.markdown.children().toArray());
+        if (result && lastResult && result.length != lastResult.length)
+            updateDataAttrs(result, ui.area.markdown.children().toArray());
+        lastResult = $(result).clone();
     }
-    // prevent XSS
-    rendered = preventXSS(rendered);
-    var result = postProcess(rendered).children().toArray();
-    partialUpdate(result, lastResult, ui.area.markdown.children().toArray());
-    if (result && lastResult && result.length != lastResult.length)
-        updateDataAttrs(result, ui.area.markdown.children().toArray());
-    lastResult = $(result).clone();
     finishView(ui.area.markdown);
     autoLinkify(ui.area.markdown);
     deduplicatedHeaderId(ui.area.markdown);

public/views/foot.ejs

@@ -77,4 +77,5 @@
 <script src="<%- url %>/js/render.js" defer></script>
 <script src="<%- url %>/js/history.js" defer></script>
 <script src="<%- url %>/js/index.js" defer></script>
-<script src="<%- url %>/js/syncscroll.js" defer></script>
+<script src="<%- url %>/js/syncscroll.js" defer></script>
+<script src="<%- url %>/js/reveal-markdown.js" defer></script>

public/views/head.ejs

@@ -38,6 +38,7 @@
 <link rel="stylesheet" href="<%- url %>/css/markdown.css">
 <link rel="stylesheet" href="<%- url %>/css/index.css">
 <link rel="stylesheet" href="<%- url %>/css/extra.css">
+<link rel="stylesheet" href="<%- url %>/css/slide-preview.css">
 <link rel="stylesheet" href="<%- url %>/css/site.css">
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->