With the Euro Cup 2016 done, evenings can again be spent contributing to my favorite open source project: The impress.js presentation framework. In the series of blog posts about my additions to it, it is now time to unveil a feature I added by popular request: Markdown support.

Thanks again to the power of open source, this was easy to add. By integrating Markdown.js as an extra addon, you can now type Markdown instead of HTML in each impress.js step:

<div id="markdown" class="step slide markdown" data-rel-x="0" data-rel-y="900">
# Markdown 
## to author Impress.js presentations

* This presentation was written entirely in Markdown
* Added by popular request
  * Easy way to make quick, simple yet aesthetic, presentations
  * Authoring without all the clutter of HTML

All you have to do is add the markdown class to the div element, and the Markdown integration will find it, and convert it to HTML when the presentation is loading.

Comparison with Hovercraft & markdown-impress

For sure, converting to HTML from a simpler markup language is not a new idea, and several of these tools have existed for years in the impress.js community. I myself started with Hovercraft (RST to impress.js) before I decided it was too limiting for what I wanted to achieve, after which I started creating Impress.js presentations directly with HTML & CSS. There's also markdown-impress and even EasyImpress (Yaml to Impress.js).

The big difference with Markdown.js integration is that all of the above were command line tools. You'd write Markdown in a file, then run a program to convert that to a HTML file. With Markdown.js as an Impress.js addon, you get the best of both worlds: You can author your slides in Markdown if you want it to be quick and easy, but you always have the full power of HTML5 and CSS3 and even JavaScript at your fingertips when you want to... well, Impress.

I added a new demo presentation which tries to highlight precisely this powerful combination:

Open demo in new window

Slide separator

A common extension to standard Markdown found in the above tools as well, is to use 5 dashes as a slide separator. I wrote a few lines of JS to do that as well, so that you can do:

<div id="markdown" class="step slide markdown" data-rel-x="0" data-rel-y="900">
# Markdown 
## to author Impress.js presentations

* This presentation was written entirely in Markdown
* Added by popular request
  * Easy way to make quick, simple yet aesthetic, presentations
  * Authoring without all the clutter of HTML

-----
# Markdown.js

* Provided by [Markdown.js](https://github.com/evilstreak/markdown-js) 
  in [extras/](https://github.com/henrikingo/impress.js/tree/myfork/extras)
* Jot down your bullet points in *Markdown* & have it automatically converted to HTML
* Note: The Markdown is converted into a presentation client side, in the browser.
  This is unlike existing tools like [Hovercraft](https://github.com/regebro/hovercraft) 
  and [markdown-impress](https://binbinliao.com/markdown-impress/) where you generate 
  a new html file on the command line.
* This combines the ease of typing Markdown with the full power of 
  impress.js HTML5+CSS3+JavaScript!

-----
# Styles

* You can use *italics* & **bold**
* ...and `code`

Each line of 5 dashes will be replaced with a new div.step element.

The other command line tools that do this also have various quirky ways to define slide positioning and maybe things like colors. I have chosen not to support any of those. When you want to do that, just use HTML to specify each div.step element, then put Markdown inside (and CSS for colors, obviously)! It's the best of both worlds!