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
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
mathplugin, 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
revealplugin works well once you settle on a resolution (the
genericplugin, along with the default key action (
ArrowRight) can capture the behavior of slides built using the
@pauseattribute. Note that the
gridoption (see below) may not always work well for printing all slides, while
defaultcreates slides that
decktapesteps through properly. A local web server can also be employed to serve up the slides, see Section 5.11.
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
gridto 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
lineararranges 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.
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.htmlfile, 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
distdirectory 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
This process will duplicate more files than you need. Suppose your talk is produced to use the
solarizedtheme (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
talkdirectory should be organized as follows.
talk slides.html reset.css reveal.css reveal.js theme solarized.css plugin math math.js plugin.js