How to make a slide presentation with a simple Markdown text file

kkibria — Thu, 03 Mar 2022 18:00:41 +0000

Let me forewarn you, this actually is more of a personal story!

Many of us make slide presentations often in our professional and personal life. I have used Powerpoint in my long professional life, it is very feature rich indeed. Making a flashy marketing presentation takes quite a bit of time. But that is not what we always do. I often wondered, why can't I make slides very quickly with just a text file using notepad or something? Specially for the team meetings on a Monday morning talking about technical issues on a software or hardware project.

By the way, I love music. I studied music in a local college while working full time in a fortune 500 high tech company. As such I was always pressed for time even when it was not a Monday.

First time I have seen something like that few years back, in a YouTube Google conference video, where the presenter created a slide show using web browser. It resonated with me.

In the middle of pandemic, I was home a lot. So, I wanted to make a few YouTube videos about composing music. In later part of 2019, when I actually attempted, I really needed something simple and quick to make slide shows to be used for videos. Coincidentally, I was exposed to svelte, a JavaScript driven tool that makes web technology easy. So I decided to give it a test drive for building something that I can use for making slides.

It started as a simple CLI (Command Line Interface) tool, but as I was making more videos I needed to add more features. I kept on doing that and now in 2022, it has accumulated enough powerful features that I love the tool for building presentations. It uses Markdown as a source. I can use my laptop using notepad or vscode to create the content. The tool incorporates livereload, and the slides get updated while I am developing the content. I keep the browser and notepad side by side and I am happy. It provides nice useful layout capabilities. I can take my laptop and show the slides in a meeting.

For instance I made this slide with a text file,

Not bad!

I used the following text in Markdown format which yielded the slide above,

# Slides and Navigation
## How do I make multiple slides?  

Do I need to make one text file for each slide? That might
be a lot of files!

Worry no more.

A single Markdown file can contain all your slides. We use
simple and practical ways to break the content into multiple
slides.

- Use top level headings to create new slides.
- Use Front Matter to create a new group of slides in a
  particular layout.

>- > Did you notice that we have switched, just now, the layout to a ***two column*** mode?
>- > It was done with ***Front Matter***.

## Navigating thru the SlideShow presentation is simple
You can use followings to navigate between the pages:  
- `PageUp`, `â†‘` (`Up-Arrow`), `â†` (`Left-Arrow`) keys to go
  backward.  
- Swipe right in mobile or touchscreen to go backward.
- `PageDown`, `â†“` (`Down-Arrow`), `â†’` (`Right-Arrow`) keys
  to go forward.  
- Swipe left in mobile or touchscreen to go forward.
- `MouseWheel` to go in both directions.

and I used following text in the front matter to control the layout,

layout: TwoColumn
footnote: True

I also can upload the content on any website and my audience can view the presentations on a web browser on their desktop, laptop and mobile devices. I actually use github pages to host my site free, works for me really great.

There are more layout capabilities in the tool of course. I have plan to add markdown text based math formula, diagram and graph rendering libraries in future.

With hope that it might be beneficial to some of you as it did for me, here is the link to a slide presentation hosted in github. Feel free to check SlideShow, which I built with the tool, for showcasing the tool. In this you will also find instructions on how to install the tool if you want to try it out. I like to know what you think.

DEV Community: kkibria

How to make a slide presentation with a simple Markdown text file