Creating web-based presentations with Markdown

As researchers, we tend to give a lot of presentations. Most of my colleagues create them using commercial software, such as Microsoft's Power Point or Apple's Keynote. While these programmes offer a simple visual way to quickly create presentation slides with a click-and-point workflow, due to their proprietary nature, they can unfortunately only be shared with other colleagues who are working with Windows or OS X and have access to these programmes as well. When collaborating with someone out of this subgroup (e.g. Linux users), the only option is to share slides as PDF, which is quite limiting when intending to make further adaptations.

The two classical solutions to that problem are to either use Libre/Open Office's Impress or to create slides with LaTeX's Beamer class). While the former lacks flexibility due to mimicking the workflow of it's proprietary counterparts, the latter, while being very flexible, can be pretty complex to use.

Enter Remark

Remark allows you to create your slides using the very simple Markdown markup and produces HTML5 output that can be presented in any modern web browser - locally or online.

Markdown

If you have every formatted text on GitHub, Trello, StackOverflow or Reddit, then you are already familiar with Markdown, which uses a simple syntax to format plain text. Remark adds some additional slide-relevant syntax on top of that, allowing for entire presentations to be written in Markdown. Here is an example:

class: center, middle

Example presentation
====================

by [Florian Krause](http://www.fladd.de)

---


Using lists
===========

Presentations usually use lists items:

* Bullet item 1

* Bullet item 2

--
count: false

* Bullet item 3 (incremental)

    1. Numbered item 1

    2. Numbered item 2

---


Embedding images
================

* Images can be included by simply pointing to the file:

.center[![Example Picture](./ExamplePicture.jpg)]

---


Formatting text
===============

* Text can be _italic_ or **bold**

* There can be `inline code`

* And even full (syntax highlighted!) code blocks:

  ```python
  def test(a, b):
      c = a + b
      return "a + b = {0}."format(c)
  ````

???

* This is a comment and not visible on the slides

Pretty simple and readable, right?

markdown-to-slides

With markdown-to-slides you can create standalone HTML5 slides (which will download some Javascript in the background). That is, no other software than a web browser will be needed to present them! To create them, however, you will need, well, markdown-to-slides:

  1. Download and install node.js
  2. In a command line run:
    npm install markdown-to-slides -g

Now, assuming the above example is saved in a file called example_slides.md, the following command will create the slides and save them together in a single HTML5 file:
markdown-to-slides example_slides.md -o example_slides.html

Here is what the result looks like.

Notably, the markdown-to-slides command takes additional arguments, such as -s, wich allows to point to an external CSS file for creating fancier looking slides. For instance, this style will make them look like the official Remark example.

Presenting the slides

The really nice part is what happens when you press the P key on your keyboard when viewing the result in a browser: It toggles a presenter mode, including a presentation timer, slide preview and presenter notes! To make this really useful, you also need to press the C key, in order to clone the slides into another window. In this second window, press P once again to get back into normal mode. This window you can now show (in fullscreen) on the monitor that is seen by the audience, while the other window with the presenter mode goes to the monitor only you see. The two windows are synchronised, such that navigating through slides (using the arrow keys) will affect both simultaneously! Press ? to see a full list of shortcuts.

No additional software other than the web browser is needed for all this functionality! That means, just as I did with the example slides above, you can simply host your slides somewhere online (e.g. on your web server, or in your Dropbox) and they can be presented from right there - by yourself, or anyone else, if you want.

Exporting the slides

There are of course some situations in which a PDF of the presentation slides is still needed (e.g. as a backup in case the presentation computer has no internet access or blocks Javascript). To get one, the browser's print dialogue can be used to "Save as PDF". In my experience, this works best with Chrome/Chromium.