presentation with markdown

.

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

Creating and publishing presentations using Markdown

I know people that just hate markdown. They hate the fact that they can not see bold or underlined text while editing. That you have to enclose text in batiks or asterisks to change how it’s displayed. Or that headlines and regular text have the same size.

I am not one of those people… I loooove Markdown.

As a text driven guy that does everything in the keyboard, that uses NeoVim and Zsh on a regular basis, and that hates to touch the mouse or trackpad, I have to say that there is nothing better than writing documentation or articles in Markdown.

Let me give you some additional reasons:

• Markdown can be converted to almost everything: HTML, PDF, Latex, etc. And all of this with open source tools.
• Markdown documents are pretty readable by themselves. They are just text with some simple decoration symbols . Try doing that on an HTML or LateX file.
• You can write Markdown in literally any editor. No need of MS Word or Mac Pages. Or any other kind of tool for that matter.
• Markdown is Version Control friendly. You can keep versions of your documents using Git, SVN, CVS, etc. After all, its just text.

That’s why I use Markdown for almost everything, including this blog. Is written in Markdown and converted to HTML with JavaScript using Gatsby

So I wanted to implement the same workflow, but for presentations. I wanted to create Slides using markdown, and then converted them to PDF or HTML.

But it turns out that there is more than one way to do it. Here I’ll show a few.

So how do you create Slides with Markdown?

Before we get into the actual tools to convert Markdown to PDF, or HTML, lets first talk on how to create a Markdown presentation. In other words, how to create slides.

If you already know Markdown, you only have to take into account 3 things when creating Markdown slides documents:

• You only need one markdown file for all your slides
• You separate slides by using --- (3 dashes) between the content of each slide. And this can be configured on some conversion tools
• The first Heading 1 or # is the title of the slide

So this could be a 3 slide markdown presentation:

And that’s it, that’s a 3 slide presentation!

If you open the previous markdown with Marp (which I’ll will explain further down) this is what You’ll get:

The BIG caveat on creating slides with Markdown is that it depends on the tools you are using to covert markdown to PDF/HTML/ODF . Fortunately, most of the tools follow the previous 3 principles.

Front matter

The previous “presentation” consisted of only 3 slides. Easy right? But what if you want to add Meta information to your final PDF or HTML file? Information like:

• The Creation Date
• The Title that gets displayed in the browser tab when the markdown gets converted to HTML for instance

Also, what about styling:

• Set a background color
• Apply a theme
• Override some of the styling

That’s what the Front Matter of the presentation is used for.

This is a presentation of one slide, but with Front Matter :

As you can see, the Front Matter is a small section with keys and values that can be almost anything. But as as suggestion you should provide a Front Matter with at lest:

• A Title of the presentation with the key title
• The Authors name with the key author
• The Creation Date with date

Note : Some tools will break if you use unsupported Front Matter options. An example of this is the tool lookatme which doesn’t support the theme key.

How the Front Matter affects the final presentation and which keys are valid changes from tool to tool , so I’ll try to specify which items can be in the front matter but it’s up to you to find out the complete list of items that can be placed in the front matter depending on the tools you end up selecting.

You can read more about the Front Matter here

Creating a test presentation

OK, enough of theory. Les’s create a Markdown Presentation and convert it to HTML and PDF with different tools. Our first step will be creating a Git repo and initialize it with npm :

The reason why I’m using npm  is to create the package.json  file which I’ll use to automate some of the steps and have some sort of a Makefile where I can save all the commands I’ll be using to convert the presentation to HTML or PDF. Also, because even though all the tools can be installed globally, I prefer to install them locally.

Next, add the following contents to the slides.md file:

What is left to do is to install and configure the tool we’ll use to convert and/or lint our presentation.

Linting your markdown with Markdownlint

I’m an absolute nerd for code quality. That’s why I use tools like eslint , prettier , phpcs and of course markdownlint .

If you are like me, then I recommend you install markdownlint-cli to lint your presentation:

And then create the file .markdownlint.json with the following contents:

This will allow you to fix format issues in your markdown file ignoring 3 rules:

• Do not complain about lines longer than 80 characters. This one is for me since I tend to write long lines in my slides and I don’t like to break them
• Do not complain about having more than one H1 heading. Very important since each slide will start with an H1
• Do not change the * to - in bulleted lists. This is very specific to Marp.

Now you can use the command npx markdownlint --fix slides.md to fix any linting issues.

And better yet if you add the following new scripts in package.json (see, already useful):

Now you can lint and format your files with:

With linting in place, we’re ready for our first conversion tool.

First tool: Marp

By far, the easies way to convert Markdown presentations to HTML is using Marp . And the reason is because it can be used as a cli tool , but also you can use it inside Visual Studio Code with an extension

As I said I’m a CLI guy, so I’m going to focus on the marp-cli tool. That’s why I’m going to install it in the current project with:

And here is the cool part. You can start your presentation using:

