用 Markdown 就可以写 PPT 了

雨夜寻晴天
VIP.5 如鱼得水
815 阅读4分钟

Slidev 旨在为开发者提供灵活性和交互性，通过使用他们已经熟悉的工具和技术，使他们的演示文稿更加有趣、更具表现力和吸引力。

无意中发现这个“宝贝”，还是令人惊喜的！平常喜欢写 md 文件，一般都是转成了文稿之类的，没想到 Slidev 可以转成 PPT。说实话，工作中难免要写点 PPT，但是个人很不喜欢做 PPT，感觉很麻烦，就是到底是输出内容呢？还是输出PPT技巧呢？感觉 Slidev 很适合我，可以让我专注于输出内容，而且，md 不仅可以转换为文档，这下也可以转 PPT 了，也算是跨多端，哈哈。不知道大家有和我一样的感受吗？

安装

npm init slidev@latest

# or
yarn create slidev

项目目录（有自己后加的）：

image.png

项目效果：

image.png

Demo 默认了 10 张 PPT：

image.png

这里边其实最重要的是 md 语法，和我们平常写 md 语法基本一致，就是多一些设置，都去了解一下，运用几次基本就记住了。还有社区有很多主题可供选择，但是感觉可能和我们自身不符，不过，我们可以自己编写属于自己的主题。

常用的 md 语法

  • 使用 --- 添加分隔符来分隔你的幻灯片，也就是分页。

  • 在 Slidev 的第一张幻灯片扉页处（文件顶部）进行各项配置，以下是各项的默认参数。

---
# 主题id 或 主题包名称
theme: 'default'
# 幻灯片的总标题，如果没有指定，那么将以第一张拥有标题的幻灯片的标题作为总标题
title: ''
# titleTemplate for the webpage, `%s` will be replaced by the page's title
titleTemplate: '%s - Slidev'

# 在单页（SPA）构建中启用 pdf 下载，也可以指定一个自定义 url
download: true
# 语法高亮设置，可以使用 'prism' 或 'shiki' 方案
highlighter: 'prism'
# 在代码块中显示行号
lineNumbers: false
# 启用 monaco 编辑器，默认情况下仅在开发者（dev）模式中启用
monaco: 'dev'

# 幻灯片的配色方案，可以使用 'auto'，'light' 或者 'dark'
colorSchema: 'auto'
# vue-router 模式，可以使用 'history' 或 'hash' 模式
routerMode: 'history'
# 幻灯片的长宽比
aspectRatio: '16/9'
# canvas 的真实宽度，单位为 px
canvasWidth: 980

# favicon 可以是本地文件路径，也可以是一个 URL
favicon: 'https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/favicon.png'
# 字体将从 Google 字体自动导入
# 了解更多：https://sli.dev/custom/fonts
fonts:
  sans: 'Roboto'
  serif: 'Roboto Slab'
  mono: 'Fira Code'

# 为所有幻灯片添加默认的 frontmatter
defaults:
  layout: 'default'
  # ...

# 幻灯片的一些信息，可以使用 markdown 语法来书写
info: |
  ## Slidev
  我的第一个 [Slidev](http://sli.dev/) 演示!
---
  • Slidev 一个非常重要的功能就是可以让代码在幻灯片中拥有正确的高亮。
//```ts
console.log('Hello, World!')
//```

// 针对特定行进行高亮展示，只需在 `{}` 内添加对应的行号
//```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

// 在多个步骤中改变高亮，你可以用 `|` 分隔它们
//```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```
  • 在演示文稿中做修改时，只需在语言 id 后添加 {monaco}
//```ts {monaco}
console.log('HelloWorld')
//```
  • 直接使用 <style> 标签来覆盖当前幻灯片的样式
# This is Red

> Hello `world`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
h1 {
  color: red
}
</style>

---

# Next slide is not affected
  • 静态资源
// 如果是远程资源，第一次运行时会把它们缓存到磁盘中，即便是大图也能实现立即加载。
![Remote Image](https://sli.dev/favicon.png)

// 如果是本地资源，请将资源放置到 public 文件夹中并使用 / 开头的 URL 来引用它们。
![Local Image](/pic.png)

// 如果你想使用自定义的尺寸或样式，可以使用 `<img>` 标签
<img src="/pic.png" class="m-40 h-40 rounded shadow" />
  • 居然还有演讲者模式，写一些备注，演讲的时候供自己看，哈哈
---
layout: cover
---

# 第 1 页

This is the cover page.

<!-- 这是一条备注 -->

---

# 第 2 页

<!-- 这不是一条备注，因为它在幻灯片内容前 -->

The second page

<!--
这是另一条备注
-->

image.png

看到没？还有时间提示，保证你的演讲时间可控！还有下一页的缩略图，可以提前有个心理准备。还有当前页面注释，让你按照提前准备的讲，不会慌。最下边那是导航，可以操作！

  • 居然还有 插槽，和写 Vue 一样
---
layout: two-cols
---

<template v-slot:default>

# Left

This shows on the left

</template>
<template v-slot:right>

# Right

This shows on the right

</template>

image.png

配置 Vue

Slidev 基于 Vue 3 来渲染应用。你可以针对应用进行扩展，添加自定义插件或自定义配置等操作。

可以用写 Vue 项目一样，写 PPT，对前端似乎更友好一点。

创建 ./setup/main.ts 文件，其内容如下：

import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app, router }) => {
  // Vue App
  app.use(YourPlugin)
})

这也可以作为你 Slidev 应用程序的主入口，在应用启动前做一些初始化操作。

导出 PDF、PNG

slidev export
// 稍作等待，即可在 `./slides-exports.pdf` 路径下看到你幻灯片的 PDF 文件。


slidev export --format png
// Slidev 会将每张幻灯片导出为 PNG 图片格式

......很多很多的功能

实在是不错，我这就不再过多赘述了，直接去官网好好学习一番！

github地址：github.com/slidevjs/sl…

文档地址：sli.dev/

好东西就是要拿出来分享的，只能送你到这了，后边自己玩转起来吧！

avatar
文章
阅读
粉丝