Making a powerpoint presentation isn’t a great experience for most people, and one of the most annoying things is typography. Markdown replaces typography with concise syntax, without the extensive typography and font Settings of Word processing programs like Word or Pages. Markdown lets you just focus on the content and not the typography. Markdown takes care of typography for you. Markdown is mainly used to replace Word. Is it possible to use simple and easy Markdown to make PPT?

Here I’ll introduce a tool that can generate slides with a simple Markdown document: Marp.

The installation

For the average user, the best way to use Marp at this point is through its released VS Code plug-in, which can create and export presentations as PPTX, PDF, and HTML.

We can go firstVSCode websiteDownload and install VSCode. Once inside VSCode, click on the Extensions TAB and search for Marp:Press the install button and you’ll be ready to install in a few seconds. After the installation is complete, create a folder anywhere on your computer (I’ll call it marp_slideshow), then open it in VSCode and create a slideshow.md file inside.

To make the simplest slide with Markdown, you just need to let the editor know that it is a slide (not a document) and where it should be paged.

Tell the editor that you are using Marp by adding the following field at the beginning of the document

---
marp: true
---
Copy the code

​

Create a new slide by using the separator syntax (add a blank line)

---
Copy the code

The basic use

Create the first slide

Tell the editor that MARP is being used

---
marp: true
---
Copy the code

​

Open the preview

You can now click on the Preview icon to view the presentation:

Add content

Add the following, the second element has child elements, each with a different style. Here’s an example of how to use bold, italic, and inline code:

# Welcome to MARP
- It's an awesome VSCode extension for making presentations.
- It's based on Markdown:
  - **Bold**
  - _Italic_
  - `code`
Copy the code

Create a second slide

Use the separator syntax – create a new slide

---
Copy the code

Add images

Add the following to add the title, bullet points, and images to the slide:

# Welcome to Slide 2
-This is a neural network: ! [A neural network] (https://upload.wikimedia.org/wikipedia/commons/3/3d/Neural_network.svg)
Copy the code

Exporting the presentation

You can save the presentation as a PowerPoint document, PDF file, or HTML. The PNG and JPG options only export the first slide. Bring up the Export Slide Deck command and Export the slides by clicking the Marp icon button in the upper right corner of the editor. ​

Now let’s open the PDF to verify that the export was successful: ​

Let’s check PPTX again (can’t modify text or images) : ​

Finally, we can export HTML for demonstration purposes, or use GitHub to host static HTML for sharing: ​

Use the advanced

Set the style

You can do this either by entering command key-value pairs in the YAML command field in the header of the file.

---
marp: true
size: 4:3
theme: default
---
Copy the code

​

The other way is to do it in an HTML-like style, which works by default on all current and subsequent slides.

<! -- size: 4:3 -->Copy the code

​

You can precede the command with a $to make it valid for the entire document, or an underscore _ to make it valid only for the current slide.

<! -- $backgroundColor: orange --> <! --_backgroundColor: orange -->
Copy the code

Theme Settings

Change the theme of the presentation:

---
marp: true
theme: gaia
---
Copy the code

Length to width ratio setting

Change the aspect ratio of the presentation to 4:3:

---
marp: true
size: 4:3
---
Copy the code

Title adaptation

Marp also retains a command for title adaptation, placing it after the # of a Markdown title makes the title automatically fill in the size of the slide, suitable for scenarios such as front page headlines.

# <! -- fit --> Welcome to MARP
Copy the code

Other style

Marp supports a fairly rich range of commands, Include theme, length ratio size, paginate, header, footer, backgroundColor, backgroundImage, text color and so on. More orders are explained in detail on the official instructions page.

Custom styles

For more complex styles you can customize them using CSS stylesheets:

<style>
</style>
Copy the code

​

Use dark themes:

<style>
:root { --color-background: #101010 ! important; --color-foreground: #FFFFFF ! important; } Copy the code

Graphics Settings

Marp uses the original Markdown image syntax on the basis of the extension, you can directly control the image expression form in Markdown syntax, the general form is! Keyword: value ().

Change the width

For background images, you can change the image length or width using the keywords width, height, or w and H for short.

! [width:200px] (image.png)
![w:200px, h:400px] (image.png)
Copy the code

Image Filter

Based on the FILTER attribute of CSS, Marp can perform some operations based on blur, brightness, contrast and so on.

! [blur:15px] (image.png)
![Brightness: 0.5] (image.png)
![contract:150%] (image.png)
Copy the code

The background image

Marp provides an easy way to set an image as the background by writing bg in square brackets.

! [bg] (background.png)
Copy the code

​

At the same time, you can set the zoom mode of the background image by appending the format attribute of the image after bg, such as [BG fit]. Where cover means fill the page, fit means stretch to fit the page, and Auto means use the original image scale without scaling.

Display Settings

The unordered list syntax * is reserved for displaying the contents of the list in order of elements when showing slides.

  * **Bold**
  * _Italic_
  * `code`
Copy the code

​

Unordered list syntax – + displays everything at the same time.

  * **Bold**
  * _Italic_
  * `code`
Copy the code

​

Similarly, the ordered list syntax 1) is reserved for displaying list elements in sequence.

  1) **Bold**
  2) _Italic_
  3) `code`
Copy the code

​

Ordered list syntax 1. Display all elements simultaneously.

  1. **Bold**
  2. _Italic_
  3. `code`
Copy the code

conclusion

If the presentation doesn’t require animations and transitions, save it as a PDF document, because PDF is easier to share and open. You can also export HTML for demonstration purposes and use GitHub to host static HTML for sharing.

Marp is probably too basic for you if you need all the features that Powerpoint has to offer, and the animations and transitions that Marp offers are relatively simple.

Reference Marp: New option to “write” PowerPoint with Markdown bye-bye PowerPoint. Hello Marp!