presentations from markdown

.

The Ultimate List of Markdown Presentation Tools

Try tiiny.host

Join the tiiny digest.

Get the most useful tips & tricks straight to your inbox

Creating presentations in Markdown is a bit time-consuming. However, there are a couple of excellent tools out there that are explicitly used for creating presentations with Markdown.

Marp, Slippr, and Cafe-Pitch are the most used tools for Markdown Presentations. All three are GitHub Projects.

We have compiled a complete listicle of numerous tools to help you better understand Markdown Presentation Tools.

Top 23 Markdown Presentation Tools

The 23 top-notch tools for creating slide decks with Markdown are:

Markdown-slides

Marp is a creative tool for preparing beautiful slide decks or presentations. Also known as the Markdown representation ecosystem, Marp has been one of the most reliable and used tools for generating presentations with Markdown. It is intimidating at first but believe it or not, within a few days, you can get a good grasp of this tool.

If you know how to write documents in Markdown, you can use this tool without any hassle. Because with Marp, you only need to focus on writing your text document in Markdown.

Slippr is an electron-based app that’s used to create Markdown presentations. With Slippr, you can easily create attractive presentations within a few seconds. To install this tool, you can head over to yarnpkg.com. You can also directly run Slippr using.

yarn run start

There are numerous functions available in Slippr to help you customize the most beautiful slides. You can adjust the functions according to your desires on all three pages, the editing, slides, and the timer page.

CafePitch is another electron built tool for creating presentations with Markdown. You can install and run CafePitch via

npm install -g cafe-pitch.

It is a GitHub project, and it might be a bit daunting for you to understand its usage. However, you can get a better understanding of setting up and testing the tool here .

Reveal.js is one of the most innovative and simplest open-source tools out there to create Markdown presentations. This HTML presentation framework allows anyone to design visually appealing and eye-catchy presentations within a few minutes.

Reveal.js has many excellent features such as nested slides, auto-animate, syntax-highlighted code, pdf export, etc. With Reveal.js, you can perform all functions in your presentation that you can do on the web, as it’s an open-source HTML presentation framework.

Using MDX would be much easier for you if you know how to write code in Markdown Documents. MDX is a simple format through which you can write your documents in Markdown.

It has many features that can make your presentation look more than just a piece of text. MDX lets people import visual components such as charts and other designs. These can be embedded with the content in Markdown.

Another presentation tool, Remark, is made for people who know HTML and writing documents in Markdown. The remark tool has some of the best specialties available such as markdown formatting, supporting multiple languages, syntax highlighting, and presentation templates. Working with Remark is incredibly easy. View the setup and running guide here to know how you can get started with this impeccable tool .

Spectacle is a ReactJS based app designed for the ease of markdown presentation developers. You can write your presentations in JSX, Markdown, or MDX with Spectacle. It’s totally up to the user to pick their favorite one and prepare a beautiful presentation. Spectacle provides customized backgrounds, animated colors, slide fragments, and many other specialties to help you form a unique slide deck.

Deck is an open-source GitHub project that’s specifically designed to tailor the needs of users. With Deck, you can try out multiple designs while building up your presentations.

This Markdown-driven content presentation system is easy to use and is available for everyone.

Being a user, you can also make significant contributions to this tool, aiming for its betterment.

Slides are also one of the top-rated markdown presentation tools that are used globally. With slides you can create professional yet beautiful presentations for your needs. Slides provide access to several unique and modern features that can make your presentation look more attractive and inspiring for the audience.

To make your presentations visually appealing and exquisite, you can even collaborate with other designers and developers with the help of slides.

The eleventh tool in our guide is HackMD. You can collaborate on personal, professional, and team documentation in real-time with the HackMD. It is a perfect tool for creating presentations in Markdown as it allows us to put ineffective ideas together and share them with others.

You will get access to some functions in HackMD that you can use for entirely free while developing your presentations in Markdown.

Presenta is one of the best tools for creating presentations with Markdown that lets people make the quickest slides than they could with any other tool. It provides access to several official plugins, tutorials, community guidelines, and built-in features to help the users understand the tool quickly. To better understand how to present work, you can head over to their website and learn from their video tutorials.

With Deckset (MacOs app), you can create presentations in Markdown within the least possible time. If you want to share your ideas with your team members and prepare text documents for your projects, this tool will be a perfect pick for you as it will convert your simple text documents into visually attractive designs.

To convert your boring text documents into attractive presentations or slides, Deckset will help you out.

Quiver is a notebook tool that is specifically designed for programmers to write their codes in Markdown. This tool can be used for several purposes, such as writing project scripts, preparing project guidelines or summaries. If you want to create presentations in Markdown that can appeal to the audience and engage them through a conversational style, then Quiver can help you with this.

Generating attractive slides presentations and slideshows is now even easier with the Pandoc tool. It is a unique tool that produces presentations not only in Markdown but in HTML and JavaScript too. So if you want to display your technical coding text documents in a beautiful style to attract the audience’s attention, then Pandoc should be your priority as it will help you.

You can even break your slideshows into multiple sections with the help of headers and bullet points.

Fusuma is another tool that is designed to help you create slides easily and quickly in Markdown. Very few tools provide the opportunity to create slides for presentations in Markdown, and Fusuma is one of those.

You can also enjoy other features such as exporting your presentations as PDF or deploying GitHub pages and creating slides in real-time. It has the quickest setup, and you can view the process here.

Present is a terminal-based presentation tool that lets users write in Markdown and create attractive presentations. You can add colorful backgrounds, visuals, and charts to convert your simple text document into a beautiful slide. This is a GitHub project, and you can see the installation and user’s guidelines here .

Backslide is the 19th tool on our list. Its core features include automatic templates and live preview server self-contained HTML export solution, automated PDF conversion, and multiple presentations support.

Many people use Backslide to create their presentations, make slides, export them, and convert them into PDF.

Patat is not a very common tool that most people use but a small tool that allows users to create presentations using Markdown. This tool does not have a lot of unique features that can make it stand out from others. But some of the most highlighted features are intelligent slide splitting, multiple fragments, lifetime support, and auto-advancing the configurable delays.

