Creating Impress.js presentations in colored JSON with Highlight.js

Last month I wrote about impress.js, and how I've started using it for my presentations. This has been going well, and during the past month I've actually given 2 more presentations using impress.js:

Dreams and fears of a database consultant
MongoDB and GIS

(You really have to click those links, embedding these presentations wouldn't make them justice!)

For both of these presentations I used a new template I developed, that is quite easy to use, yet produces cool presentations. The idea is to write each slide in valid JSON code, and use the Highlight.js library to colorize it. I then adapted the color scheme based on official MongoDB colors. All in all, JSON in the branded colors makes for a great presentation when the content is MongoDB related.

I've integrated Highlight.js into my impress.js repository (demo). My initial motivation was to use it the way it's probably intended to: to colorize code examples, since my slides often have code examples.

But then I thought of the idea that for my MongoDB related presentations, making the whole presentation JSON would look nice. And so it did, I'm quite pleased with the results.

In addition to the end result looking nice, doing the presentation this way was quite quick and convenient. I don't need to write a lot of HTML tags, I just write simple JSON and let Highlight.js make it pretty. (I can of course modify the colors applied by Highlight.js, in CSS.)

This experience has encouraged me to look further in this direction, and I'm now thinking of maybe adding an extras/ plugin that could convert Markdown into a nice impress.js presentation. (And before you go there, yes I know that there exist python scripts that can translate Markdown or RST into an impress.js presentation. They're nice if you want easily create simple black and white presentations, but I found them very limited in terms of creating really stunning presentations. So I want to do the opposite of what they do: I want to start in HTML and CSS, and only use Markdown as a shorthand markup inside the impress.js. This way I can always opt in to the full power of HTML5, CSS3 and even JavaScript.

Add new comment

The content of this field is kept private and will not be shown publicly. Cookie & Privacy Policy
  • 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 "_".
About the bookAbout this siteAcademicAccordAmazonBeginnersBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDistributed ConsensusDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonStartupsSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTransactionsTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube