Slidev写PPT的全新方式

前言

slide，泛称 ppt，指代幻灯片中具体的一页；ppt，PowerPoint 的简称。

通常我们会使用微软的 PowerPoint 来设计幻灯片，但是在 Markdown 文档标准化的当下，用 Markdown 来写 ppt 已经逐步成为一种趋势，今天我们就来介绍一款超棒的 Markdown 写 Slide 的工具，它就是 Slidev。

依赖

slidev 是用 vue 开发的，依赖 Node.JS≥14。

安装 Node.JS

选择对应系统安装包

windows 系统注意安装时勾选自动配置环境变量选项。

创建 Slidev 项目

命令：npm init slidev

执行命令后，你需要经历输入项目名称，选择包管理工具等步骤，项目初始化成功后，Slidev 会启动开发者服务器，同时打开默认项目的预览。

项目创建过程

项目预览

设计我们自己的 slide

项目结构

我们可以看到 slidev 为我们生成了默认的项目路径，其中我们最关注还是 slides.md，这里面存放着我们所写的 slide。

slide例子

编辑模式

直接编辑 slides.md
在预览界面编辑

第一种我们直接打开 slides.md 编辑即可，第二种我们在预览界面的左下角 hover 出菜单栏，打开编辑窗口即可进行 slides.md 的动态编辑。

Demo

我们本次选择直接编辑 slides.md 文档。

---
#设置主题
theme: default

# 设置背景图片
background: './vx.jpg'

# 设置样式
class: 'text-center'

# https://sli.dev/custom/highlighters.html
highlighter: shiki

# 是否打开代码行号
lineNumbers: false

# 使用MarkDown配置slide
info: |
  ## Slidev Starter Template
  Presentation slides for developers.

  Learn more at [Sli.dev](https://sli.dev)
# persist drawings in exports and build
drawings:
  persist: false
---

# 欢迎来到 Slidev 的世界

为开发者打造的slide工具

<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)
-->

---

# 什么是 Slidev?

Slidev 好用好看！
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>

---

后续省略...

效果：

首页（修改了背景和标题）