Markdown slides are also a unique project specifically designed for users who want to write their text documents in Markdown. Markdown slides enable users to write their text in a unique and beautiful presentation style with several animations, visual and mathematical calculations. This tool also lets people convert their presentations into PDFs.

S9 is a perfect and free alternative to PowerPoint and keynote. You can write your text in Markdown and format them with the help of available features to make your text look visually compelling and attractive to the audience. This S9 project provides several out-of-the-box themes and built-in support to help users get the most of this tool.

If you want to generate HTML presentations using Markdown quickly and easily, then Cleaver is one of the top-notch options that you should go with to make things easier. With this tool, you can produce splendid slides for presentations to show your simple text.

Not only this, but Cleaver also provides several other options that can make your designs look more professional and excellent.

Conclusion:

Markdown is a writing format used by many technical writers to write down their technical documentation. On average, people belonging to technical fields usually love Markdown, but those from different areas hate it.

It is a unique style of formatting content in an editor without requiring a person to know programming languages such as JavaScript, CSS, Ruby, etc. Many tools help people write their text using Markdown and convert their texts into tempting slides.

How to upload content using your own web address

How to share a pdf as a link.

4 Markdown-powered slide generators

Vector Open Stock. CC BY-SA 3.0.

Imagine you've been tapped to give a presentation. As you're preparing your talk, you think, "I should whip up a few slides."

Maybe you prefer the simplicity of plain text , or maybe you think software like LibreOffice Writer is overkill for what you need to do. Or perhaps you just want to embrace your inner geek.

It's easy to turn files formatted with Markdown into attractive presentation slides. Here are four tools that can do help you do the job.

One of the more flexible applications on this list, Landslide is a command-line application that takes files formatted with Markdown, reStructuredText , or Textile and converts them into an HTML file based on Google’s HTML5 slides template .

All you need to do is write up your slides with Markdown, crack open a terminal window, and run the command landslide followed by the name of the file. Landslide will spit out presentation.html , which you can open in any web browser. Simple, isn’t it?

Don't let that simplicity fool you. Landslide offers more than a few useful features, such as the ability to add notes and create configuration files for your slides. Why would you want to do that? According to Landslide's developer, it helps with aggregating and reusing source directories across presentations.

Viewing presenter notes in a Landslide presentation

Marp is a work in progress, but it shows promise. Short for "Markdown Presentation Writer," Marp is an Electron app in which you craft slides using a simple two-pane editor: Write in Markdown in the left pane and you get a preview in the right pane.

Marp supports GitHub Flavored Markdown . If you need a quick tutorial on using GitHub Flavored Markdown to write slides, check out the sample presentation . It's a bit more flexible than baseline Markdown.

While Marp comes with only two very basic themes, you can add background images to your slides, resize them, and include math. On the down side, it currently lets you export your slides only as PDF files. To be honest, I wonder why HTML export wasn’t a feature from day one.

Editing some simple slides in Marp

You probably know pandoc as a magic wand for converting between various markup languages. What you might not know is that pandoc can take a file formatted with Markdown and create attractive HTML slides that work with the Slidy , Slideous , DZSlides , S5 , and Reveal.js presentation frameworks. If you prefer LaTeX , you can also output PDF slides using the Beamer package .

You'll need to use specific formatting for your slides, but you can add some variables to control how they behave. You can also change the look and feel of your slides, add pauses between slides, and include speaker notes.

Of course, you must have the supporting files for your preferred presentation framework installed on your computer. Pandoc spits out only the raw slide file.

Viewing slides created with Pandoc and DZSlides

Hacker Slides

Hacker Slides is an application for Sandstorm and Sandstorm Oasis that mates Markdown and the Reveal.js slide framework. The slides are simple, but they can be visually striking.

Craft your slide deck in a two-pane editor in your browser—type in Markdown on the left and see it rendered on the right. When you're ready to present, you can do it from within Sandstorm or get a link that you can share with others to present remotely.

What’s that—you say that you don’t use Sandstorm or Sandstorm Oasis? No worries.There's a version of Hacker Slides that you can run on your desktop or server.

Editing slides in Hacker Slides

Two honorable mentions

If you use Jupyter Notebooks (see community moderator Don Watkins' article ) to publish data or instructional texts, then Jupyter2slides is for you. It works with Reveal.js to convert a notebook into a nice set of HTML slides.

If you prefer your applications hosted, test-drive GitPitch . It works with GitHub, GitLab, and Bitbucket. Just push the source files for your slides to a repository on one of those services, point GitPitch to that repository, and your slides are ready to view at the GitPitch site.

Do you have a favorite Markdown-powered slide generator? Share it by leaving a comment.

Related Content

DEV Community

Posted on Oct 25, 2021

The Ultimate List of Markdown Presentation Tools

We have compiled a list of 23 top-notch tools to help you create slide decks with Markdown.

Marp - Marp is a creative tool for preparing beautiful slide decks or presentations. Also known as the Markdown representation ecosystem, Marp has been one of the most reliable and used tools for generating presentations with Markdown.

Slippr - Slippr is an electron-based app that’s used to create Markdown presentations. There are numerous functions available in Slippr to help you customize the most beautiful slides.

CafePitch - It is a GitHub project, and it might be a bit difficult for you to understand its usage. However, you can get a better understanding of setting up and testing the tool here.

Reveal.js - Reveal.js is one of the most innovative and simplest open-source tools out there to create Markdown presentations.

MDX Deck - MDX lets people import visual components such as charts and other designs. These can be embedded with the content in Markdown.

Remark - The remark tool has some of the best specialties available such as markdown formatting and supporting multiple languages.

Spectacle - Spectacle is a ReactJS based app. Spectacle provides customized backgrounds, animated colors, slide fragments, and many other specialties.

Deck - With Deck, you can try out multiple designs while building up your presentations.

Slides - To make your presentations visually appealing and exquisite, you can collaborate with other designers and developers with the help of slides.

Swipe - Swipe lets people prepare any presentation, be it personal or professional.

HackMD - It is a perfect tool for creating presentations in Markdown as it allows users to put ineffective ideas together and share them with others.

Presenta - Presenta provides access to several official plugins, tutorials, community guidelines, and built-in features to help the users understand the tool quickly.

Deckset - To convert your boring text documents into attractive presentations or slides, Deckset will help you out.

Quiver - Quiver is a notebook tool that is specifically designed for programmers to write their codes in Markdown.

Slideas - It provides you with both fantastic features and a quick turnaround for the presentation preparation.

Pandoc - It is a unique tool that produces presentations not only in Markdown but in HTML and JavaScript too.

Fusuma - Fusuma is another tool that is designed to help you create slides easily and quickly in Markdown.

Present - This is a GitHub project, and you can see the installation and user’s guidelines here.

Backslide - You can use Backslide to create your presentations, make slides, export them, and convert them into PDF.

Patat - This tool does not have a lot of unique features that can make it stand out from others. However, it's still a good tool to work with.

Markdown-slides - Markdown slides enable users to write their text in a unique and beautiful presentation style with several animations.

S9 - With S9, you can write your text in Markdown and format them with the help of available features.

Cleaver - If you want to generate HTML presentations using Markdown quickly and easily, then Cleaver is one of the top-notch options that you should go with.

If you'd like to know more about these tools, you can read our complete blog post here: https://tiiny.host/blog/the-ultimate-list-of-markdown-presentation-tools/

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Do you Know Only Fools Use APIs Doc Platform?

Scofield Idehen - May 16

Exploring Graph Databases: Neo4j

Kartik Mehta - May 4

Conditional Expressions

Paul Ngugi - May 3

All you need to get started with web development.

Audrey Mengue - May 26

We're a place where coders share, stay up-to-date and grow their careers.

Markdown slides editor

Create your next presentation with Markdown

Goal Oriented

Unlike many other presentation editors, MdSlides is designed to focus on the content rather than moving text blocks back and forth.

Mobile First

The device used does not affect the process of creating presentations, nor the final result.

Installable

Even though it is a web application, it can be used offline or even installed ( see PWAs ).

Creating presentations in MdSlides is declarative in nature. It requires no extra interaction other than writing down one's thoughts.

Processing data is not stored in the application, but in the one's device/browser only.

Open Source

The application development is community-driven. Contributions are welcome on GitHub .

Creating Presentations In Markdown With Marp

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

This tools stood out to me as it has syntax highlighting built in and allows the creation of presentations using markdown. The presentation can also be altered using standard CSS styles.

I've spent many hours fiddling with presentations in Keynote and Google Slides, so I wanted something that would be simple to use and generate the presentation files I needed.

In this article I will look at getting Marp installed, creating a presentation and then generating presentation files.

Project Setup

Getting set up with Marp is pretty easy. Assuming you have npm installed you can initialise a project and get the marp-cli package installed in just two steps. This allows you to create one or more presentations file formats from a markdown file using the command line.

The marp-cli tool includes the marp-core package and the marpit framework, which is what is used to generate the presentations.

You should then create some directories for the input and output of files. I normally create a "dist" directory for the presentation files and a "src" directory for my markdown files. The slides file is kept in src and is called "slides.md".

The normal structure of a Marp project that I use to generate presentations is like this.

The slides markdown file is pretty simple, and consists of a front-matter section, followed by the slides themselves, formatted using standard markdown syntax. Each of the slides is separated by three dashes "---".

Front-matter

The front-matter section is a special area at the top of your slides that you can detail a few items for your presentation as a set of YAML data. This includes things like the theme to use, the option to add pagination, the header and footer to include on every page, and the size of the presentation format.

For example, to use the default format and add pagination to the slides you would add the following.

It's a good idea to add the "marp: true" directive as this helps with previewing the slides, which we'll come onto later.

The theme can be set to one of "default", "gia" or "uncover". Each theme can be given one or more class attributes to change the theme in some way. The following sets the default theme, but also adds an "invert" class to invert the colours on the theme.

Some themes also allow the addition of a "lead" class, which will centre align everything.

It's also possible to inject styles into the header section by the use of a "style" attribute. The section element is the viewport of each slide and so the following will set the background colour to light grey for every slide.

There's lots more information about themes and how to use them in the marp-core theme documentation .

The following is a typical header that I use on my Marp created presentations. This uses a centred and inverted uncover theme, with pagination, and a footer on every page with the site ident.

This template gives me the look and flexibility I need to generate slides quickly.

With the front-matter in place it's now time to look at how to generate slides. Each slide is separated from the previous slide with three slashes (---) on a single line, but after that it's pretty standard markdown.

To create a slide with a single main header element (to introduce a section) you would do something like this. 

Bullet points are creating by adding a single dash to the start of a line. The following will generate a slide with a smaller heading and two bullet points.

To create a sub bullet just indent one of the bullets by two spaces.

Marp has syntax highlighting built in, and so use that system you just surround the code with three back ticks (```). You can also stipulate the type of syntax highlighting required by including the language after the back ticks.

The following slide contains a block of PHP code, which will be rendered using the PHP syntax highlighter.

Images can also be added quite easily to your slides using the image syntax. To add a file called image.png to your slide just add it to the same directory as your markdown file and add the following to your slide.

Note that the file is loaded relative to the presentation, which means you need to point back to where the original file is located. The alternative to this is to put your files somewhere on the internet, where they will always be accessible.

The square brackets can contain meta information about the image. For example, you can use the width attribute to set the image to be a certain width on your slide and keep the aspect ratio of the image intact. In this case we are setting the image to be 900px wide.

There are a lot more meta information available for image, so it's a good idea to read through the Marp image syntax documentation page to see what's available.

Preview Slides In Visual Studio Code

Creating the slides seems quite abstract unless you can actually see the slides you create. The great thing about the Marp project is that it comes with a slide preview tool for VS Code.

This preview tool helps immensely when creating slides as it gives instant feedback on how your slides will turn out. I have found that the preview in VS Code is exactly how the slides will turn out when generated.

To install the extension, open up VS Code and search the extensions for "Marp for VS Code".

With the extension installed you can then open up your slides.md file and click the open preview side by side button to see the preview window.

You should see something like this when writing your slides.

Note! The " marp: true " directive in your front-matter section is vitally important in order to generate the previews correctly. Without this in place your markdown will be formatted as standard markdown and not as a presentation.

Once you are happy with how your slides look it's time to generate the files.

Creating The Presentation Files

With your presentation created the final step is to generate presentation files. Marp is capable of generating HTML, PDF and PPTX files, all based on your original markdown.

The HTML version is a fully featured presentation system, with the ability to break out a speaker notes window with timings and a next slide preview.

To generate a HTML presentation just run the "npx marp" command, passing in the output and input directories. If you have used local images in your presentation then you also need to add the "--allow-local-files" flag.

This will generate a file called "slides.html" in the output directory. The file name is the same name as the original markdown file.

The --allow-local-files flag is used to prevent any files from your local environment being injected into a presentation, which is a security feature. This is important if you are hosting a Marp service, but since we are creating presentations locally we know what the markup contains and where the files are.

If you want more information about why this is a security feature enabled by default see this page on local file security in Marp .

To generate a PDF of the presentation just include the --pdf flag.

And use the --pptx flag to generate a Powerpoint format file.

Note that although the powerpoint format file works, it isn't a normal presentation. Each slide is actually a screenshot of the slide, set as a background image. You can generate the file if that's a requirement of your presentation, but just be warned that you can change anything in the presentation.

We can simplify the use of the output and input directories by injecting some configuration into the package.json file. The "marp" section below informs Marp about the input and output directories and allows local files to be used within the presentation itself.

With this in place we can simplify the command by leaving out the additional flags.

Here are a few sites that might help you get started with Marp.

• The main Marp website.
• Marpit slide deck framework documentation . Essentially guides on how to use the markdown in slides.
• The Marp team page on github . Contains all the code for all the of Marp suite of tools.

I'm really liking Marp. The system can take a little bit of getting used to, but it is a very powerful system that has many options available. The preview tool in VS Code really sells this system as something that I want to use to generate presentations. This is now my go to tool when creating new presentations and the results have been great.

I haven't gone into a great deal of detail with regards to generating the slides in this article, but the basic syntax is very simple (it's just markdown after all). There are also a number of directives available that can change slides, all of which are documented on the Marp documentation site .

If you are interested, I have created a Marp presentation template that I use to easily setup new presentations and generate files in different formats. This is based on a Marp template repository created by Peter Fisher , who originally told me about the Marp project. Thanks Peter!

Add new comment

Related content, lily58 r2g mechanical keyboard.

Last year I was looking through the shop at Mechboards and saw that they had a number of Lily58 R2G (ready to go) kits available. These are kits that have all of the soldering done and are pretty much complete, they just need some switches, keycaps and assembly.

That Time I Dropped The Production Database

I was reminded recently about how a GitLab engineer managed to delete the prod database , and that got me thinking about one of my biggest (production) mistakes.

RoMac Plus FauxMax Macropad Kit From Mechboards

I've been doing some research into mechanical keyboards recently and I've realised that re-built keyboards are not the only keyboards available. You can buy keyboard kits from companies that contain all the needed components for you to put together your dream keyboard.

Eight Rules Of Local Website Development Setup

A development environment is an essential part of any web development project. It allows the website to be run outside of the production environment so that features or bugs can be worked on without disruption to the live website.

Avoiding Customer Frustrations With Website Contact Forms

Having a web presence is essential for all businesses, and if the website contains a contact form then it is essential that it correctly sends contacts to that business. Contact forms are useful as it allows users to easily contact you directly through your website.

Creating Tic Tac Toe In JavaScript Part 2: Adding A Computer Player

After creating tic tac toe in JavaScript in my previous article  I decided to add a second player in the form of a computer opponent.

Chris Ayers

I am a father , nerd , gamer , and speaker .

• Custom Social Profile Link
• Marp - Create Presentations with Markdown

5 minute read

This is part 1 of the MARP series. You can read the series of articles here:

• Unleash Your Creativity with Marp Presentation Customization

Introduction

Marp is a powerful and user-friendly presentation framework that simplifies the process of creating visually appealing slide decks using Markdown. In this blog post, we’ll explore what Marp is, why you might want to use it, how to get started. I’ll share my process and show you how you can automate hosting your presentations on GitHub Pages using GitHub Actions.

What is Marp?

Marp is an open-source presentation framework that allows you to create beautiful, customizable slide decks using the simplicity and flexibility of Markdown. By harnessing the power of Markdown, Marp enables you to focus on your content and message without getting bogged down in complex formatting and design choices. Marp has CLI and VS Code extensions, and it supports exporting presentations to various formats, including HTML, PDF, and PowerPoint.

Why Use Marp?

There are several reasons why you might want to consider using Marp for your presentations:

• Simplicity: Marp allows you to write your presentations in plain text using the intuitive Markdown syntax, which is easy to learn and use.
• Focus on content: With Marp, you can concentrate on your message and content without worrying about complex formatting and design choices.
• Customizable: Marp offers a range of customization options, allowing you to create presentations that align with your personal style and preferences.
• Integration with Visual Studio Code: Marp seamlessly integrates with the popular Visual Studio Code editor, providing real-time previews and a smooth workflow for creating and editing presentations.
• Export options: Marp supports exporting presentations to various formats, including HTML, PDF, and PowerPoint.

Working with Marp

For me, the ideal way to interact and work with Marp is through the Marp for VS Code extension . This extension provides a seamless workflow for creating and editing presentations in Visual Studio Code. It also offers real-time previews, allowing you to see your presentation as you write it.

To get started, install the Marp for VS Code extension and open a new Markdown file. You can then start writing your presentation. A sample presentation is shown below:

Once you’ve added the content to VSCode with Marp, your presentation will look like this:

Official Themes and Resources

Marp comes with a few built-in themes that you can use as a starting point for your custom themes or as inspiration for your own designs. You can also refer to the Marpit documentation for more information on styling Marp presentations. There is good documentation on image sizing and positioning on the Marp site.

GitHub Pages and Marp

I have created a GitHub repository for each of my talks. For each talk, I have a slides folder that contains the Markdown files for the presentation. All images are stored in slides/img . I use GitHub Pages to host the HTML files, which allows me to share the presentation with others. I use a GitHub Actions workflow that automatically builds and publishes the presentation to GitHub Pages whenever I push changes to the slides folder. This workflow is shown below:

Marp Template

I’ve created a marp-slides-template , which provides a minimal template to create a Marp site that can be built and published on GitHub Pages. This template comes with a GitHub Pages / Actions workflow, allowing you to easily build and publish your Marp presentation on GitHub Pages. With this template, you can quickly create and customize your presentation, preview it in Visual Studio Code using the Marp extension, and then share it with the world by publishing it to GitHub Pages. You can use the template by clicking on the link or visiting the repository and clicking on the “Use this template” button.

Marp is a powerful, flexible, and user-friendly presentation framework that simplifies the process of creating visually appealing slide decks. By harnessing the simplicity of Markdown and offering a range of customization options, Marp enables you to focus on your content and message without getting bogged down in complex formatting and design choices. With its seamless integration into Visual Studio Code and various export options, Marp is an excellent choice for anyone looking to streamline their presentation creation process. Check out the official documentation and repositories to get started on creating your next presentation with Marp today.

Some of my Marp Presentations

• Feature Flags
• GitHub Actions Demos
• Secure Terraform on Azure
• Build with Bicep
• Dotnet Configuration in Depth
• Dev Containers

Official Repos and Docs

For more information on Marp and to dive deeper into its features and capabilities, check out the following resources:

CommonMark Markdown syntax: https://commonmark.org/help/

• Marp Official Repository: https://github.com/marp-team/marp
• Marp Official Documentation: https://marpit.marp.app/markdown
• Marp for VS Code Documentation: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

You may also enjoy

Writing Regex with Copilot

3 minute read

I had a real world example today that I wanted to share about copilot helping me with a coding problem. A friend reached out asking if I knew regex. Its been...

Containerizing .NET - Part 2 - Considerations

10 minute read

This is part 2 of the Containerizing .NET series. You can read the series of articles here: Containerizing .NET: Part 1 - A Guide to Containerizing .NE...

Dev Containers - Part 1

8 minute read

This article is part of the Festive Tech Calendar 2023. For more articles in the series by other authors, visit https://festivetechcalendar.com/. Dev ...

Containerizing .NET - Part 1

7 minute read

This article is part of C# Advent 2023. For more articles in the series by other authors, visit https://www.csadvent.christmas/. This is the first in ...

Getting Started

An overview of Markdown, how it works, and what you can do with it.

What is Markdown?

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.

Using Markdown is different than using a WYSIWYG editor. In an application like Microsoft Word, you click buttons to format words and phrases, and the changes are visible immediately. Markdown isn’t like that. When you create a Markdown-formatted file, you add Markdown syntax to the text to indicate which words and phrases should look different.

For example, to denote a heading, you add a number sign before it (e.g., # Heading One ). Or to make a phrase bold, you add two asterisks before and after it (e.g., **this text is bold** ). It may take a while to get used to seeing Markdown syntax in your text, especially if you’re accustomed to WYSIWYG applications. The screenshot below shows a Markdown file displayed in the Visual Studio Code text editor .

You can add Markdown formatting elements to a plaintext file using a text editor application. Or you can use one of the many Markdown applications for macOS, Windows, Linux, iOS, and Android operating systems. There are also several web-based applications specifically designed for writing in Markdown.

Depending on the application you use, you may not be able to preview the formatted document in real time. But that’s okay. According to Gruber , Markdown syntax is designed to be readable and unobtrusive, so the text in Markdown files can be read even if it isn’t rendered.

The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions.

Why Use Markdown?

You might be wondering why people use Markdown instead of a WYSIWYG editor. Why write with Markdown when you can press buttons in an interface to format your text? As it turns out, there are several reasons why people use Markdown instead of WYSIWYG editors.

Markdown can be used for everything. People use it to create websites , documents , notes , books , presentations , email messages , and technical documentation .

Markdown is portable. Files containing Markdown-formatted text can be opened using virtually any application. If you decide you don’t like the Markdown application you’re currently using, you can import your Markdown files into another Markdown application. That’s in stark contrast to word processing applications like Microsoft Word that lock your content into a proprietary file format.

Markdown is platform independent. You can create Markdown-formatted text on any device running any operating system.

Markdown is future proof. Even if the application you’re using stops working at some point in the future, you’ll still be able to read your Markdown-formatted text using a text editing application. This is an important consideration when it comes to books, university theses, and other milestone documents that need to be preserved indefinitely.

Markdown is everywhere. Websites like Reddit and GitHub support Markdown, and lots of desktop and web-based applications support it.

Kicking the Tires

The best way to get started with Markdown is to use it. That’s easier than ever before thanks to a variety of free tools.

You don’t even need to download anything. There are several online Markdown editors that you can use to try writing in Markdown. Dillinger is one of the best online Markdown editors. Just open the site and start typing in the left pane. A preview of the rendered document appears in the right pane.

You’ll probably want to keep the Dillinger website open as you read through this guide. That way you can try the syntax as you learn about it. After you’ve become familiar with Markdown, you may want to use a Markdown application that can be installed on your desktop computer or mobile device.

How Does it Work?

Dillinger makes writing in Markdown easy because it hides the stuff happening behind the scenes, but it’s worth exploring how the process works in general.

When you write in Markdown, the text is stored in a plaintext file that has an .md or .markdown extension. But then what? How is your Markdown-formatted file converted into HTML or a print-ready document?

The short answer is that you need a Markdown application capable of processing the Markdown file. There are lots of applications available — everything from simple scripts to desktop applications that look like Microsoft Word. Despite their visual differences, all of the applications do the same thing. Like Dillinger, they all convert Markdown-formatted text to HTML so it can be displayed in web browsers.

Markdown applications use something called a Markdown processor (also commonly referred to as a “parser” or an “implementation”) to take the Markdown-formatted text and output it to HTML format. At that point, your document can be viewed in a web browser or combined with a style sheet and printed. You can see a visual representation of this process below.

To summarize, this is a four-part process:

• Create a Markdown file using a text editor or a dedicated Markdown application. The file should have an .md or .markdown extension.
• Open the Markdown file in a Markdown application.
• Use the Markdown application to convert the Markdown file to an HTML document.
• View the HTML file in a web browser or use the Markdown application to convert it to another file format, like PDF.

From your perspective, the process will vary somewhat depending on the application you use. For example, Dillinger essentially combines steps 1-3 into a single, seamless interface — all you have to do is type in the left pane and the rendered output magically appears in the right pane. But if you use other tools, like a text editor with a static website generator, you’ll find that the process is much more visible.

What’s Markdown Good For?

Markdown is a fast and easy way to take notes, create content for a website, and produce print-ready documents.

It doesn’t take long to learn the Markdown syntax, and once you know how to use it, you can write using Markdown just about everywhere. Most people use Markdown to create content for the web, but Markdown is good for formatting everything from email messages to grocery lists.

Here are some examples of what you can do with Markdown.

Markdown was designed for the web, so it should come as no surprise that there are plenty of applications specifically designed for creating website content.

If you’re looking for the simplest possible way to create a website with Markdown files, check out blot.im . After you sign up for Blot, it creates a Dropbox folder on your computer. Just drag and drop your Markdown files into the folder and — poof! — they’re on your website. It couldn’t be easier.

If you’re familiar with HTML, CSS, and version control, check out Jekyll , a popular static site generator that takes Markdown files and builds an HTML website. One advantage to this approach is that GitHub Pages provides free hosting for Jekyll-generated websites. If Jekyll isn’t your cup of tea, just pick one of the many other static site generators available .

If you’d like to use a content management system (CMS) to power your website, take a look at Ghost . It’s a free and open-source blogging platform with a nice Markdown editor. If you’re a WordPress user, you’ll be happy to know there’s Markdown support for websites hosted on WordPress.com. Self-hosted WordPress sites can use the Jetpack plugin .

Markdown doesn’t have all the bells and whistles of word processors like Microsoft Word, but it’s good enough for creating basic documents like assignments and letters. You can use a Markdown document authoring application to create and export Markdown-formatted documents to PDF or HTML file format. The PDF part is key, because once you have a PDF document, you can do anything with it — print it, email it, or upload it to a website.

Here are some Markdown document authoring applications I recommend:

• Mac: MacDown , iA Writer , or Marked 2
• iOS / Android: iA Writer
• Windows: ghostwriter or Markdown Monster
• Linux: ReText or ghostwriter
• Web: Dillinger or StackEdit

In nearly every way, Markdown is the ideal syntax for taking notes. Sadly, Evernote and OneNote , two of the most popular note applications, don’t currently support Markdown. The good news is that several other note applications do support Markdown:

• Obsidian is a popular Markdown note-taking application loaded with features.
• Simplenote is a free, barebones note-taking application available for every platform.
• Notable is a note-taking application that runs on a variety of platforms.
• Bear is an Evernote-like application available for Mac and iOS devices. It doesn’t exclusively use Markdown by default, but you can enable Markdown compatibility mode.
• Joplin is a note taking application that respects your privacy. It’s available for every platform.
• Boostnote bills itself as an “open source note-taking app designed for programmers.”

If you can’t part with Evernote, check out Marxico , a subscription-based Markdown editor for Evernote, or use Markdown Here with the Evernote website.

Looking to self-publish a novel? Try Leanpub , a service that takes your Markdown-formatted files and turns them into an electronic book. Leanpub outputs your book in PDF, EPUB, and MOBI file format. If you’d like to create paperback copies of your book, you can upload the PDF file to another service such as Kindle Direct Publishing . To learn more about writing and self-publishing a book using Markdown, read this blog post .

Presentations

Believe it or not, you can generate presentations from Markdown-formatted files. Creating presentations in Markdown takes a little getting used to, but once you get the hang of it, it’s a lot faster and easier than using an application like PowerPoint or Keynote. Remark ( GitHub project ) is a popular browser-based Markdown slideshow tool, as are Cleaver ( GitHub project ) and Marp ( GitHub project ). If you use a Mac and would prefer to use an application, check out Deckset or Hyperdeck .

If you send a lot of email and you’re tired of the formatting controls available on most email provider websites, you’ll be happy to learn there’s an easy way to write email messages using Markdown. Markdown Here is a free and open-source browser extension that converts Markdown-formatted text into HTML that’s ready to send.

Collaboration

Collaboration and team messaging applications are a popular way of communicating with coworkers and friends at work and home. These applications don’t utilize all of Markdown’s features, but the features they do provide are fairly useful. For example, the ability to bold and italicize text without using the WYSIWYG interface is pretty handy. Slack , Discord , Wiki.js , and Mattermost are all good collaboration applications.

Documentation

Markdown is a natural fit for technical documentation. Companies like GitHub are increasingly switching to Markdown for their documentation — check out their blog post about how they migrated their Markdown-formatted documentation to Jekyll . If you write documentation for a product or service, take a look at these handy tools:

• Read the Docs can generate a documentation website from your open source Markdown files. Just connect your GitHub repository to their service and push — Read the Docs does the rest. They also have a service for commercial entities .
• MkDocs is a fast and simple static site generator that’s geared towards building project documentation. Documentation source files are written in Markdown and configured with a single YAML configuration file. MkDocs has several built in themes , including a port of the Read the Docs documentation theme for use with MkDocs. One of the newest themes is MkDocs Material .
• Docusaurus is a static site generator designed exclusively for creating documentation websites. It supports translations, search, and versioning.
• VuePress is a static site generator powered by Vue and optimized for writing technical documentation.
• Jekyll was mentioned earlier in the section on websites, but it’s also a good option for generating a documentation website from Markdown files. If you go this route, be sure to check out the Jekyll documentation theme .

Flavors of Markdown

One of the most confusing aspects of using Markdown is that practically every Markdown application implements a slightly different version of Markdown. These variants of Markdown are commonly referred to as flavors . It’s your job to master whatever flavor of Markdown your application has implemented.

To wrap your head around the concept of Markdown flavors, it might help to think of them as language dialects. People in New York City speak English just like the people in London, but there are substantial differences between the dialects used in both cities. The same is true for people using different Markdown applications. Using Dillinger to write with Markdown is a vastly different experience than using Ulysses .

Practically speaking, this means you never know exactly what a company means when they say they support “Markdown.” Are they talking about only the basic syntax elements , or all of the basic and extended syntax elements combined, or some arbitrary combination of syntax elements? You won’t know until you read the documentation or start using the application.

If you’re just starting out, the best advice I can give you is to pick a Markdown application with good Markdown support. That’ll go a long way towards maintaining the portability of your Markdown files. You might want to store and use your Markdown files in other applications, and to do that you need to start with an application that provides good support. You can use the tool directory to find an application that fits the bill.

Additional Resources

There are lots of resources you can use to learn Markdown. Here are some other introductory resources:

• John Gruber’s Markdown documentation . The original guide written by the creator of Markdown.
• Markdown Tutorial . An open source website that allows you to try Markdown in your web browser.
• Awesome Markdown . A list of Markdown tools and learning resources.
• Typesetting Markdown . A multi-part series that describes an ecosystem for typesetting Markdown documents using pandoc and ConTeXt .

Take your Markdown skills to the next level.

Learn Markdown in 60 pages. Designed for both novices and experts, The Markdown Guide book is a comprehensive reference that has everything you need to get started and master Markdown syntax.

Want to learn more Markdown?

Don't stop now! 🚀 Star the GitHub repository and then enter your email address below to receive new Markdown tutorials via email. No spam!

It's possible and often times more convenient to write presentation content using Markdown. To create a Markdown slide, add the data-markdown attribute to your <section> element and wrap the contents in a <textarea data-template> like the example below.

Note that this is sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).

Markdown Plugin

This functionality is powered by the built-in Markdown plugin which in turn uses marked for all parsing. The Markdown plugin is included in our default presentation examples. If you want to manually add it to a new presentation here's how:

External Markdown

You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the data-separator attribute defines a regular expression for horizontal slides (defaults to ^\r?\n---\r?\n$ , a newline-bounded horizontal rule) and data-separator-vertical defines vertical slides (disabled by default). The data-separator-notes attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to notes?: , so it will match both "note:" and "notes:"). The data-charset attribute is optional and specifies which charset to use when loading the external file.

When used locally, this feature requires that reveal.js runs from a local web server . The following example customizes all available options:

Element Attributes

Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, among other things.

Slide Attributes

Special syntax (through HTML comments) is available for adding attributes to the slide <section> elements generated by your Markdown.

Syntax Highlighting

Powerful syntax highlighting features are built into reveal.js. Using the bracket syntax shown below, you can highlight individual lines and even walk through multiple separate highlights step-by-step. Learn more about line highlights .

Line Number Offset

You can add a line number offset by adding a number and a colon at the beginning of your highlights.

Configuring marked

We use marked to parse Markdown. To customize marked's rendering, you can pass in options when configuring Reveal :

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

♠️ React MDX-based presentation decks

jxnblk/mdx-deck

Folders and files, repository files navigation.

Award-winning React MDX -based presentation decks

• 📝 Write presentations in markdown
• ⚛️ Import and use React components
• 💅 Customizable themes and components
• 0️⃣ Zero-config CLI
• 💁‍♀️ Presenter mode
• 📓 Speaker notes

Getting Started

Presenter mode, keyboard shortcuts, cli options, videos & articles.

Create an MDX file and separate each slide with --- .

Add a run script to your package.json with the MDX Deck CLI pointing to the .mdx file to start the development server:

Start the development server:

Use the left and right arrow keys to navigate through the presentation.

MDX uses Markdown syntax and can render React components inline with JSX.

To import components, use ES import syntax separated with empty lines between any markdown or JSX syntax.

Read more about MDX syntax in the MDX Docs .

MDX Deck uses Theme UI and Emotion for styling, making practically any part of the presentation themeable. It also includes several built-in themes to change the look and feel of the presentation.

• See the list of available Themes
• Read more about theming in the Theming docs .

MDX Deck includes built-in components to help with creating presentations, a Notes component for adding speaker notes, a Head component for the document head, Header and Footer components for persistent header and footer content, and a Steps component for adding multiple intermediate steps in a single slide.

Read more in the Components docs.

Third-Party Components

These optional libraries are intended for use with MDX Deck.

• CodeSurfer : React component for scrolling, zooming and highlighting code.
• mdx-code : Runnable code playgrounds for MDX Deck.
• mdx-deck-live-code : Live React and JS coding in slides.

Note: please check with version compatibility when using these libraries.

Each slide can include a custom layout around its content, which can be used as a template for visually differentiating slides.

The layout component will wrap the MDX elements within that slide, which means you can add custom layout styles or style child elements with CSS-in-JS.

Press Option + P to toggle Presenter Mode , which will show a preview of the next slide, a timer, and speaker notes.

The presentation can be opened in two separate windows at the same time, and it will stay in sync with the other window.

• Egghead Tutorial by Andrew Del Prete .
• mdx-deck: slide decks powered by markdown and react by Kent C. Dodds
• Make Fast & Beautiful Presentations with MDX-Deck by Harry Wolff ( Demo )
• What is MDX by Kent C. Dodds
• Build a Custom Provider Component for MDX-Deck by Kyle Shevlin

See how others have used MDX Deck for their presentations.

• Design Systems & React by Diana Mounter
• Bringing Brazil to the Cloud, Now by Guillermo Rauch
• Simplify React by Kent C. Dodds
• I Got 99 Problems but GraphQL Ain't One by Sara Vieira
• Stop de #divFest by Sara Vieira
• MDX, authors and richer JAMstack content by Josh Dzielak
• Components as Data: A Cross Platform GraphQL Powered Component API by Luke Herrington
• A short history of webdevs future 🔮 by Hendrik Wallbaum

Usage Examples

The following examples will open in CodeSandbox.

• Basic Example
• Syntax Highlighting
• Header & Footer

MIT License

Used by 3.2k

Contributors 69

• JavaScript 100.0%

R Markdown: The Definitive Guide

4.4 powerpoint presentation.

To create a PowerPoint presentation from R Markdown, you specify the powerpoint_presentation output format in the YAML metadata of your document. Please note that this output format is only available in rmarkdown >= v1.9, and requires at least Pandoc v2.0.5. You can check the versions of your rmarkdown package and Pandoc with packageVersion('rmarkdown') and rmarkdown::pandoc_version() in R, respectively. The RStudio version 1.1.x ships Pandoc 1.19.2.1, which is not sufficient to generate PowerPoint presentations. You need to either install Pandoc 2.x by yourself if you use RStudio 1.1.x, or install a preview version of RStudio (>= 1.2.633), which has bundled Pandoc 2.x.

Below is a quick example (see Figure 4.5 for a sample slide):

FIGURE 4.5: A sample slide in a PowerPoint presentation.

The default slide level (i.e., the heading level that defines individual slides) is determined in the same way as in Beamer slides (Section 4.3.2 ), and you can specify an explicit level via the slide_level option under powerpoint_presentation . You can also start a new slide without a header using a horizontal rule --- .

You can generate most elements supported by Pandoc’s Markdown (Section 2.5 ) in PowerPoint output, such as bold/italic text, footnotes, bullets, LaTeX math expressions, images, and tables, etc.

Please note that images and tables will always be placed on new slides. The only elements that can coexist with an image or table on a slide are the slide header and image/table caption. When you have a text paragraph and an image on the same slide, the image will be moved to a new slide automatically. Images will be scaled automatically to fit the slide, and if the automatic size does not work well, you may manually control the image sizes: for static images included via the Markdown syntax ![]() , you may use the width and/or height attributes in a pair of curly braces after the image, e.g., {width=40%} ; for images generated dynamically from R code chunks, you can use the chunk options fig.width and fig.height to control the sizes.

Please read the section “Producing slide shows with Pandoc” in Pandoc’s manual for more information on slide shows, such as the multi-column layout:

4.4.1 Custom templates

Like Word documents (Section 3.4 ), you can customize the appearance of PowerPoint presentations by passing a custom reference document via the reference_doc option, e.g.,

Note that the reference_doc option requires a version of rmarkdown higher than 1.9:

Basically any template included in a recent version of Microsoft PowerPoint should work. You can create a new *.pptx file from the PowerPoint menu File -> New with your desired template, save the new file, and use it as the reference document (template) through the reference_doc option. Pandoc will read the styles in the template and apply them to the PowerPoint presentation to be created from R Markdown.

4.4.2 Other features

Refer to Section 3.1 for the documentation of other features of PowerPoint presentations, including table of contents (Section 3.1.1 ), figure options (Section 3.1.5 ), data frame printing (Section 3.1.6 ), keeping Markdown (Section 3.1.10.1 ), Markdown extensions (Section 3.1.10.4 ), Pandoc arguments (Section 3.1.10.5 ), shared options (Section 3.1.11 ), and incremental slides since Pandoc 2.15 (Section 4.1.2 .

Rick Strahl's Weblog  

Mime Base64 is a Thing?

In all my years of developing software, sending binary data back and forth I've never heard of Mime Base64. Apparently that is a thing for email encoding of binary data for some legacy applications that don't directly accept binary content.

This came up recently when working with a customer that is using MailGun's API. We were sending original data from a front end application to the server and found ourselves stymied when trying to attach files that were encoded in plain Base64 and results coming back as 400 - Bad Request .

MIME Base64

MIME Base64 is based on the Base64 encoding but with specific rules for email communication. It ensures that the encoded data is safe for use in email headers and bodies.

Essentially this boils down to a slightly modified format that is safe for Mime and URL encoding so it can be used on URLs and form encoded body content in HTTP and email bodies for example.

The rules are pretty simple as applied to base Base64 content:

• Trims any ending =
• + is converted to -
• / is converted to _

The latter two work because the characters converted to are not present in base64 content. + and / are and they are URL 'unsafe' characters that can be misinterpreted by URL or MIME Encoding parsers. MIME Base64 basically replaces the unsafe characters with safe characters. As such it's essentially a transport format that's converted to and converted back before actual use in most cases. Additionally the format strips off the trailing = padding characters that are used to fill base64 content to exact 3 boundary chunks.

Converting MIME Base64

To work around this is simple enough with a wrapper class around the Convert class base64 functionality native in the .NET base library.

The following class converts standard base64 to Mime base64 and back:

Here's how you can use (LINQPad code):

WebEncoders in ASP.NET Libraries

@Andrew in the comments mentioned that there's some work happening related to Base64 encoding to provide a dedicated Base64 encoding class that can handle many common operations - inculding URL encoded Base64 encoding. There's some more information in this GitHub Issue .

One of the comments in that thread also points at the existing WebEncoder class in the ASP.NET Core libraries which mimic the EncodeFromBytes() and `DecodeToBytes()`` methods above:

As of .NET 8 these helpers are available in an installable NuGet package that can be used outside of ASP.NET:

Who knew there was so much attention to this? Not me 😄

Nothing new here, but it's something that I missed, and I'm making a note for myself with this post so I may find it again in the future...

Other Posts you might also like

• Adding minimal OWIN Identity Authentication to an Existing ASP.NET MVC Application
• Building a better .NET Application Configuration Class - revisited
• Keeping Content Out of the Publish Folder for WebDeploy
• Map Physical Paths with an HttpContext.MapPath() Extension Method in ASP.NET

The Voices of Reason

# re: Mime Base64 is a Thing?

It would seem .NET is set to receive first class support for Base64 URL encode / decode.

https://github.com/dotnet/runtime/issues/1658

https://github.com/dotnet/runtime/pull/102364

@Andrew - thanks for these links. I had no idea - looks like WebEncoders.Base64UrlEncode(bytes) (and decode) provide this very functionality I describe in this post.

Updated the post with more info. Thanks!