HTML-based slideshows are becoming quite sophisticated. Powerful, yet simple to write. The future of presentations certainly lives in HTML, not
.ppt. There are some markdown-based HTML-slideshow generators, but they tend to be weaker, limited by the syntax. But I want the best of both!
I have a coder’s crush on the HTML slideshow framework Reveal.js, and I want it to compile to it from markdown. It looks so good. So good. Remark is a markdown-slide-compiler based on the Deck.js HTML slideshow framework. I’m not in love with it, but it looks like it works okay once set up.
Take notes like usual => Those notes magically become a presentation.
- I want to take notes using markdown
- I want those notes to generate a presentation. With minimal effort.
- I’m not picky about the output as long as it’s presentable and portable. If it’s HTML, it shouldn’t have dependencies. If it has a PDF option that’s okay too.
We have to start with a good HTML slideshow framework, then we can generate content for it based on a simpler (markdown-based) syntax.
To have markdown compile to a presentation, we’d need a few textual representations of things that are going on in a slideshow. This is where it gets tricky. Ways it’s currently done, or could potentially be done:
- Slide separator. Two ways currently done:
- de facto standard is
<hr>tag. I like that.
- The other option is with a string, like
- de facto standard is
- Slide attributes. These should be declared with the slide declaration. It should be based on HTML class. If the class is
- Slide attributes at the top of each slide, in key-value pairs (see Remark.js)
- Presenter notes. Associated with each slide.
.notes:keyword, anywhere in the slide. Only accepts a short string comfortably.
- Really, there’s no reason why notes shouldn’t also have markdown in them. Not sure how to best write these.
- Slide nesting. It’s an advanced feature that Reveal.js does well. This is harder to do, and not totally necessary. If I wanted to implement it, I might be okay with something header-based like this:
## <h2>for slide titles. CSS is the same for default template.
## <h2>is always ‘nested’ slidewise under its parent
- Most slides are content within a
# <h1>content before the first
## <h2>can be its own slide.
- Other suggestions?
Frameworks Written in HTML
Reveal.js is my favorite too! It’s really pretty, really simple, and it has features I didn’t realize I’d value. But now I’m frustrated that other frameworks don’t have them.
I like its
- progress bar
- zoom-out view
- nested slides
- simple eye-candy transitions
rvl.io is really pretty too. It’s easy enough and shiny enough that I’d actually consider making a powerpoint in it! It doesn’t have collaboration built-in though, so it’s not quite appropriate for my work unfortunately.
The Prezi of HTML presentations. Not at all what I’m looking for; I want super-simple.
This seems powerful, but I’m kinda scared of it. It’s not as friendly as Reveal.js.
But when it’s wrapped by Remark.js (below) it seems okay.
Frameworks Written in Modified Markdown
This is the interface I want!
Remark seems so clever! The more I look at it, the more I like it. But it’s not perfect, and it could be presented better.
It’s great, but it’s missing things (because Deck.js is missing things?)
- Presenter Notes
- Progress Bar
- Zoom-out view
- Nested Slides
It doesn’t come with any good default templates. Have to create your own CSS styling. The sample presetation is a decent start I guess.
Its more advanced features aren’t well-documented. I don’t understand the “template” situation, but I appreciate the two-dash
-- abbreviation to have things appear incrementally, that’s a nice feature.
Separating slides with a
<hr> tag) is a good idea, I totally support that.
I like the syntax for within-slide classing things. Like putting part of the slide on the right half of the screen using
.rightside[content] (assuming my CSS does that to the rightside class).
The way landslide does notes is okay; based on a keyword
I also like separating slides using a
! bang paragraph, that’s a nice idea. It’s neat and clean.
! is used by markdown for images, but this is distinct enough to be useful.
I have mixed feelings about the syntax to declare a slide and give it attributes
I like that attributes are right in the declaration line. I like that notes get their own slides.
But it feels arbitrary - I don’t like that it’s not based on markdown at all, that it’s 100% ‘locked into’ this framework.
If I Wrote One
I want to hold to standards whenever I can.
- New Slide: The newslide standard
----is good, I accept that as a standard.
- Slide Attributes: Remark-style slide properties such as
name: agendaare okay. And probably useful for other things too.
- Slide Attributes: Putting slide attributes on the same line as the
----would be okay too. (but maybe markdown doesn’t compile that?)
- Speaker Notes: I think we could requisition
!to separate the speaker notes section.
A few slides of mine might look like:
## Hardware 1. Hard Drive 2. RAM 3. Motherboard ! Average life of a hard drive is <4 years ---- ## Software The limits are endless ---- #Questions?
Casey Watts! studied neurobiology at Yale University, and he is a co-author on several neurobiology papers. He has also worked in software development for 10 years, including at Heroku. Casey is an independent author based in Washington, DC.
Casey is the author of Debugging Your Brain. This book brings together two parts of Casey's background: psychology and software development.
Debugging Your Brain (DYB) is a clear applied psychology book and a concise self-help book. Whether or not you have a technical background, you will find the software development analogies approachable and insightful. You will likely reference and re-read DYB many times, each time discovering new insights.