# Bắt đầu

# Tổng quan

Slidev ^{(slide + dev, /slʌɪdɪv/)} là một trình tạo và trình chiếu slide dựa trên web. Nó được thiết kế để các nhà lập trình tập trung vào việc viết nội dung trong Markdown đồng thời có sự hỗ trợ của các component HTML và Vue để cung cấp layout và thiết kế hoàn hảo trên từng pixel trong bản trình bày của bạn.

Nó sử dụng file markdown giàu tính năng để tạo các slide đẹp với trải nghiệm tải lại tức thì, cùng với nhiều tích hợp tích hợp như code trực tiếp, xuất PDF, ghi bản trình bày, v.v... Vì nó được cung cấp bởi web, bạn có thể làm bất cứ điều gì với Slidev - khả năng là vô tận.

Bạn có thể tìm hiểu thêm về cơ sở lý luận đằng sau dự án trong phần Tại sao chọn Slidev.

# Tính năng

• 📝 Dựa trên Markdown - sử dụng trình soạn thảo và quy trình làm việc yêu thích của bạn
• 🧑‍💻 Thân thiện với nhà lập trình - đánh dấu cú pháp tích hợp, code trực tiếp, v.v...
• 🎨 Themable - chủ đề có thể được chia sẻ và sử dụng với package npm
• 🌈 Stylish - Windi CSS tiện ích theo yêu cầu, stylesheet được nhúng dễ sử dụng
• 🤹 Tương tác - nhúng các component Vue một cách liền mạch
• 🎙 Chế độ trình bày - sử dụng cửa sổ khác hoặc thậm chí điện thoại của bạn để điều khiển các slide của bạn
• 🧮 LaTeX - tích hợp LaTeX hỗ trợ phương trình toán học
• 📰 Diagrams - tạo sơ đồ với mô tả bằng văn bản
• 🌟 Icons - truy cập trực tiếp vào các icon từ bất kỳ bộ icon nào
• 💻 Trình soạn thảo - trình soạn thảo tích hợp, hoặc extension cho VS Code
• 🎥 Recording - tích hợp recording and xem camera
• 📤 Portable - xuất sang PDF, PNGs, hoặc thậm chí là một SPA có thể lưu trữ
• ⚡️ Nhanh - tải lại tức thì được cung cấp bởi Vite
• 🛠 Hackable - sử dụng plugin Vite, component Vue hoặc bất kỳ package npm nào

# Tech Stack

Slidev có thể thực hiện được bằng cách kết hợp các công cụ và công nghệ này.

• Vite - một công cụ frontend cực kỳ nhanh chóng
• Vue 3 cung cấp Markdown - tập trung vào nội dung khi có sự hỗ trợ của các component HTML và Vue bất cứ khi nào cần thiết
• Windi CSS - khung CSS ưu tiên tiện ích theo yêu cầu, tạo style cho các slide của bạn một cách dễ dàng
• Prism, Shiki, Monaco Editor - hỗ trợ các đoạn code first-class với khả năng code trực tiếp
• RecordRTC - tích hợp recording và chế độ xem camera
• VueUse - @vueuse/core, @vueuse/head, @vueuse/motion, v.v...
• Iconify - bộ sưu tập icon.
• KaTeX - render toán học LaTeX.
• Mermaid - Sơ đồ văn bản.

# Dàn dựng bài thuyết trình đầu tiên của bạn

Với NPM:

$ npm init slidev

Với Yarn:

$ yarn create slidev

Làm theo lời nhắc và bắt đầu tạo slide của bạn ngay bây giờ! Để biết thêm chi tiết về cú pháp markdown, hãy đọc qua hướng dẫn cú pháp.

# Giao diện Command Line

Trong một dự án có cài đặt Slidev, bạn có thể sử dụng hệ nhị phân slidev trong các tập lệnh npm của mình.

{
  "scripts": {
    "dev": "slidev", // start dev server
    "build": "slidev build", // build for production SPA
    "export": "slidev export" // export slides to pdf
  }
}

Nếu không, bạn có thể sử dụng nó với npx

$ npx slidev

Chạy slidev --help để có thêm tùy chọn.

# Cú pháp Markdown

Slidev đọc file slides.md trong dự án gốc của bạn và chuyển đổi chúng thành các slide. Bất cứ khi nào bạn thực hiện thay đổi với nó, nội dung của các slide sẽ được cập nhật ngay lập tức. Ví dụ:

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting

//```ts
console.log('Hello, World!')
//```

---

# Page 3

Đọc thêm về cú pháp Slidev Markdown trong hướng dẫn cú pháp.