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?

Into slides like this:

With one simple CLI command:

slidedown README.md

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" />

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)",
    )

you'll display a slide with an interactive button:

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.

Comments

[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/...

[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.

[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.

[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.

[calag4n]

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

[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.

[calag4n]

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

[Ryan Morshead]

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