The html-template

Within the concept as described in Revealjs + Markdown, a “html-template” is needed.

Although such a file is needed for each webslide, most of this html-template is “fixed”. Typically a standard one is composed once, and that one is configured per webslide. Both steps are described in this article.

Configure the html-template

Only two or three items should be configured for each webslide. In the examples, the notation 〖...〗 is used for items that should be set for webslide. All text, including those braces itself should be set for each webslide.

Title

The title of the presentation (used in the window or tab) is set by the <title> tag in the html-template.

  <title>〖The title of the webslide〗</title>

Md-file

To chain the html-template and the md-file, the later has to be configured in the first (which is loaded in the browser). We have chosen to give the two files the same base-name (and differ the extension: .html vs .md)

      <section data-markdown="〖md-file-name〗.md"

Theme

Revealjs has theme-support which is similar to that of (the html-builder of) Sphinx. It mostly comes down to specifying [1] a ccs-file. That has to be done in the html-template file. For now, we simply hardcoded one. Search for «theme» in the examples, and replace by the one you like.

  <link rel="stylesheet" href="«revealjs»/css/theme/«theme».css"/>

Note

Compose or Configure?

Typically, I use the same theme for multiple webslides. Therefore, I “compose” a (or a few) basic html-template(s), and don’t “configure” them later. Others may configure it for each webslide.

This also applies to Global design, some may configure those line pro webslide.

Compose the html-template

In the examples the notation «...» is used for all items that normally are normally set only once.

Path

After Revealjs is downloaded and installed, the html-templates have to “find” those files. In the examples, the base-url is shown as «revealjs». Replace this with the correct directory; often this will be empty, when the are in stalled in the root-dir of the webserver.

  <link rel="stylesheet" href="«revealjs»/css/reveal.css"/>
  <link rel="stylesheet" href="«revealjs»/css/theme/«theme».css"/>

  <script src="«revealjs»/js/reveal.js"></script>
  <script src="«revealjs»/plugin/markdown/marked.js"></script>
  <script src="«revealjs»/plugin/markdown/markdown.js"></script>
  <script src="«revealjs»/plugin/notes/notes.js"></script>

Slide-separators

As md has no slide concept ( nor “page”), an regexp has to be defined to denote the nextslide [2]. Besides, revealjs has slides at multiple level: typical horizontal and vertical ones.

The following pseudo-directives are defined. Multiple spaces around the directive-word are allowed. Parameters after the pseudo-directive are allowed too, but ignored! No options (:keyword:-lines) are possible.

.. nextslide::: This denotes a new (horizontal) slide. The next part is optional (allowing .. slide::)
.. subslide::: This starts a (new) “vertical” slide. As an alternative .. vlside:: is allowed also.

               data-separator=".. (next)?slide *::.*\n"
               data-separator-vertical=".. (sub|v)slide *::.*\n"

Global design

Both revealjs, and its plugins, have a great number of options, that define the “look & feel of the presentation. Most default values are quite useful. My standard template change a few ones. See below.

Most design options can be set per slide (or fragment) also; see Design Options for an overview.

  <script>Reveal.initialize({
     slideNumber: 'c/t',
     showNotes: true,
     embedded: true,
     previewLinks: true,
     });</script>

The complete file

<html>
<head>
  <title>〖The title of the webslide〗</title>
  <link rel="stylesheet" href="«revealjs»/css/reveal.css"/>
  <link rel="stylesheet" href="«revealjs»/css/theme/«theme».css"/>
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section data-markdown="〖md-file-name〗.md"
               data-separator=".. (next)?slide *::.*\n"
               data-separator-vertical=".. (sub|v)slide *::.*\n"
               data-separator-notes=".. (presenter)?notes *::.*\n"
               data-charset="utf-8">
      </section>

    </div>
  </div>
  <script src="«revealjs»/js/reveal.js"></script>
  <script src="«revealjs»/plugin/markdown/marked.js"></script>
  <script src="«revealjs»/plugin/markdown/markdown.js"></script>
  <script src="«revealjs»/plugin/notes/notes.js"></script>
  <script>Reveal.initialize({
     slideNumber: 'c/t',
     showNotes: true,
     embedded: true,
     previewLinks: true,
     });</script>
</body>
</html>

Footnotes

Revealjs + Markdown Remote MD

Comments

comments powered by Disqus