“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 codeEffect:
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)