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

demo

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

enhancements

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 slides.md

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

The slides.md 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="https://distill.pub/2017/momentum/" scrolling="no" frameborder="no"></iframe>
      </div>
    
      <style>
      .divmomentum {
          position: relative;
          width: block;
          height: 600px;
          overflow: hidden;
      }
    
      .iframemomentum {
          position: absolute;            
          top: -165px;
          left: -25px;
          width: 1424px;
          height: 768px;
      }
      </style>
    
  • styling the presentation using css inline reveal-md file:
    <style>
    .reveal h1,
    .reveal h2,
    .reveal h3,
    .reveal h4,
    .reveal h5,
    .reveal h6 {
        text-transform: lowercase;
    }
    .reveal section img { 
        background:none; 
        border:none; 
        box-shadow:none; 
        filter: invert(1); 
    }
    iframe {
        filter: invert(1);
    }
    body {
      background: #000;
      background-color: #000; 
    }
    </style>