Slidev 是一個(gè)面向開(kāi)發(fā)者的網(wǎng)頁(yè)版幻燈片工具，用 Markdown 寫(xiě)內(nèi)容，也支持 HTML 和 Vue 組件，能精細(xì)調(diào)整每頁(yè)布局，還能邊寫(xiě)邊預(yù)覽效果。它自帶演講者模式、畫(huà)筆批注、數(shù)學(xué)公式、圖表、圖標(biāo)、錄制功能和導(dǎo)出 PDF/PNG/網(wǎng)頁(yè)版等實(shí)用工具，Slidev基于 Vite 開(kāi)發(fā)，修改內(nèi)容實(shí)時(shí)更新，適合做技術(shù)分享、講課或者產(chǎn)品演示。

Slidev主要功能

• 用 Markdown 做幻燈片：按 Markdown 語(yǔ)法寫(xiě)內(nèi)容，Slidev 會(huì)自動(dòng)轉(zhuǎn)成好看的幻燈片頁(yè)面。

• 代碼高亮和實(shí)時(shí)演示：Slidev支持多種編程語(yǔ)言的代碼高亮，還能直接在幻燈片里寫(xiě)代碼并運(yùn)行，實(shí)時(shí)顯示結(jié)果。

• 主題豐富：通過(guò) npm 安裝社區(qū)主題，有很多現(xiàn)成的好看模板，一鍵就能用到自己的幻燈片里。

• 能加交互效果：可以直接嵌入 Vue 組件，讓幻燈片里的內(nèi)容動(dòng)起來(lái)，比如點(diǎn)擊按鈕、切換數(shù)據(jù)之類(lèi)的。

• 演講者模式：開(kāi)個(gè)新窗口或者用手機(jī)控制幻燈片，還能看備注，演講時(shí)更方便。

• 畫(huà)筆批注：講的時(shí)候能在幻燈片上畫(huà)畫(huà)寫(xiě)寫(xiě)，還能保存成 SVG 格式。

• 數(shù)學(xué)公式：支持用 LaTeX 語(yǔ)法寫(xiě)公式，自動(dòng)渲染成清晰的數(shù)學(xué)表達(dá)式。

• 圖標(biāo)素材：直接調(diào)用各種圖標(biāo)庫(kù)，給幻燈片加圖片元素更簡(jiǎn)單。

• 導(dǎo)出選項(xiàng)：Slidev能導(dǎo)出 PDF、PNG 或者網(wǎng)頁(yè)版（SPA），方便分享或者存檔。

Slidev怎么用

• 在線直接用

  打開(kāi) sli.dev/new，不用裝軟件，直接在網(wǎng)頁(yè)里寫(xiě) slides.md 文件，右邊會(huì)實(shí)時(shí)顯示幻燈片效果，改完就能看到變化。

• 本地安裝使用

  先裝 Node.js：電腦需要裝 Node.js（版本 18 或更高）。

  創(chuàng)建項(xiàng)目：在命令行運(yùn)行以下任意一條命令：

  用 npm：npm init slidev@latest

  用 pnpm：pnpm create slidev

  用 yarn：yarn create slidev

  進(jìn)項(xiàng)目文件夾：創(chuàng)建好后，打開(kāi)命令行進(jìn)入項(xiàng)目目錄。

• 啟動(dòng)工具：運(yùn)行 slidev命令，會(huì)自動(dòng)打開(kāi)瀏覽器顯示幻燈片。

• 開(kāi)始寫(xiě)內(nèi)容：用代碼編輯器打開(kāi) slides.md 文件，用 Markdown 語(yǔ)法寫(xiě)每頁(yè)內(nèi)容，每?jī)蓚€(gè) ---符號(hào)之間就是一張新幻燈片。

• 常用命令

  導(dǎo)出文件：slidev export（導(dǎo)出 PDF/PNG/網(wǎng)頁(yè)版）

  打包成網(wǎng)頁(yè)：slidev build（生成靜態(tài)網(wǎng)頁(yè)）

  格式化內(nèi)容：slidev format

  查看幫助：slidev --help

Slidev適合哪些場(chǎng)景

• 技術(shù)分享/講課：代碼高亮、實(shí)時(shí)運(yùn)行、能加交互組件和動(dòng)畫(huà)，講技術(shù)內(nèi)容更清楚。

• 學(xué)術(shù)/工程匯報(bào)：用 LaTeX 寫(xiě)公式、用 Mermaid 畫(huà)圖表，內(nèi)容準(zhǔn)確且排版整齊。

• 線上發(fā)布/存檔：導(dǎo)出的 PDF/PNG/網(wǎng)頁(yè)版方便發(fā)給別人或者長(zhǎng)期保存，基于 Vite 開(kāi)發(fā)體驗(yàn)流暢。