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

hingo's picture

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.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Allowed HTML tags: <h1> <h2> <h3> <h4> <p> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <sup> <div> <blockquote> <pre> <img>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically. (Better URL filter.)

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.