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 5

Cá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:

✨ VS Code Extension

Editor

Help you better organize your slides and have a quick overview of them.

Cũng có một định dạng frontmatter khác có thể sử dụng:

✨ Block Frontmatter

Syntax

Use a YAML code block as the frontmatter.

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.