Coding Challenge #83 - Markdown Presentation Tool

This challenge is to build your own version of Go’s Present or Slidev.

Hi this is John with this week’s Coding Challenge.

🙏 Thank you for being one of the 75,785 software developers who have subscribed, I’m honoured to have you as a reader. 🎉

If there is a Coding Challenge you’d like to see, please let me know by replying to this email📧

Coding Challenge #83 - Markdown Presentation Tool

This challenge is to build your own version of Go’s Present or Slidev. They are tools that allow us to write and design presentations using Markdown to define the content of the slides. Both also provide the functionality to display the slides.

I find myself moving more and more toward writing all my documentation, courses, training material and presentations in Markdown. It makes them portable and most importantly for me as a software engineer I can version control them!

📌 Next Redis Live Course Starts Soon - February 17th

Would you like to build a network server from scratch with me?

Learning about network programming, concurrency, testing, and systems software development?

If so check out my course: Build A Redis Server Clone: Master Systems Programming Through Practice.

It is designed to be intense! It’s 11 hours of instructor time over two weeks. With the goal of having you build a clone of the original Redis server by the end of the two weeks.

If the date doesn’t work for you, I’ll be running it again in May or you can tackle the **self-paced, on demand course.**

If you are a **paid subscriber** you can get 20% off - please visit the paid subscriber benefits page for the code.

The Challenge - Building A Markdown Presentation Tool

In this challenge you’ll be building a tool that allows the user to create a new presentation with a simple command.

Once they have edited the Markdown to add their content they will be able to deliver the presentation with the tool.

Slidev has a great demonstration of what we’re aiming for on their homepage:

Step Zero

In this step you decide which programming language and IDE you’re going to use and you get yourself setup with a nice new project.

Step 1

In this step your goal is to allow user to create a new project with a suitable folder structure.

For example:

• A directory structure for presentation content:

  • slides

  • template / template customisation

  • images

• A .git folder - initialising the the project ready for git.

• Relevant configuration for the technology stack used to present the slides.

• A README.md explaining how the users uses their new presentation.

When it comes to the .git initialisation you could invoke git or if you fancy getting to know how git works “under the covers” check out and implement Step 1 of the build your own git coding challenge.

Step 2

In this step your goal is to launch a web server and render the markdown as it is, by which I mean in raw text, i.e. for example here’s the markdown for the beginning of Step 8 of my Redis course:

# Step 8 - Persistence

## Step 8 - Challenge: Persistence

In this step your goal is to make your Redis server persist its internal state 
to disk and to reload the state on startup.

For this step we will implement the AOF (Append Only File). In this mode the 
Redis server logs every operation received by the server to disk. 
These operations can then be replayed on startup to re-create the current 
status of the stored dataset.

The commands are logged in the same format as the Redis protocol itself.

Which would be presented like this:

As part of this step you also want to support live reload, so that when the user edits the Markdown, the change is reflected in the ‘rendered’ content in their browser. Frontend developers should be familiar with the benefits from this if they’ve used React.

Step 3

In this step your goal is to render the markdown in HTML. In other words allow the user to make their slides look nice!

I’d suggest you define the look and feel of the HTML as a template and provide a default template like Present does. Slidev allows the user to specify themes that govern the appearance of the slides and layouts that control the layout 🙂.

Depending on the template you create, your slide might now look more like this:

Step 4

In this step your goal is to allow the user of the tool to define their own template directory and use the pieces of the template in there if they exists, otherwise it should fall back to the default.

Step 5

In this step your goal is to support exporting the slides to PDF. This allows you to use them as a handout for an in person presentation or training course.

Going Further

If you fancy taking this coding challenge further you could:

• Extend it to support exporting to PowerPoint, Google Slides etc.

• Incorporate the ability to run example code - Present does this well.

If You Enjoy Coding Challenges Here Are Three Ways You Can Help Support It

1. Refer a friend or colleague to the newsletter. 🙏

2. Sign up for a paid subscription - think of it as buying me a coffee ☕️ twice a month, with the bonus that you also get 20% off any of my courses.

3. Buy one of my courses that walk you through a Coding Challenge.

Share Your Solutions!

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know via Bluesky or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo

Request for Feedback

I’m writing these challenges to help you develop your skills as a software engineer based on how I’ve approached my own personal learning and development. What works for me, might not be the best way for you - so if you have suggestions for how I can make these challenges more useful to you and others, please get in touch and let me know. All feedback greatly appreciated.

You can reach me on Bluesky, LinkedIn or through SubStack

Thanks and happy coding!

John