The PORT  variable is not necessary. If you omit it it will use the port 8080 . But since us developers use the 8080 port so often, and that’s Marp’s default port, I thought it was best to mention it right from the get go.

And if you click on slides.md you will see your presentation right on the browser:

A useful tip is to add the previous command as a script in your package.json file:

And run the presentation with

If you want to publish your presentation somewhere, then you can execute npx marp slides.md and you’ll get a slides.html file on the root directory of your project.

Marp’s Front Matter

Marp supports a lot of configuration directives in the Front Matter. But that could make your file to be incompatible with other tools. That’s why I recommend the creation of a .marprc.yml file with the Front Matter directives:

Note: At the time of this writing, April 10 2023, the .marprc.yml does not support all the configuration options

This would make your presentation look like this:

One very cool thing about Marp is that it bundles themes that can be configured using CSS.

To enable a theme you could add key theme in the Front Matter . And then, before the first slide (the first Title) add a CSS code like so:

Note that this can make the markdown not compatible with other tools.

You can read more about the Theme directive here

Backgrounds

It’s very common that you want a slide to have a different background or add an image as a background. This can be done by using a local directive .

Again, this is not compatible with other tools, but very cool to use:

Marp Resources

There aren’t may Marp resources outside the official documentation . But it’s worth mentioning this great presentation about Marp created by it’s author. It explain some advanced concepts about the tool.

Second tool: Lookatme

The second tool is my absolute favorite because is 100% terminal based.

With lookatme you can present directly in the terminal. Which in my opinion is very, very… Very VERY cool.

Lookatme is written in Python and you need to have pip  version 3 installed in your system. If you meet this requirement, you only have to execute pip install  to install it:

There is an option to run lookatme  using Docker. But that’s beyond the scope of this article.

And you start a presentation with:

One big drawback with lookatme is that you can NOT add non standard Front Matter keys . If you do you’ll get an exception since lookatme   does not ignore incompatibilities .

Lookatme options

Lookatme doesn’t have that many options since it works in the terminal. So instead of customizing the presentation using the Front Matter , I recommend using the CLI options . This makes your slides less error prone:

The one you’ll use more often is --style which will change the color scheme for your code:

For more options and documentation you can got the official documentation

And as we’ve done before, you can add the command to package.json :

Third Tool: Reveal-md

If you want to go for broke, then Reveal.js is the tool for you!

Now, Reveal.js is actually a very complicated tool to use. So complicated that it’s author sells a 5 hour course on how to create presentations with the tool. If you’ve used Slides.com then you have an idea of what Reveal.js can do since that’s the engine behind the site.

The “drawback”, is that to create presentations you have to create a React application. This means that you have to create HTML and JavaScript to have a simple presentation. And as you’ve noticed, we want to use Markdown, not HTML. Still, if you want to go that route, you can follow the documentation on how to install and create a presentation using just Reveal.js.

Thankfully Lars Kappert created reveal-md which, in his own words, is reveal.js  on steroids . But most importantly, it supports displaying presentations created in Markdown!

Since reveal-md is an npm package, you can install it with:

And to start the presentation you can use good ‘ol npx :

Notice that reveal-md  uses port 1948  by default, so keep that in mind when you are starting your presentation. Or better yet, use the --port parameter to change it for something more friendly.

As most of the tools we’ve seen, you can modify the style and several Front Matter options with cli parameters:

Here the --watch  flag will reload the presentation when the slides.md   file is changed.

Reveal-md is really powerful when it comes to theming, not only you can change the slide theme, but the code highlight theme. Just pass the --theme  flag pointing to a local or an online css  stylesheet and you are good to go.

You can see a list of presentation themes here . And a list of highlight themes here

Advanced styling

But what is really powerful is when you integrate the reveal.js slide attributes to add things like background images:

Or assign a custom class or id attributes

Reveal-md Override CSS

With Themes you can create or use a complete look for your presentation, but if you only want to change a couple of things from your presentation, then you can use a separate CSS file with just then thing you want to change.

And if you add to this the fact that you Reveal use CSS variables to customize parts of the presentation like the background color, you have a pretty powerful and flexible way to make the presentations your own.

Take for instance this CSS file:

If you execute reveal-md with the --css parameter, you can change the background color:

The css variables can change from theme to theme, so just open the Chrome Tools and look for what you can change.

Reveal-md options

In a similar fashion as Marp , you can configure your presentation by using a JSON file called reveal-md.json and place it in the root of your project. Here you can add all of the reveal.js  options

This way, you just need to execute npx reveal-md slides.md and reveal will pick up all of your changes

In case you want to understand the power of reveal-md, take a look at this presentatio

All the code used in this blog post, can be accessed in this GitHub repo.

DEV Community

Posted on Mar 12 • Originally published at blog.teamnexus.in

Marp: A Markdown Presentation App That Simplifies Your Tech Talks

In today's fast-paced tech world, giving effective presentations is crucial for conveying complex ideas and engaging audiences. While Markdown has emerged as a popular lightweight markup language for creating rich text documents, its use in creating dynamic, interactive, and visually appealing presentations can be challenging. This is where Marp comes into the picture - an open-source Markdown presentation app that simplifies the process of creating engaging tech talks. In our earlier post , we saw about how Asciidoctor can be used to create stunning presentations, and in this article it is markdown

What is Marp?

Marp (Markdown Presentation Engine) is a lightweight and flexible tool for creating interactive and visually appealing presentations using simple Markdown syntax. It was created based on the idea of combining the benefits of Markdown and Reveal.js, a popular HTML presentation framework. Marp supports the creation of presentations that can be rendered as static HTML, PDF, or PowerPoint

• Simple Markdown syntax: Marp uses a straightforward Markdown format for creating slides, making it easy for developers and writers who are already familiar with Markdown.
• Interactive presentations: Marp supports the use of JavaScript and HTML to create interactive elements, such as quizzes, forms, and animations, to enhance user engagement.
• Live preview: Marp provides a live preview mode while editing, allowing you to see the changes in real-time and fine-tune your slides without leaving the editor.
• Directives and extended syntax: Marp supports a variety of directives and extended syntax (image syntax, math typesetting, auto-scaling, etc...) to create beautiful slides, as sometimes, simple text content isn't enough to emphasize or represent the content - mathematical equations for example.
• Export to various formats: Marp supports exporting presentations in multiple formats such as HTML, PDF, and SVG, allowing you to share your content with a broader audience.
• Customizable themes: Marp offers several built-in themes to choose from or the option to create custom themes, enabling you to design presentations that align with your brand and style.
• Official Toolset: Marp provides an official toolset that has the Visual Studio Code extension and Marp CLI for command line usage.
• Pluggable Architecture: Marp ecosystem is based on the Marpit framework for creating HTML slides deck and has a pluggable architecture where the features can be extended by developers via plugins

Getting Started

The recommended and the best option is to use the Visual Studio Code extension that is provided. The Marp CLI , the command line version, can also be used. However, one has to compile it to the required output everytime.

Marp is an ideal solution for developers, designers, educators, and anyone who needs to create engaging technical or informational presentations. Some common use cases include:

• Software demos: Marp can be used to create presentations that showcase the features of a software product or application, with interactive elements that allow users to interact and explore the functionality.
• Educational materials: Marp is an excellent tool for creating engaging educational materials such as tutorials, workshop guides, or study resources, with the ability to add code snippets, diagrams, and other multimedia content.
• Technical talks: Marp simplifies the process of creating technical talks and workshops by offering a lightweight and flexible presentation engine that can handle complex content, interactive elements, and customizable styles.
• Data visualizations: Marp supports integrations with libraries like D3.js and Plotly, making it an ideal choice for data scientists and researchers who need to present complex data visualizations in an engaging and accessible format.

Marp offers a simple yet powerful solution for creating interactive and visually appealing technical presentations using Markdown syntax. With its live preview mode, customizable themes, and support for various export formats, it provides developers, educators, and presenters with an essential tool for engaging audiences and conveying complex ideas effectively. So, next time you need to create a presentation, consider giving Marp a try!

Top comments (2)

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

• Location Wrocław, Poland
• Pronouns he/him
• Work Elixir and ReScript developer @ Walnut
• Joined Mar 30, 2018

Marp is pretty good, but I personally prefer sli.dev/

• Location Coimbatore, Tamil Nadu, India
• Pronouns He/Him
• Work Software Consultant
• Joined Jul 7, 2020

Interesting, thanks for the link. Will explore

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

Why Choose TrainwithShubham Batch 8 Over Udemy or Coursera Courses?

Kanavsingh - Oct 3

Fast-Forward merge VS Three-Way Recursive merge

Abdullah Al Mamun Fahim - Sep 27

Hacktoberfest 2024 is here! 🎃

Domenico Tenace - Sep 26

Building Custom Trees in Umbraco 14 using menus!

Yari Mariën - Sep 25

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 .

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.

Instantly share code, notes, and snippets.

johnloy / markdown-for-slide-decks.md

• Download ZIP
• Star ( 723 ) 723 You must be signed in to star a gist
• Fork ( 67 ) 67 You must be signed in to fork a gist
• Embed Embed this gist in your website.
• Share Copy sharable link for this gist.
• Clone via HTTPS Clone using the web URL.
• Learn more about clone URLs
• Save johnloy/27dd124ad40e210e91c70dd1c24ac8c8 to your computer and use it in GitHub Desktop.

Electron apps

Marp: Markdown presentation ecosystem.

muryoimpl/slippr: markdown presentation app by Electron

joe-re/cafe-pitch Markdown-driven presentation tool built on Electron.

Slide deck frameworks supporting Markdown source

hakimel/reveal.js: The HTML Presentation Framework

jxnblk/mdx-deck: React MDX-based presentation decks

