Used Markdown to write Slides on his artifact

“This is the fifth day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

A slide is a piece of paper. PowerPoint, short for PowerPoint.

We usually use Microsoft PowerPoint to design slides, but now that Markdown documents are standardized, it has gradually become a trend to use Markdown to write PPT. Today we will introduce an excellent Markdown writing Slide tool. It’s called Slidev.

Rely on

Slidev is developed in Vue and relies on Node.js ≥14.

Installation Node. JS

Log on to the Node. Js’s official website http://nodejs.cn/download/ to download the Node. Js, the latest version.

In Windows, select automatic environment variable configuration during installation.

Create the Slidev project

Command: NPM init slidev

After executing this command, you will need to enter the project name and select the package management tool. After the project is successfully initialized, Slidev will start the developer server and open a preview of the default project.

Design our own Slide

The project structure

We can see that Slidev generated the default project path for us, of which we focused most on slides.

Edit mode

Edit slides. Md directly
Edit in the preview screen

In the first way, we can directly open the slides. Md for editing. In the second way, we can hover the menu bar in the lower left corner of the preview interface and open the editing window for dynamic editing.

Demo

We chose to edit the slides. Md document directly this time.

Background: './vx.jpg' # Set style class: 'the text - center' # https://sli.dev/custom/highlighters.html highlighter: whether shiki # lineNumbers no. Open the lines of code: Configure slide info with MarkDown: | ## Slidev Starter Template Presentation slides for developers. Learn more at [Sli.dev](https://sli.dev) # persist drawings in exports and build drawings: persist: <div class="pt-12"> <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10"> Press Space for next page <carbon:arrow-right class="inline"/> </span> </div> <div class="abs-br m-6 flex gap-2"> <button @click="$slidev.nav.openInEditor()" title="Open in Editor" class="text-xl icon-btn opacity-50 ! border-none ! hover:text-white"> <carbon:edit /> </button> <a href="https://github.com/slidevjs/slidev" target="_blank" alt="GitHub" class="text-xl icon-btn opacity-50 ! border-none ! hover:text-white"> <carbon-logo-github /> </a> </div> <! -- The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs] (https://sli.dev/guide/syntax.html#notes) -- - > - # what is Slidev? Slidev Easy to use and good-looking! Slidev is a slides maker and presenter designed for developers, Consist of the following features - 📝 ** text-based ** - focus on the content with Markdown, And then style them later - 🎨 **Themable** - theme can be shared and used with NPM packages - 🧑💻 **Developer Friendly** - code highlighting, Live coding with autocompletion - 🤹 **Interactive** - embedding Vue components to enhance your expressions - 🎥 **Recording** - Built-in Recording and Camera View - 📤 **Portable** - Export into PDF, PNGs, Or even a hostable SPA - 🛠 **Hackable** - anything possible on a webpage <br> <br> Read more about [Why Slidev?] (https://sli.dev/guide/why) <! -- You can have `style` tag in markdown to override the style for the current page. Learn more: https://sli.dev/guide/syntax#embedded-styles --> <style> h1 { background-color: #2B90B6; background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } </style>Copy the code

Effect:

Slidev also supports code presentation, images, videos, Latex, Avi, all supported by Markdown, and more, Slidev also supports custom Vue components and animations. It’s powerful.

Menu Function Overview

When previewing the Slide, we hover in the lower left corner to bring up the menu bar, which can implement full-screen, forward and back, Slides thumbnails, dark mode, screen recording, marking, editing mode, text information, zooming and so on.

Export the Demo

We may have to install ourselves down the drain of test-chromium.

Install command: NPM I playmate

Export NPX slidev export

conclusion

Slidev is an excellent tool for creating a high-fidelity, highly customized, aesthetically pleasing slide that is fully compatible with MarkDown. Wall crack suggests everyone to try.

Slidev 官网 (sli.dev)