Third Advent 2020 – Content authoring in reveal.js

Cover Advent 3

Note: The content comes from the Docker site and was taken from the documentation.

Today we turn our attention to the contents of our presentation. You define the content of a slide in a so-called section. By default, it is captured in HTML. However, this can quickly become confusing if you define the content “inline”. That’s why we’re taking a different approach here and outsourcing our content to Markdown files.

You don’t know Markdown yet? Hereyou can find the most important information about it.

It is crucial that reveal.js can correctly interpret the contents of a Markdown file. For this to succeed, you should tell the framework four things:

1. where in this file does a section start?

2. where in this file does a section end?

3. how are the sections arranged?

4. what additional attributes are present?

We specify: to create a horizontal wrap, we write in the Markdown file a blank line, three dashes (—) and then another blank line. If, on the other hand, we write a blank line, two dashes (–), and then another blank line, we create a vertical break.

For each horizontally arranged slide (section) we define a Markdown file. Thus, we do not need to use the marker for horizontal wrapping in the Markdown files.

In all Markdown files, we define the section itself – and the associated vertical sections, if needed. We place the Markdown files in the assets folder, and there in the md subfolder.

How you can understand all this, I will explain with an example. Let’s just make reveal.js place the texts further up instead of in the middle. For this we add the initialize method in the index.html file so that it looks like this:

Picture of Code

To make the text appear left-aligned, we add the following to the app.css file:

Picture of Code

Conversion of the "manage" section

In the md folder we create a Markdown file named The content of this file is quickly created. In addition to a brief explanation of each Docker command, I’ll show you some examples right away. Both the command and the examples are immediately recognizable as code. The examples are highlighted line by line as the user “scrolls”. This way, the audience immediately recognizes which example is being discussed. In addition, the lines are numbered consecutively.

Picture of Code

The above example shows the build command, other commands are designed analogously. Lines 5, 19 and 23 show the vertical wrap.

In the index.html file we change the section:

Picture of Code

Now we tell the section two things in addition to the previous attributes: first, the path to the Markdown file, and second, the markers for the wraps.

We have already checked off the conversion of the section. All other sections are changed over analogously.

If everything went smoothly, the view for the command should now look like this:

Docker Build Command

Take a breath, you’re almost there! In Part 4, we’ll add a few more bits and pieces to the presentation before wrapping up our project.

Table of contents