Markdown Slideshow Example: Mdpress

Last week I introduced a way to create Prezi-style “infinite canvas” style slide presentations written in plain text with markdown formatting. I used a free command line utility called Mdpress which takes your markdown text file and transforms it into a slideshow that can be shown using any modern browser. It also allows you to add the pan, scale, and rotation effects of Prezi through its support of something called Impress.js.

Though I went through the basic steps last week, I didn’t offer any concrete example. Today I offer you a simple example and two ways to improve it. Find the raw markdown text for my presentation here:

Now following my directions from last week, I saved this file and ran mdpress. Since I had a image for my first slide, I put the image folder with the appropriate image inside the folder that was created. The result is a slideshow that looks like this: Mdpress Slideshow #1

That was not terribly exciting. There are no Prezi effects, and it does not even offer some of the nice features that almost all other markdown-to-slideshow tools can provide, such as an easily accessible table of contents.

Now lets add some Prezi-style scrolling and scaling. See how I have changed my original markdown to add the special syntax I introduced last week:

Now the resulting slideshow comes out like this with a few more effects: Mdpress Slideshow #2

Even with the adjustment, it still doesn’t have all the pizazz of the Impress.js demonstration you can see here. I didn’t add any 3d movement or zoom out again at the end so you can see the whole canvas. More importantly, the default style that comes with Mdpress is not terribly exciting. Among other things, bullet points have no bullets, and non-active slides completely disappear when you move to the next slide which means that you can never use the canvas in a way that depicts things in context.

Unfortunately, in order to tweak the appearance of things like fonts, bullet points, and the opacity of non-active slides, you need to know a little CSS which I can’t offer in this posting. When you do, you can create the “themes” folder I spoke of last week and create your own custom theme. Here is a link to the main css used in my first two examples: CSS #1 and here is the same file after I modified it a bit: CSS #2. Comparing the two, you might notice that I changed the bullet point style, increased the font size of the header, and commented out a line which made other slides invisibile. I’m sure CSS wizards out there have many more ways they could improve it but for this simple example, you can see the result here: Mdpress Slideshow #3

Looking at this simple example you may decide that, even if you want to write your presentations in simple markdown text, the Prezi-like features are simply not worth the trouble. In that case, as a number of you pointed out in feedback to last week’s posting, there is a great alternative out there that I didn’t point out: using Pandoc to convert your markdown into one of a number of different browser-based slideshow toolkits out there. In my next posting, I’ll start with the exact same markdown file and give some examples using Pandoc to produce your slides.

Have you ever used Prezi or Impress.js? If so, what elements or features as part of its “infinite canvas” did you find added value to your presentation?

Image by Konrad M. Lawson released to the public domain.

Return to Top