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.

About the bookAbout this siteAcademicAccordAmazonAppleBeginnersBooksBuildBotBusiness modelsbzrCassandraCloudcloud computingclsCommunitycommunityleadershipsummitConsistencycoodiaryCopyrightCreative CommonscssDatabasesdataminingDatastaxDevOpsDistributed ConsensusDrizzleDrupalEconomyelectronEthicsEurovisionFacebookFrosconFunnyGaleraGISgithubGnomeGovernanceHandlerSocketHigh AvailabilityimpressionistimpressjsInkscapeInternetJavaScriptjsonKDEKubuntuLicensingLinuxMaidanMaker cultureMariaDBmarkdownMEAN stackMepSQLMicrosoftMobileMongoDBMontyProgramMusicMySQLMySQL ClusterNerdsNodeNoSQLNyrkiöodbaOpen ContentOpen SourceOpenSQLCampOracleOSConPAMPParkinsonPatentsPerconaperformancePersonalPhilosophyPHPPiratesPlanetDrupalPoliticsPostgreSQLPresalespresentationsPress releasesProgrammingRed HatReplicationSeveralninesSillySkySQLSolonStartupsSunSybaseSymbiansysbenchtalksTechnicalTechnologyThe making ofTransactionsTungstenTwitterUbuntuvolcanoWeb2.0WikipediaWork from HomexmlYouTube

Search

Recent blog posts

Recent comments