lib/template/reveal.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>{{{title}}}</title>
    {{#absoluteUrl}}
    <meta property="og:title" content="{{{title}}}" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="{{{absoluteUrl}}}/featured-slide.jpg" />
    <meta property="og:url" content="{{{absoluteUrl}}}" />
    {{/absoluteUrl}}
    <link rel="shortcut icon" href="{{{base}}}/favicon.ico" />
    <link rel="stylesheet" href="{{{base}}}/dist/reset.css" />
    <link rel="stylesheet" href="{{{base}}}/dist/reveal.css" />
    <link rel="stylesheet" href="{{{themeUrl}}}" id="theme" />
    <link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />

    {{#cssPaths}}
    <link rel="stylesheet" href="{{{.}}}" />
    {{/cssPaths}} {{#watch}}

    <script>
      document.write(
        '<script src="http://' +
          (location.host || 'localhost').split(':')[0] +
          ':35729/livereload.js?snipver=1"></' +
          'script>'
      );
    </script>
    {{/watch}}
  </head>
  <body>
    <div class="reveal">
      <div class="slides">
        <section data-markdown {{{slidifyAttributes}}}>
          <textarea data-template>
            {{{markdown}}}
          </textarea>
        </section>
      </div>
    </div>

    <script src="{{{base}}}/dist/reveal.js"></script>

    {{#mermaidOptionsStr}}
    <script src="{{{base}}}/mermaid/dist/mermaid.min.js"></script>
    {{/mermaidOptionsStr}}

    <script src="{{{base}}}/plugin/markdown/markdown.js"></script>
    <script src="{{{base}}}/plugin/highlight/highlight.js"></script>
    <script src="{{{base}}}/plugin/zoom/zoom.js"></script>
    <script src="{{{base}}}/plugin/notes/notes.js"></script>
    <script src="{{{base}}}/plugin/math/math.js"></script>
    <script>
      function extend() {
        var target = {};
        for (var i = 0; i < arguments.length; i++) {
          var source = arguments[i];
          for (var key in source) {
            if (source.hasOwnProperty(key)) {
              target[key] = source[key];
            }
          }
        }
        return target;
      }

      // default options to init reveal.js
      var defaultOptions = {
        controls: true,
        progress: true,
        history: true,
        center: true,
        transition: 'default', // none/fade/slide/convex/concave/zoom
        slideNumber: true,
        highlight: {
          highlightOnLoad: false
        },
        plugins: [
          RevealMarkdown,
          RevealHighlight,
          RevealZoom,
          RevealNotes,
          RevealMath
        ]
      };

      // options from URL query string
      var queryOptions = Reveal().getQueryHash() || {};

      var options = extend(defaultOptions, {{{revealOptionsStr}}}, queryOptions);
    </script>

    {{#scriptPaths}}
    <script src="{{{.}}}"></script>
    {{/scriptPaths}}

    <script>
      Reveal.initialize(options);
      Reveal.addEventListener('ready', function (event) {
        const blocks = Reveal.getRevealElement().querySelectorAll('pre code:not(.mermaid)');
        const hlp = Reveal.getPlugin('highlight');
        blocks.forEach(hlp.highlightBlock);
      });
    </script>

    {{#mermaidOptionsStr}}
    <script>
      const mermaidOptions = extend({ startOnLoad: false }, {{{mermaidOptionsStr}}});
      mermaid.startOnLoad = false;
      mermaid.initialize(mermaidOptions);
      const cb = function (event) {
        mermaid.init(mermaidOptions, '.stack.present > .present pre code.mermaid');
        mermaid.init(mermaidOptions, '.slides > .present:not(.stack) pre code.mermaid');
      }
      Reveal.addEventListener('ready', cb);
      Reveal.addEventListener('slidetransitionend', cb);
    </script>
    {{/mermaidOptionsStr}}
  </body>
</html>