Authoring Impress.js presentations in Markdown
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.
<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).
I added a new demo presentation which tries to highlight precisely this powerful combination:
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:
Each line of 5 dashes will be replaced with a new
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!