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.

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!

Carlos (not verified)

Fri, 2018-07-20 12:27

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?

Hi Carlos

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 point with supporting Markdown directly in impress.js is so that you can keep it very simple if you want, but also you can use any html, css or javascript you can think of, if you need to do something fancy.

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

The content of this field is kept private and will not be shown publicly.
  • No HTML tags allowed.
  • External and mailto links in content links have an icon.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Each email address will be obfuscated in a human readable fashion or, if JavaScript is enabled, replaced with a spam resistent clickable link. Email addresses will get the default web form unless specified. If replacement text (a persons name) is required a webform is also required. Separate each part with the "|" pipe symbol. Replace spaces in names with "_".
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
About the bookAbout this siteAcademicAmazonBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube