Advertisement
  1. Computer Skills
  2. Markdown
Computers

How to Create a Slideshow Presentation From Markdown Notes

by
Difficulty:IntermediateLength:LongLanguages:

Markdown text formatting has revolutionized note taking. It gives a way to format without cluttering up what is being written. Now comes the moment you need to make a presentation based on your notes. You need an effective and easy way to create your presentation from your notes. In this tutorial, I’ll show you how to create a HTML slide show from markdown notes.

Markdown to HTML

A rendering program is a program that takes the markdown and translates it to another format. The best renderer I have used is kramdown. Kramdown is a Ruby program that takes text in one format and translates it in to another. It defaults to markdown to HTML.

Since Ruby is pre-installed on all Macs, installing kramdown is easy. To install kramdown, open a Terminal and type:

sudo gem install kramdown

Once installed, the kramdown command is usable. As an example, put the following markdown in to a file called test.md:

On the command line, type:

kramdown test.md > test.html

There will now be a test.html file with the this content:

The kramdown program only translates the markdown given to valid HTML. It doesn’t try to create a full page of properly formatted HTML with a header and body sections. This is important for creating a slide show from markdown. For each slide, the HTML for the given content will be generated and not anything extra. It is easy to wrap the slides inside the main HTML for the slide show page.

Basics for an HTML Slideshow

The slideshow page has a beginning HTML, the slides HTML, and the ending HTML. The beginning and ending sections get copied in, while the slides HTML gets generated by kramdown with some extra clean-up work.

Create a file called presbegin.html with this code:

This is the beginning of the slide show. It’s not a complete HTML page. The body of the HTML has a three divs: container div, section0 div, and a slide div. The container div contains the entire slide show. 

Inside of the container is the section0 div and it’s slide div. The sections help format everything in each slide section, while the individual slide contains formatting for that slide.

The ending will be similar. Create a file called presend.html and place the following code:

Not much! It closes out the last slide’s divs and the body and html tags.

The only special formatting needed in the markdown notes is for any pictures and for detailing the end of each slide. Since markdown has an anchor type for pictures, that tag is used with one difference: instead of having a text description for the picture, that area will describe the classes to attach to the picture. Also, the markdown code for horizontal rules is used to separate slides. 

Therefore, the basic formula for creating the slide show is: copy the presbegin.html, generate HTML from the markdown, translate all <hr /> tags to </div></div><div id='section1' class='section'><div class='slide'></code>, fix all picture tags to use the subtext as classes, and copy the presend.html.

Create a new file called pres.rb and place this code:

This Ruby code performs the actions as described. The program file has to be made executable with:

chmod a+x pres.rb

The program is used with the following command line:

pres.rb <name of markdown file> <theme name>

This code is assuming that the presentation is not in the same directory as the code. Therefore, wherever you have the code, make sure you add it to your path.

Formatting With CSS

With the bulk translation of the markdown file to HTML done, the next step is to format the slides. To create the styles needed, add this code to the header section of the presbegin.html file:

The first part is a reset script using MeyerWeb Reset. Whenever working with HTML and CSS, a reset script should be used to put every browser on the same playing field. This is good design practice.

The second part are the styles needed to get the slides to take up the screen, the text to be centered, basic ordering and formatting for the pictures, and the basic setup for a background image. 

I have set the screen size to 1200x640 pixels which works great on my Macbook Air 11" screen. You can change it to whatever works best for you.

Now create a theme file. Make a file called Basic.css and place the following code:

This is a basic theme that you can use to make your own themes. This theme file will be copied to the presentation directory and renamed to theme.css. That is the file loaded by the slide show.

To add extra styling to pictures, create a class tag in the theme’s css file. Add that class tag to the text for the picture. Therefore, a picture with the background tag would look like:

Add the Javascript

For fastest loading of a web page, the JavaScripts should be at the bottom of the page. Therefore, in the presend.html, add this code just before the closing body tag:

This code loads in Mousetrap to control the slide show and jQuery to perform the transitions. Two global variables are used to control the slide show: slideNum and duration. The slideNum is the number for the current slide, and duration defines the speed of the change. The lower the duration, the faster the slides change.

Three functions are defined next: nextSlide(), prevSlide(), and beginSlide(). These functions allow the user to go to the next slide, previous slide, and back to the first slide respectively.

After the functions, I used a hook to the jQuery ready function that processes code after everything is loaded into the browser. Once everything is loaded, all slides are hidden and just the first slide made visible. Then the left arrow key is bound to the prevSlide() function, the right arrow key is bound to the nextSlide() function, and the b key is bound to the beginSlide() function.

In the code, you will notice the window.MaxSlideNum global variable. The ruby code for creating the slides sets this variable inside the HTML generated for the slide presentation. It tells the controlling functions how many slides are in this presentation.

Other Ways to Use the Script

While using the command line program is doable, it is not convenient. The tutorial, Writing Dropzone 3 Actions, shows how to create a Dropzone 3 action. Follow that tutorial to make a new Dropzone 3 action with the following code:

Once created, load the action in to Dropzone 3. When a markdown file is dropped on the zone, it will create the presentation in the same directory.

Dropzone 3 Action
Dropzone 3 Action

Since Dropzone 3 is great for dropping many items on to it, you can great many presentations at one time. Just collect the files in the Drop Bar. Then move them to the dropzone for converting. Clicking the action will allow you to pick which theme to use. The completed Dropzone 3 action is included in the download.

Markdown to Presentation Alfred Workflow
Markdown to Presentation Alfred Workflow

This can also be made into an Alfred Workflow. The completed workflow is included in the download. The mds:theme command allows you to select the theme to use. The mds:showtheme will show the name of the currently set them in a notification. You can use the Alfred Browser to view a markdown file. When you hit right arrow on the file, you can select the Markdown to Slides command to create the presentation.

Deckset Does It All

If you find this program useful, you might want to check out Deckset.

Deckset Markdown to Presentation
Deckset Markdown to Presentation

Deckset takes a markdown file and converts it to a slide show. It has more functionality than presented in this tutorial. It also has many great themes to use.

Conclusion

With time always being on a premium, it is great to make use of notes as the basis for a presentation. Now that you have the tools in your hands, go and make some great presentations. This code is very basic and there is plenty of room for improvements. If you have changes or new themes for this code, please pass them on.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.