gnab/remark: A simple, in-browser, markdown-driven slideshow tool.

FormidableLabs/spectacle: ReactJS based Presentation Library

deckjs/deck: Deck is a markdown driven content presentation system

Hosted services

Slides.com: Online UI for creating RevealJS decks (no markdown support yet, but maybe someday )

Platon.io: Simple markdown presentations, right in the browser, using remarkjs

Swipe: Create Interactive Online Presentations On Any Device

HackMD: The best way to share knowledge in markdown

Presenta: Make slides fast!

Slidium: Beautiful and Easy Markdown Presentation - Neomobili

Deckset: Presentations from Markdown in No Time

Quiver: Developer notebook, with a presentation mode

Slideas: Slideas is the easiest way to create a beautiful Markdown Presentation, with all the features you need.

Obsidian: Obsidian is a powerful knowledge base that works on top of a local folder of plain text Markdown files.

CLI markdown ⇒ slides conversion tools

Fusuma: A tool to create slides easily for you

present: A terminal-based presentation tool with colors and effects.

backslide: CLI tool for making HTML presentations with Remark.js using Markdown

patat: (Presentations Atop The ANSI Terminal) is a small tool that allows you to show presentations using only an ANSI terminal. It does not require ncurses

markdown-slides: Using markdown, write simple but beautiful presentations with math, animations and media, which can be visualized in a web browser even without an internet connection, or exported to PDF.

S9: Write Your Slides in Plain Text w/ Markdown Formatting Conventions - Free Web Alternative to PowerPoint and Keynote

Cleaver: 30-second Slideshows for Hackers

thrgamon commented Nov 8, 2020

Obsidian also does this, which is rad: https://obsidian.md/

Sorry, something went wrong.

sabitm commented Dec 11, 2020

here's my favorite presenta

epogrebnyak commented Dec 27, 2020

https://github.com/jaspervdj/patat

geraldb commented Dec 27, 2020 • edited Loading

Slideshow (S9) is another one (disclaimer: from my humble self), see http://slideshow-s9.github.io/ . If I dare to say it's the only one that lets you use / chose template packs (e.g. s6, bespoke.js, shower.js, impress.js, reveal.js, and so on), see http://slideshow-templates.github.io/ and you can design your own template packs (they are actually just GitHub Pages / Jekyll / Liquid templates) and, thus, work by definition "out-of-the-box" on GitHub with GitHub Pages, for example. Free and open source (public domain, actually).

dadoomer commented Jan 10, 2021

Markdown-slides is yet another one (sorry for the self-promotion).

Output to PDF or HTML.

Beautiful output, because it just inserts your stuff into Reveal.js.

Does not need Internet connection.

PhilipMottershead commented Feb 7, 2021

GitPitch is shutting down

"GitPitch is shutting down on March 1, 2021. The trial software is no longer available for download."

fego commented May 12, 2021

Found this one today : https://sli.dev/

danielvelara commented Jun 10, 2021

Markdown Preview Enhanced it's a VSCode extension with a lot of Markdown features, and it comes with a Presentation mode https://shd101wyy.github.io/markdown-preview-enhanced/#/presentation

juanbrujo commented Jun 12, 2021

I've been using Cleaver for years https://github.com/jdan/cleaver

michalradacz commented Jun 22, 2021

Hmmm, Slideas dies? No web, no activity ...

debMan commented Jul 26, 2021

For CLI: https://github.com/maaslalani/slides

acacha commented Oct 22, 2021

Awesome just what I'm looking for!

norman-abramovitz commented Dec 23, 2021

There is a template to make reveal.js work work with mkdocs as well.

https://github.com/dhondta/mkdocs-revealjs-template

alenwesker commented Feb 18, 2022

I've tried some of the above, recommend adding https://github.com/ksky521/nodeppt to the list. It's currently my favorite markdown-to-ppt tool. It supports so many features that at least the {.build.moveIn} and the speaker mode are vital to a slide show.

Recommend everybody try that.

gilcot commented Mar 6, 2022 • edited Loading

Other intersting tools to note:

• https://github.com/googleworkspace/md2googleslides
• https://github.com/astefanutti/decktape
• https://github.com/maaslalani/slides
• https://pkg.go.dev/golang.org/x/tools/present
• https://gitpitch.github.io/gitpitch/#/
• https://github.com/ionelmc/python-darkslide
• https://github.com/anthonywritescode/markdown-to-presentation

kzhk75 commented Mar 8, 2022

• https://github.com/slidevjs/slidev

N0K0 commented Mar 16, 2022

ollej commented Oct 19, 2022

May I recommend the tool Rusty Slider, available as a native application for Windows/Mac/Linux as well as on the web. https://ollej.github.io/rusty-slider/

anonymouscoolguy commented Oct 28, 2022

I have been working on a little side project: https://mdslides.app/

It is built using Reveal.js and Ace , and is a simple markdown presentation tool right in the browser.

