Slidev 是一个面向开发者的网页版幻灯片工具，用 Markdown 写内容，也支持 HTML 和 Vue 组件，能精细调整每页布局，还能边写边预览效果。它自带演讲者模式、画笔批注、数学公式、图表、图标、录制功能和导出 PDF/PNG/网页版等实用工具，Slidev基于 Vite 开发，修改内容实时更新，适合做技术分享、讲课或者产品演示。

Slidev(图1)

Slidev主要功能

  • 用 Markdown 做幻灯片：按 Markdown 语法写内容，Slidev 会自动转成好看的幻灯片页面。

  • 代码高亮和实时演示：Slidev支持多种编程语言的代码高亮，还能直接在幻灯片里写代码并运行，实时显示结果。

  • 主题丰富：通过 npm 安装社区主题，有很多现成的好看模板，一键就能用到自己的幻灯片里。

  • 能加交互效果：可以直接嵌入 Vue 组件，让幻灯片里的内容动起来，比如点击按钮、切换数据之类的。

  • 演讲者模式：开个新窗口或者用手机控制幻灯片，还能看备注，演讲时更方便。

  • 画笔批注：讲的时候能在幻灯片上画画写写，还能保存成 SVG 格式。

  • 数学公式：支持用 LaTeX 语法写公式，自动渲染成清晰的数学表达式。

  • 图标素材：直接调用各种图标库，给幻灯片加图片元素更简单。

  • 导出选项：Slidev能导出 PDF、PNG 或者网页版（SPA），方便分享或者存档。

Slidev怎么用

  • 在线直接用

    打开 sli.dev/new，不用装软件，直接在网页里写 slides.md 文件，右边会实时显示幻灯片效果，改完就能看到变化。

  • 本地安装使用

    先装 Node.js：电脑需要装 Node.js（版本 18 或更高）。

    创建项目：在命令行运行以下任意一条命令：

    用 npm：npm init slidev@latest

    用 pnpm：pnpm create slidev

    用 yarn：yarn create slidev

    进项目文件夹：创建好后，打开命令行进入项目目录。

  • 启动工具：运行 slidev命令，会自动打开浏览器显示幻灯片。

  • 开始写内容：用代码编辑器打开 slides.md 文件，用 Markdown 语法写每页内容，每两个 ---符号之间就是一张新幻灯片。

  • 常用命令

    导出文件：slidev export（导出 PDF/PNG/网页版）

    打包成网页：slidev build（生成静态网页）

    格式化内容：slidev format

    查看帮助：slidev --help

Slidev适合哪些场景

  • 技术分享/讲课：代码高亮、实时运行、能加交互组件和动画，讲技术内容更清楚。

  • 学术/工程汇报：用 LaTeX 写公式、用 Mermaid 画图表，内容准确且排版整齐。

  • 线上发布/存档：导出的 PDF/PNG/网页版方便发给别人或者长期保存，基于 Vite 开发体验流畅。