Hướng dẫn cú pháp
Các slide của Slidev được viết dưới dạng các file Markdown, được gọi là Slidev Markdown. Một bài thuyết trình có một file Slidev Markdown làm mục nhập, mặc định là ./slides.md, nhưng bạn có thể thay đổi nó bằng cách truyền đường dẫn file vào các lệnh CLI.
Trong Slidev Markdown, bạn không chỉ có thể sử dụng các tính năng cơ bản của Markdown như thông thường, mà Slidev còn cung cấp thêm các tính năng để nâng cao các slide của bạn. Phần này sẽ đề cập đến cú pháp do Slidev giới thiệu. Vui lòng đảm bảo bạn đã nắm vững cú pháp Markdown cơ bản trước khi đọc hướng dẫn này.
Dấu phân cách slide
Sử dụng --- được đệm với một dòng mới để phân tách các slide của bạn.
# Title
Xin chào, **Slidev**!
---
# Slide 2
Sử dụng khối code để làm nổi bật:
```ts
console.log('Hello, World!')
```
---
# Slide 3
Sử dụng các class UnoCSS và các component Vue để style và làm phong phú các slide của bạn:
<div class="p-3">
<Tweet id="..." />
</div>Frontmatter & Headmatter
Ở đầu mỗi slide, bạn có thể thêm một option frontmatter để cấu hình slide. Khối frontmatter đầu tiên được gọi là headmatter và có thể cấu hình toàn bộ bộ slide. Các phần còn lại là frontmatters cho từng slide riêng lẻ. Văn bản trong headmatter hoặc frontmatter nên là một object theo định dạng YAML. Ví dụ:
---
theme: seriph
title: Chào mừng đến với Slidev
---
# Slide 1
Frontmatter của slide này cũng là headmatter
---
layout: center
background: /background-1.png
class: text-white
---
# Slide 2
Một trang với layout là `center` và background
---
# Slide 3
Một trang không có frontmatter
---
src: ./pages/4.md # Trang này chỉ chứa một frontmatter
---
---
# Slide 5Các cấu hình bạn có thể thiết lập được mô tả trong các phần Cấu hình bộ slide và Cấu hình từng slide.
Để làm cho headmatter dễ đọc hơn, bạn có thể cài đặt VSCode extension:
Cũng có một định dạng frontmatter khác có thể sử dụng:
Ghi chú
Bạn cũng có thể tạo ghi chú cho người thuyết trình cho mỗi slide. Chúng sẽ hiển thị trong 📖 User Interface để bạn tham khảo trong suốt bài thuyết trình.
Các khối chú thích ở cuối mỗi slide sẽ được coi là ghi chú của slide đó:
---
layout: cover
---
# Slide 1
Đây là trang bìa.
<!-- Đây là một **ghi chú** -->
---
# Slide 2
<!-- Đây KHÔNG phải là ghi chú vì nó không ở cuối trang trình chiếu -->
Trang thứ hai
<!--
Đây là một ghi chú _khác_
-->Cả Markdown cơ bản và HTML đều được hỗ trợ trong ghi chú và sẽ được hiển thị.
Khối code
Một lý do lớn dẫn đến việc tạo ra Slidev là nhu cầu hiển thị code một cách hoàn hảo trong các trang slide. Do đó, bạn có thể sử dụng các khối code theo phong cách Markdown để làm nổi bật code của mình.
```ts
console.log('Hello, World!')
```Slidev tích hợp Shiki như công cụ highlight cú pháp. Tham khảo Cấu hình Shiki để biết thêm chi tiết.
Thông tin thêm về các khối code:
Khối LaTeX
Slidev hỗ trợ các khối LaTeX cho các công thức toán học và hóa học:
Diagrams
Slidev hỗ trợ Mermaid.js và PlantUML để tạo diagrams từ văn bản:
Cú pháp MDC
Cú pháp MDC là cách dễ nhất để áp dụng style và class cho các element:
Scoped CSS
Bạn có thể sử dụng scoped CSS để style cho các slide của mình: