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).
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!
- Add new comment
- 10843 views
I have recently discovered
I have recently discovered impress.js and I was looking for a way to author with markdown and I discovered this post as well as hovercraft. Could you please elaborate on which kind of limitations did you find in Hovercraft and how can be solved using markdown.js?
Hovercraft vs impress.js 1.0 Markdown
In Hovercraft, you write a plain RST file. Hovercraft then takes this file and creates (compiles) an impress.js presentation out of it. This is all clean and simple, until you want to do something not supported by the RST markup, like unusual positioning of an image, or some additional CSS for a piece of text or so.
The other difference of course is that now you don't need to install some separate tool to create the presentation.
And the third difference is that some may nowadays prefer Markdown over RST. I don't personally think there's a big difference there.
Add new comment