Chandan Singh | great slides with reveal markdown

great slides with reveal markdown

view markdown

This post and the associated code contain some enhancements for reveal-md, an awesome library for creating presentations with markdown.

This has several big benefits:

  1. Quickly making slides, especially with many equations
  2. Having a 2D layout that helps keep slides organized
  3. You can easily embed webpages / interactive animations


You can see a demo of one of my reveal-md presentations for teaching machine learning, created completely from markdown (with external images).


To make things even faster, I use this preproc.js file to automatically create new slides with two hashtags (##) and new columns of slides with a single hashtag (#). To use, run with reveal-md --preprocessor preproc.js

module.exports = (markdown, options) => {
  return new Promise((resolve, reject) => {
    return resolve(
        .map((line, index) => {
          if (/### /.test(line))
              return line
          else if (/## /.test(line)) 
              return  '\n--\n' + line;
          else if (/# /.test(line)) 
              return  '\n---\n' + line;
              return line

The file shows a number of non-obvious ways to improve reveal-md. Some examples are:

  • inserting blank headers using ## <div> </div>
  • inserting iframes using inline html
      <div class="divmomentum">
          <iframe class="iframemomentum" src="" scrolling="no" frameborder="no"></iframe>
      .divmomentum {
          position: relative;
          width: block;
          height: 600px;
          overflow: hidden;
      .iframemomentum {
          position: absolute;            
          top: -165px;
          left: -25px;
          width: 1424px;
          height: 768px;
  • styling the presentation using css inline reveal-md file:
    .reveal h1,
    .reveal h2,
    .reveal h3,
    .reveal h4,
    .reveal h5,
    .reveal h6 {
        text-transform: lowercase;
    .reveal section img { 
        filter: invert(1); 
    iframe {
        filter: invert(1);
    body {
      background: #000;
      background-color: #000;