Reveal.js

Section 34.1 Reveal.js

To create a reveal.js slideshow using pretext, start by creating a new project as follows.

$ pretext new slideshow

You will notice a few differences from a standard project. In the project manifest, the format is “custom”, and there is an <xsl> tag that points to a custom xsl stylesheet in the xsl folder of the project. This will import the correct reveal.js stylesheet. After authoring your slides, you can build them with the following command.

$ pretext build web

To use xsltproc, run this to produce a Reveal.js slideshow:

xsltproc --xinclude -o path/to/output/slides.html
  --stringparam publisher path/to/source/publication.xml
  path/to/pretext/xsl/pretext-revealjs.xsl path/to/source/slides.xml

Reveal.js supports themes that affect the overall appearance of a slideshow. So in PreTeXt you can specify the name of theme in a publication file. See Subsection 44.5.1 for details.

You might assume that your slideshow will be presented with the internet available, perhaps in a classroom, and will be updated for use the next semester. Or maybe you are presenting at a conference where you do not want to trust an unfamiliar internet connection, and you will later host an archival version of your presentation on your website and you want it to “just work” ten years from now. So you can configure your slideshow to obtain resources from a Content Delivery Network (CDN) online, or you may arrange to copy the necessary files from reveal.js and store them locally (your hard disk, your website). See Subsection 44.5.4 for details on specifying these options, and see below for directions on how to organize the Reveal.js support files.

Reveal.js will render LaTeX syntax with MathJax, entirely similar to how MathJax is used in the PreTeXt conversion to HTML. This is accomplished with the Reveal.js math plugin, which is loaded automatically as part of your output. When you specify that resources come from a CDN, then this plugin will also get MathJax from a CDN. When you specify that resources are available locally (your hard disk, your website), then the plugin itself will be obtained locally, but MathJax will still be obtained from a CDN. So a local version may only be practical if you are careful not to include any mathematics in your document. (Reveal.js can be configured to use a locally installed copy of MathJax, but we have not provided any support for this scenario.)

We are not enthusiastic about PDF as an electronic format. But it might be a good choice as an archival format. So exporting your slideshow to a PDF could be a good choice for a long-term archive. On 2020-08-01 Andrew Rechnitzer suggests the decktape

github.com/astefanutti/decktape

node (Javascript) program. The reveal plugin works well once you settle on a resolution (the -s option). The generic plugin, along with the default key action (ArrowRight) can capture the behavior of slides built using the @pause attribute. Note that the grid option (see below) may not always work well for printing all slides, while default creates slides that decktape steps through properly. A local web server can also be employed to serve up the slides, see Section 5.11.

Navigation Mode.

Reveal.js has various options of the visibility of arrows a presenter can click on in order to move through a presentation. The visibility of these can be controlled via options in the publication file. See Subsection 44.5.2.

Reveal.js imagines slides laid out on a 2-D grid. Each PreTeXt section gives rise to a title slide and these are organized left-to-right. Below each of these slides, arranged vertically, are the slides comprising the section. We use the attribute value grid to refer to this arrangement.

If public speaking makes you nervous and going left-to-right and top-to-bottom nearly simultaneously means you get lost and even less confident (we’ve seen it), we have an option for you. The attribute value linear arranges all your slides from left-to-right. Aah, that’s better. See Subsection 44.5.3 for details on setting the navigation mode for your slideshow.

Local Resources.

To set up a Reveal.js slideshow to run locally, you need to have certain files available locally. We describe here the exact mechanics of doing this.

Suppose you have done the PreTeXt conversion, and have created a single slides.html file, which you have placed in a directory named talk. Now download or clone the git repository for Reveal.js (github.com/hakimel/reveal.js). This has a dist directory with four files, such as reveal.css, and also directory of themes, named theme. Copy these files and the directory to talk. Another directory in the repository is named plugin. Copy this directory to talk as well.

This process will duplicate more files than you need. Suppose your talk is produced to use the solarized theme (Subsection 44.5.1), and includes some math. Then as an example of how the copying should go, and as an example of the bare minimum necessary, your talk directory should be organized as follows.

talk
    slides.html
    reset.css
    reveal.css
    reveal.js
    theme
        solarized.css
    plugin
        math
            math.js
            plugin.js

Prev Top Next