DEV Community

Cover image for Simple Slides with Markdown and Python
Ryan Morshead
Ryan Morshead

Posted on • Updated on

Simple Slides with Markdown and Python

The Pain of PowerPoint

As a software developer, it's never fun to try and present my work using slides. Despite the bloat of tools like PowerPoint, when I'm trying to present code, they still somehow end up feeling restrictive. I find myself spending ages trying to center and format text all while shimming in screenshots of my code when I should really be focusing on the content of my presentation.

So over a few weekends I set out to create tool that would:

  1. Split a Markdown document into slides on each new title
  2. Convert the Markdown slides into HTML
  3. Serve up the HTML using a simple web server
  4. Be able to embed interactive widgets into slides

Slidedown

To satisfy the above goals I created Slidedown, a simple, pip installable, Python-based command line tool that can turn Markdown documents like this:

# Step 1

Create an awesome slide deck.

# Step 2

Present it to awesome people.

# Step 3

Profit?
Enter fullscreen mode Exit fullscreen mode

Into slides like this:

slides-gif

With one simple CLI command:

slidedown README.md
Enter fullscreen mode Exit fullscreen mode

Embedding Interactive Widgets

Slidedown was built on top of another one of my projects called IDOM - a package that blurs the lines between Javascript and Python. IDOM allows you to create highly interactive web pages without writing a single line of Javascript.

In Slidedown I've used it to enable you to embed interactive widgets into your slides in pure Python. With the following markup:

# Hello IDOM!

<span data-idom="hello.py" />
Enter fullscreen mode Exit fullscreen mode

and a script hello.py containing:

import idom

@idom.element
def Main():
    hi_count, set_hi_count = idom.hooks.use_state(1)
    return idom.html.button(
        {"onClick": lambda event: set_hi_count(hi_count + 1)},
        f"IDOM said hi {hi_count} time(s)",
    )
Enter fullscreen mode Exit fullscreen mode

you'll display a slide with an interactive button:

embedding-idom-gif

The possibilities with IDOM are limitless. You can embed everything from data dashboards to games. To see even more, check out some examples and be sure to try out the live examples!

Sharing Slides?

The beauty of using Markdown is that to share it, you can just create a repo on GitHub, GitLab, or BitBucket and upload your slides as a README.md that you can link to. All the resources for your slides (e.g. images) are also as easily accessible in the very same repository.

Of course if you have any embedded widgets then those won't be displayed on you're repo's page. On the other hand though, if you were using PowerPoint you wouldn't have those anyway, so it's not such a huge loss. However if you colleagues know how to clone your repository and pip install slidedown then all it takes is one simple command to run your slides locally for themselves.

Conclusion

  • If you ✍️ Slides
  • you 😠 PowerPoint
  • and you ❤️ Markdown

Then you should give Slidedown a try.

Top comments (8)

Collapse
 
michaelcurrin profile image
Michael Currin

Thanks for sharing. Looks easy to use.

For interest I've come across RevealJS which let's you use an NPM package to serve the slides or an HTML file which pulls in JS scripts and a markdown file of content to avoid compile step.

github.com/hakimel/reveal.js/tree/...

Collapse
 
rmorshea profile image
Ryan Morshead

I hadn't thought to use RevealJS. Since IDOM can integrate with native JS libraries maybe I could just use RevealJS rather than trying to role my own implementation in a future version.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

If you are planning to make it online anyway, you can a CDN, such as UNPKG to serve JavaScript and CSS as well; and your markup will be extremely barebone.

Collapse
 
rmorshea profile image
Ryan Morshead

Thanks for the suggestion! At present Slidedown works completely offline. I think I like the idea that you can use it without internet, so as easy as it would be to use a CDN, I think I'll have to stick to building JS dependencies into the app.

Collapse
 
calag4n profile image
calag4n

It's very interesting ! Specifically Idom which seems to be a React with hooks for Python. So bright 👏.

Collapse
 
rmorshea profile image
Ryan Morshead

Thanks! If you're interested, I've been drafting an article on IDOM itself. I'd be happy to field comments/questions/criticisms on the Gist before it gets published.

Collapse
 
calag4n profile image
calag4n

Thanks, I'll dive into it as soon as I can 👍

Collapse
 
rmorshea profile image
Ryan Morshead • Edited

I just posted an article about IDOM. Give it a read and let me know what you think: dev.to/rmorshea/idom-it-s-react-bu...