EmaSuriano commented Nov 8, 2022

Shout out to this one! Very nice DX, good documentation and fully customizable 👏

easyjobber commented Nov 12, 2022 • edited Loading

Thanks for this presentation and you are truly an inspiration 👏 https://gist.github.com/easyjobber

haakonstorm commented Dec 8, 2022

Slideas unfortunately appear defunct now. :/

rukshn commented Jul 22, 2023

Platon does not seem to be working anymore

kitschpatrol commented Aug 5, 2023

iA Presenter has an opinionated take on the markdown → slides workflow.

It recently hit 1.0. Note that it's Mac only, commercial, and apparently not (yet) scriptable from the CLI.

soaple commented Oct 7, 2023

MarkSlides is a tool that allows you to create slides using Markdown. It is created based on Marp, so any Marp syntax can be rendered to the slide. In addition, it also supports Generating Slides using AI like ChatGPT.

makp commented May 26, 2024

lookatme seems to be an interesting terminal-based markdown presentation tool.

ak-git commented Jun 24, 2024

rhult commented Jul 19, 2024

Native macOS app: https://showdown.tinybird.se

jerryjappinen commented Aug 11, 2024

Created this for the live notebook platform Observable: https://observablehq.com/@jerryjappinen/slides

MartenBE commented Sep 30, 2024 • edited Loading

MkDocs but for slides based on Reveal.js: https://pypi.org/project/mkslides/

Markdown to Slides with Marp for VS Code - A Comprehensive Tutorial

As a developer, presenting ideas to your group, team members, or managers is a common occurrence. Using tools like Google Slides or PowerPoint can be inconvenient for developers as they require adding code, diagrams, flowcharts, and other technical elements. A developer-friendly approach is to write your presentation in Markdown and then convert it to slides, PDF, or another convenient format. In this article, we’ll guide you through a step-by-step process to easily convert your Markdown document to a slideshow. Let’s get started!

What is Marp VS Code extension?

Marp for VS Code is an extension for the Visual Studio Code (VS Code) editor that allows you to create and present slide decks using Markdown. It is based on the Marp presentation tool , which uses the same Markdown syntax as other Marp tools, but integrates directly into the VS Code editor for a seamless and intuitive experience.

With the Marp for VS Code extension, you can create professional-looking slide decks using Markdown syntax, including headings, lists, images, and other formatting elements. You can also add slide-specific features such as slide backgrounds, slide transitions, and speaker notes. The Marp for VS Code extension also includes several slide templates that you can use to quickly create a professional-looking presentation.

Installing Marp for VS Code

Installing Marp for VS Code is a simple process.

• Click on the Extensions icon on the left-hand side of the VS Code window.
• Search for Marp using the search box, and look for Marp for VS Code in the search results
• Click on the Install button .

Wait for the installation to complete. You may be prompted to reload VS Code after the installation is complete.

Basic Presentation

Now let’s create basic presentation slide with marp. Create a new markdown file called slides.md .

Now if you preview the file, you should see something like this:

Formatting a Presentation

Let’s format our slides.

If you want to add the page number in the slides, then you just simply paginate: true .

Background Color

If you want to set the background color, use backgroundColor .

It will set the orange background color for all slides.

Now, if you want to set background color for a particular slide, then you can set background color to each slide. For example:

You can set the font color with _color property.

Including image is one of the important feature in the slides. To add image, simple use  .

Resizing image

Even you can use some css filters .

Background Image

Split Background You can split background image by bg + left / right keywords.

Advanced Features

Although there are some limitations in VS code extension, but still you can do some advanced level formatting.

Let’s add header:

As a developer, surely we add code or pseudocode in the presentation. It would be as easily as like markdown.

You may be wondering as this stage, it would be great if you can able to include mermaid in marp.

Unfortunately by default mermaid is not supporting in marp vs code. So you need to enable it by adding following code in the settings.json file in your vs code. Check details in this tutorial .

This will allow you to write html directives directly.

It will show your output like this:

Cool, right?

Now, let’s export our presentation. You can export in pdf, html, power point, jpg and png format.

:warning: FYI, some of the markdown does not support in all export format.

• Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
• Type Marp: Export and select Marp: Export Slide Deck from the list of options.
• In the next prompt, select the output format you want to use. You can choose from HTML , PDF , PNG , and Power Point , and JPG format.
• Specify any additional options, such as the destination folder or file name, if prompted.
• Wait for the export process to complete. Depending on the format you choose and the size of your presentation, this may take some time.

So the recap:

Simplicity : Marp for VS Code uses Markdown syntax, which is simple and easy to learn, allowing you to focus on the content of your presentation rather than the technicalities of presentation software.

Flexibility : Markdown can be used to create a wide range of content, from simple bullet point slides to complex diagrams and charts. This flexibility makes Marp for VS Code a great choice for anyone who needs to create presentations that go beyond basic text and images.

Integration : Marp for VS Code integrates directly into the VS Code editor, which means you can create, edit, and present your slides in one place. This saves time and streamlines the presentation creation process.

Customization : Marp for VS Code provides a range of customization options, including slide templates, custom CSS, and slide-specific features such as speaker notes and slide transitions. This allows you to create presentations that are tailored to your specific needs and requirements.

Portability : Since Marp for VS Code uses Markdown, your presentations can be easily exported to other formats, such as PDF, HTML, and PNG. This makes it easy to share your presentations with others or to present them on other platforms.

In summary, Marp for VS Code is a powerful tool that allows you to create professional-looking presentations using Markdown syntax. It is simple to learn, flexible, customizable, and highly portable, making it a great choice for anyone who needs to create engaging and informative presentations quickly and easily.

Further Reference:

If you are still curious to know more about marp, try to follow:

• https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
• https://marpit.marp.app/
• https://github.com/marp-team/marp-vscode

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.

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.

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.

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.

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.

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.

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

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 sub bullet just indent one of the bullets by two spaces.

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.

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

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

You should see something like this when writing your slides.

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

Creating The Presentation Files

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.

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.

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

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, brennan helix cd player and ripper: a review, lily58 r2g mechanical keyboard, 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

Eight rules of local website development setup, 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.

Unsupported browser

This site was designed for modern browsers and tested with Internet Explorer version 10 and later.

It may not look or work correctly on your browser.

• Computer Skills

How to Create a Slideshow Presentation From Markdown Notes

Markdown text formatting has revolutionized note taking. It gives a way to format without cluttering up what is being written. Now comes the moment you need to make a presentation based on your notes. You need an effective and easy way to create your presentation from your notes. In this tutorial, I’ll show you how to create a HTML slide show from markdown notes.

Markdown to HTML

A rendering program is a program that takes the markdown and translates it to another format. The best renderer I have used is kramdown . Kramdown is a Ruby program that takes text in one format and translates it in to another. It defaults to markdown to HTML .

Since Ruby is pre-installed on all Macs, installing kramdown is easy. To install k ramdown , open a Terminal and type:

sudo gem install kramdown

Once installed, the kramdown command is usable. As an example, put the following markdown in to a file called test.md :

On the command line, type:

kramdown test.md > test.html

There will now be a test.html file with the this content:

The kramdown program only translates the markdown given to valid HTML . It doesn’t try to create a full page of properly formatted HTML with a header and body sections. This is important for creating a slide show from markdown . For each slide, the HTML for the given content will be generated and not anything extra. It is easy to wrap the slides inside the main HTML for the slide show page.

Basics for an HTML Slideshow

The slideshow page has a beginning HTML , the slides HTML , and the ending HTML . The beginning and ending sections get copied in, while the slides HTML gets generated by kramdown with some extra clean-up work.

Create a file called presbegin.html with this code:

This is the beginning of the slide show. It’s not a complete HTML page. The body of the HTML has a three div s: container div, section0 div, and a slide div. The container div contains the entire slide show. 

Inside of the container is the section0 div and it’s slide div. The sections help format everything in each slide section, while the individual slide contains formatting for that slide.

The ending will be similar. Create a file called presend.html and place the following code:

Not much! It closes out the last slide’s divs and the body and html tags.

The only special formatting needed in the markdown notes is for any pictures and for detailing the end of each slide. Since markdown has an anchor type for pictures, that tag is used with one difference: instead of having a text description for the picture, that area will describe the classes to attach to the picture. Also, the markdown code for horizontal rules is used to separate slides. 

Therefore, the basic formula for creating the slide show is: copy the presbegin.html , generate HTML from the markdown, translate all <hr /> tags to </div></div><div id='section1' class='section'><div class='slide'></code> , fix all picture tags to use the subtext as classes, and copy the presend.html .

Create a new file called pres.rb and place this code:

This Ruby code performs the actions as described. The program file has to be made executable with:

chmod a+x pres.rb

The program is used with the following command line:

pres.rb <name of markdown file> <theme name>

This code is assuming that the presentation is not in the same directory as the code. Therefore, wherever you have the code, make sure you add it to your path.

Formatting With CSS

With the bulk translation of the markdown file to HTML done, the next step is to format the slides. To create the styles needed, add this code to the header section of the presbegin.html file:

The first part is a reset script using MeyerWeb Reset . Whenever working with HTML and CSS , a reset script should be used to put every browser on the same playing field. This is good design practice.

The second part are the styles needed to get the slides to take up the screen, the text to be centered, basic ordering and formatting for the pictures, and the basic setup for a background image. 

I have set the screen size to 1200x640 pixels which works great on my Macbook Air 11" screen. You can change it to whatever works best for you.

Now create a theme file. Make a file called Basic.css and place the following code:

This is a basic theme that you can use to make your own themes. This theme file will be copied to the presentation directory and renamed to theme.css . That is the file loaded by the slide show.

