How do VSCode make slides? VSCode uses Markdown to automatically generate PPT detailed instructions

Use Markdown in VSCode to automatically generate PPT detailed usage guide, support a variety of styles and typesetting, support ppt to pdf and so on.

Marp Official website:

https://marp.app/

The software can also be used on Windows or Linux systems, not limited to macOS.

Today we are going to introduce the VS Code plug-in launched by Marp - Marp for VS Code, after VS Code installed this plug-in, it means that we can also use VS Code to make slides.

Markdown is simple and easy to use, especially for efficient editing of mathematical formulas, and the two VSCode plug-ins based on Markdown are the main characters today - Marp and MPE. For the production of simple math PPT, Marp and MPE seem to be the most suitable choice, after all, this kind of PPT does not need fancy effects, but should focus on the content.

Although Marp is an open source desktop software, it can be used with VSCode and Marp plug-in, which is completely efficient for making lightweight slides. After downloading and installing VSCode, search for "Marp for VSCode" in its plugins bar and click Install.

After installing the Marp for VS Code plug-in, you can do PPT directly without any configuration.

Click the VS Code "File" TAB, select "New File", in the pop-up panel, select Marp Markdown file type.

After selecting the Marp Markdown file, a new file will be created with the configuration option marp: true at the beginning, which means to use Marp to create the PPT.

Click the "Preview" button in the upper right corner of the file to see the first slide page on the right.

With nothing on top, it's our turn to use the Markdown syntax:

ppt making process

For those who are familiar with Markdown, don't say much, just like writing an article to write PPT.

If you want to create a second page, just add 3 short lines at the end - and a new slide will appear below.

However, if we want to insert a picture into the slide, it will be slightly more troublesome.

The directly inserted local picture will be displayed as lost after rendering, the solution is to upload the local picture to the Internet (picture bed), and then paste the picture link, the picture can be displayed normally.

The inserted image will be displayed at its original size. If the image is large, it will occupy the entire slide page and affect the presentation of other content.

To solve this problem, simply configure the width or height of the image in the Markdown image name:

w:300 h:300

Here w and h are abbreviations for width and height, respectively, and note that w and h must be lowercase.

Change global theme

The default color of the Marp rendered slides is black/white. If you don't like the default style, you can change the theme field at the beginning of the Markdown file to change the global theme of the slide.

The theme field has three values:

default (default value, can be omitted)

uncover

gaia

The following image shows the uncover theme in effect, with everything centered and the style of the referenced content changed from vertical lines to double quotes.

The image below shows the effect of the gaia theme, with the white background changed to a light yellow, kind of like the warm light/eye protection mode of some reading apps, but I'm not sure if this color is really eye protection.

If you want to use the light yellow background of the gaia theme but want to center the content like the uncover theme, just add a second class field in the configuration at the beginning of the file with the value set to lead.

However, the final effect is still a little different, adding references and unordered list style content, still will keep the original display to the left.

Change the background and text color of individual slides

The theme set earlier is a global style that affects the background color of all slides.

If we want to customize the color of one or more of these pages, we can do so.

You can change the background color of the page by adding a field at the beginning of the page where you want to change the background color of the slide.

The color here can be the English color, such as the blue blue above, or it can be the rgb value, which is a bit like writing CSS style.

After changing the background color, if the new background color is not clearly distinguished from the color of the text content, it will affect the normal viewing of the text content, and then the color of the text needs to be changed.

To change the color of the text content, you need to configure one more option below to customize the color of the text.

Since you can change the background color of a single slide, some people might wonder: Can you change the background color of all slides?

It is also possible - just add an option at the beginning of the file, backgroundColor, to customize the background color of all slides.

Of course, the individually set background color of the page will override the globally set color, as you can see in the image below, even though we changed the global background color to yellow, the second page still keeps the individually set blue.

Export the slide to PDF

Finally, no matter how good it is to use Marp and VS Code to write PPT, it is still necessary to fall back to the ground and think about a question: how to share your PPT with others? How can you accommodate more people or scenarios?

Fortunately, Marp has also taken into account for us, and supports exporting rendered PPT files to PDF files.

Here's how:

Click the Marp icon (triangle icon) in the upper right corner of the Marp Markdown file, select "Export Slide Deck" in the pop-up panel, and you can export the PPT to PDF

Matters needing attention

If you have the Markdown Preview Enhanced rendering plugin installed on VS Code, you will need to "disable" or "uninstall" the plugin and use VS Code's later integrated Markdown preview feature. Only then can you normally see the rendered PPT page.

Related recommendations:

What are the best plug-ins for vscode? 12 VSCode plug-ins that can't be missed

How to use VSCode? The most complete vscode configuration tutorial in history

VScode can not display jump to definition How to solve? vscode can not jump to the definition of the reason and solution

Latest comments