Bắt đầu

Slidev ^{(slide + dev, /slaɪdɪv/)} là một công cụ tạo và trình bày slide trên web. Được thiết kế cho các nhà phát triển, Slidev tập trung vào việc viết nội dung bằng Markdown. Với sức mạnh của các công nghệ web như Vue, bạn có thể tạo ra các thiết kế chính xác đến từng pixel và các bản trình bày tương tác.

TIP

Bạn có thể tìm hiểu thêm về lý do đằng sau dự án này tại 📖 Why Slidev.

Tạo slide

Dùng thử trực tuyến

Bắt đầu Slidev ngay trong trình duyệt với StackBlitz: sli.dev/new

Tạo tại máy cục bộ

Yêu cầu cài đặt Node.js >= 18.0.

Chạy lệnh sau để tạo dự án Slidev mới tại máy cục bộ:

pnpm

# Nếu bạn chưa cài đặt pnpm
npm i -g pnpm

pnpm create slidev

npm

# Không khuyến khích -
# NPM sẽ download các package mỗi lần bạn tạo một dự án mới,
# điều này sẽ chậm và chiếm nhiều không gian lưu trữ.

npm init slidev@latest

yarn

yarn create slidev

Làm theo các hướng dẫn để bắt đầu dự án slide của bạn. Nội dung slide nằm trong file slides.md, ban đầu chứa các ví dụ về hầu hết các tính năng của Slidev. Để biết thêm thông tin về cú pháp Markdown, vui lòng tham khảo 📖 Syntax Guide.

Sử dụng file đơn (không khuyến nghị)

Nếu bạn thích sử dụng một file Markdown duy nhất làm slide, bạn có thể cài đặt CLI của Slidev global:

pnpm

pnpm i -g @slidev/cli

npm

npm i -g @slidev/cli

yarn

yarn global add @slidev/cli

Sau đó, bạn có thể tạo và bắt đầu một file slide đơn bằng:

slidev slides.md

Các lệnh cơ bản

Slidev cung cấp một tập lệnh trong CLI của nó. Dưới đây là một số lệnh phổ biến:

• slidev - Start server dev. Xem lệnh dev.
• slidev export - Export slide thành PDF, PPTX hoặc PNG. Xem 📖 Exporting.
• slidev build - Build slide thành một ứng dụng web tĩnh. Xem 📖 Hosting.
• slidev format - Format slide. Xem lệnh format.
• slidev --help - Hiển thị thông báo trợ giúp.

Để chạy các lệnh này, bạn có thể thêm chúng vào các script trong package.json (điều này đã được thiết lập sẵn nếu dự án được tạo bằng npm init slidev):

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

Sau đó, bạn chỉ cần chạy npm run dev, npm run build, và npm run export.

Để biết thêm thông tin về CLI, vui lòng xem hướng dẫn CLI.

Thiết lập trình soạn thảo

Vì Slidev sử dụng Markdown làm nguồn nhập liệu, bạn có thể sử dụng bất kỳ trình soạn thảo nào mà bạn thích để tạo slide. Chúng tôi cũng cung cấp các công cụ giúp bạn chỉnh sửa slide thuận tiện hơn:

✨ VS Code Extension

✨ Integrated Editor

✨ Prettier Plugin

Tham gia cộng đồng

Chúng tôi khuyến khích bạn tham gia Discord Server chính thức để nhận hỗ trợ, chia sẻ slide hoặc thảo luận về bất kỳ vấn đề nào liên quan đến Slidev.

Nếu bạn gặp lỗi, hãy thoải mái tạo một issue trên GitHub.

Tech stack

Slidev được tạo ra nhờ sự kết hợp của các công cụ và công nghệ sau:

• Vite - Công cụ frontend cực kỳ nhanh.
• Vue 3 kết hợp với Markdown - Tập trung vào nội dung nhưng vẫn có sức mạnh của HTML và các component Vue khi cần.
• UnoCSS - Framework CSS utility-first theo yêu cầu, dễ dàng style cho slide.
• Shiki, Monaco Editor - Hỗ trợ code tuyệt vời với khả năng code trực tiếp.
• RecordRTC - Ghi âm và chế độ xem camera tích hợp.
• Dòng công cụ VueUse - @vueuse/core, @vueuse/head, @vueuse/motion, v.v.
• Iconify - Bộ sưu tập các icon.
• Drauu - Hỗ trợ vẽ và chú thích.
• KaTeX - Hiển thị toán học LaTeX.
• Mermaid - Sơ đồ dạng văn bản.