To add extra styling to pictures, create a class tag in the theme’s css file. Add that class tag to the text for the picture. Therefore, a picture with the background tag would look like:

Add the Javascript

For fastest loading of a web page, the JavaScript s should be at the bottom of the page. Therefore, in the presend.html , add this code just before the closing body tag:

This code loads in Mousetrap to control the slide show and jQuery to perform the transitions. Two global variables are used to control the slide show: slideNum and duration . The slideNum is the number for the current slide, and duration defines the speed of the change. The lower the duration, the faster the slides change.

Three functions are defined next: nextSlide() , prevSlide() , and beginSlide() . These functions allow the user to go to the next slide, previous slide, and back to the first slide respectively.

After the functions, I used a hook to the jQuery ready function that processes code after everything is loaded into the browser. Once everything is loaded, all slides are hidden and just the first slide made visible. Then the left arrow key is bound to the prevSlide() function, the right arrow key is bound to the nextSlide() function, and the b key is bound to the beginSlide() function.

In the code, you will notice the window.MaxSlideNum global variable. The ruby code for creating the slides sets this variable inside the HTML generated for the slide presentation. It tells the controlling functions how many slides are in this presentation.

Other Ways to Use the Script

While using the command line program is doable, it is not convenient. The tutorial, Writing Dropzone 3 Actions , shows how to create a Dropzone 3 action. Follow that tutorial to make a new Dropzone 3 action with the following code:

Once created, load the action in to Dropzone 3 . When a markdown file is dropped on the zone, it will create the presentation in the same directory.

Since Dropzone 3 is great for dropping many items on to it, you can great many presentations at one time. Just collect the files in the Drop Bar . Then move them to the dropzone for converting. Clicking the action will allow you to pick which theme to use. The completed Dropzone 3 action is included in the download.

This can also be made into an Alfred Workflow . The completed workflow is included in the download. The mds:theme command allows you to select the theme to use. The mds:showtheme will show the name of the currently set them in a notification. You can use the Alfred Browser to view a markdown file. When you hit right arrow on the file, you can select the Markdown to Slides command to create the presentation.

Deckset Does It All

If you find this program useful, you might want to check out Deckset .

Deckset takes a markdown file and converts it to a slide show. It has more functionality than presented in this tutorial. It also has many great themes to use.

With time always being on a premium, it is great to make use of notes as the basis for a presentation. Now that you have the tools in your hands, go and make some great presentations. This code is very basic and there is plenty of room for improvements. If you have changes or new themes for this code, please pass them on.

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!

markdown-slides

Using markdown, write simple but beautiful presentations with math, animations and media, which can be visualized in a web browser or exported to PDF.

See the official git repository hosted on Gitlab or the Github mirror .

This program appropriately inserts markdown files into Reveal.js files, completely avoiding the need to edit HTML files directly.

See for yourself : check out the live demo (and the source file presentation.md ).

Installation

Markdown-slides works with Python >= 3.8.

Don’t have python? Your version of python not working? Scroll down to fearless, conflict-free Python installation .

RESOURCE : any file or directory that should be included (e.g. a directory with pictures and videos)

FILE : input markdown file.

DIR : output directory. Defaults to a new directory in the working directory with the same name as the input file, but without suffix.

• PDF exporting requires chromium (see PDF exporting on reveal-js ).

QuickStart Example

Install markdown-slides

• Download the example presentation.md folder wget "https://gitlab.com/da_doomer/markdown-slides/-/archive/master/markdown-slides-master.zip?path=example" ; unzip markdown-slides-master.zip \? path = example ; cd markdown-slides-master-example/example ;
• Render the slide deck into a web page, including the media folder mdslides ./presentation.md --include media
• Open the slides in your browser (or publish to github pages) open ./presentation/index.html

You will probably only need to break slides:

Other options are documented in the example presentation presentation.md .

If you need a quick refresher on markdown see e.g. this cheatsheet , the CommonMark reference page , or this Gfm tutorial .

You will not have to break your markdown files to use this program. Control Reveal.js’ theme and options using CommonMark-compliant comments.

Everything but slide-break comments and option comments is passed to Reveal.js verbatim. Check out their documentation, especially the markdown section .

Some of Reveal.js’s features are:

• LaTeX math syntax.
• Automatic animations.
• Background videos and images.

Keep in mind you need an Internet connection to render equations (see issue #9 ).

Troubleshooting

If you encounter any issues or have some questions, open an issue on Gitlab or on Github .

Comments and pull requests are very welcome!

Fearless, Conflict-free Python installation

Markdown-slides works with Python 3.9 or newer.

Here’s a fearless, conflict-free python install that Just Works™ in bash, zsh, and fish:

• Webi will install pyenv (the python version manager) to ~/.pyenv , where it won’t conflict with your system python, or any projects: curl -sS https://webinstall.dev/pyenv | bash
• After installation you’ll need to CLOSE and RE-OPEN your terminal, or update your PATH : export PATH = ~/.pyenv/bin: " $PATH " export PATH = ~/.pyenv/shims: " $PATH "
• Now you can install Python v3.9.1 (safely in ~/.pyenv ): # Install v3.9.1, which works with mdslides pyenv install -v 3.9.1
• When you need to use mdslides , use pyenv to set your SHELL’s python to 3.9.1: (and you can set it right back afterwards) # Switch to python 3.9.1, conflict free pyenv global 3.9.1 # Install and use mdslides # Switch to your original system python pyenv global system

Bonus : You can tell pyenv to automatically pick Python 3.9.1 whenever you’re in your slides folder:

Markdownから簡単スライド作成！Marpの基本的な使い方と魅力を解説

プレゼンテーション用のスライド作成と聞くと、PowerPointやGoogleスライドを思い浮かべる方が多いと思います。でも、このツールはそれらとは一味違います。 今回は、Markdownから簡単にスライドを作成できるオープンソースツール「 Marp 」をご紹介します。エンジニアや学生、Markdownに慣れている方には特におすすめのツールです！

Marp は、Markdownをベースにしたシンプルかつパワフルなスライド作成ツールです。Marpを使えば、見慣れたMarkdown記法でスライドを素早く作成でき、コードを書く感覚で美しいスライドを仕上げることができます。 特に、開発者や技術系のプレゼンを頻繁に行う方には使いやすいツールです。

• Markdownベース : 簡単で素早い記述。
• 豊富なカスタマイズ : テーマを使用したり、CSSで記述が可能。
• 柔軟なエクスポート : PDFやPPT形式,HTMLへの出力が可能。
• リアルタイムプレビュー : 編集しながら即座にスライドを確認。
• オープンソース : 無料で利用できます。
• Markdownで簡潔に記述 できるため、従来のスライド作成ツールに比べて効率的に作業が進められる。
• テーマやスタイル を選ぶだけで、デザインに時間をかけることなくプロフェッショナルなスライドが作成可能。
• エクスポート機能 を使えば、PDF形式の配布用資料やPPT形式のプレゼン資料が一瞬で完成。

既存のMarkdownファイルをスライドとして書き換えるという使い方も便利ですね。例えば、このブログを少し修正することでスライドに早変わりします。 また、コードで記述するので LLMなどを利用したスライド作成 との親和性が高かったりします。

Marpの使い方は非常にシンプルです。 ここでは、Marpの基本的な利用方法を解説します。

1. インストール方法

• https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode マーケットプレースから marp for VSCode と検索して拡張機能をインストールするか、 VSコードのクイックオープン(Ctrl+P)を起動し、以下のコマンドを貼り付け、Enterを押す。
• Marp CLIのインストール （CLIを使用したい場合やVSCodeではないエディタの利用者向け）: npmが必要です。 npm install -g @marp-team/marp-cli

以下は公式のサンプルコードです。

ヘッダー部分には読み込むスタイルや設定を記述します。

• theme: gaia: Gaiaテーマを使用する指定。テーマによりスライドのスタイルが変わります。
• _class: lead: スライドのフォントサイズやレイアウトをカスタマイズするためのクラス指定。
• paginate: true: スライドの右下にページ番号を表示します。
• backgroundColor: 背景色を設定します。
• backgroundImage: 背景画像を設定。url() の中に指定した画像が背景に表示されます。
• bg left:40% 80%: このオプションで画像をスライドの左下に配置します。
• url: Marpのロゴ画像をスライドに表示します。
• 一般的なMarkdownの通り#でタイトル、##で小見出しなどを表現できます。
• インラインでCSSを記述することでデザインをすることも可能です。
• ハイフン３つでスライドの分割となります。
• コードブロックを記述することによるコードのハイライト表示もスライドに反映されます。

3. MarpCLIについて

各ファイルへのエクスポート方法.

• HTML デフォルトではHTMLへとエクスポートされます。
• --pdf オプションを指定することでPDFファイルをエクスポート出来ます。
• --pptx オプションを指定することでPDFファイルをエクスポート出来ます。
• リアルタイムでマークダウンファイルの変更がHTMLファイルに反映されます。
• ディレクトリを指定することでリアルタイムで更新されるローカルサーバーが建てられます。
• エクスポート時にテーマを上書きして変更できます。この場合はgaiaというテーマを指定しています。

今回は簡単にMarpとMarpCLIの基本的な使用方法をまとめました。 以下はMarpの公式サイトとGitHubリポジトリです。

• https://marp.app/#get-started
• https://github.com/marp-team/marp

今回紹介した機能以外にも、オリジナルのカスタムテーマの作成や利用方法など、様々な使い方があります。今後もMarpに関する記事を上げたり更新することが有るかもしれませんので、よかったらフォローもよろしくお願いいたします。 また、間違っている箇所や気になる箇所があれば是非コメントでご指摘下さい。 最後まで読んでいただきありがとうございました。