Cú pháp Markdown
Slide được viết trong một file markdown duy nhất (theo mặc định là ./slides.md).
Bạn có thể sử dụng các tính năng Markdown như bình thường, với sự hỗ trợ bổ sung của các component HTML và Vue. Tạo style bằng Windi CSS cũng được hỗ trợ. Sử dụng dấu --- được đệm bằng một dòng mới để tách các slide của bạn.
# Slidev
Hello, World!
---
# Page 2
Directly use code blocks for highlighting
//```ts
console.log('Hello, World!')
//```
---
# Page 3
You can directly use Windi CSS and Vue components to style and enrich your slides.
<div class="p-3">
<Tweet id="20" />
</div>
Front Matter & Layout
Bạn có thể chỉ định layout và siêu dữ liệu khác cho mỗi slide bằng cách chuyển đổi các dấu phân cách thành khối front matter. Mỗi front matter bắt đầu bằng dấu ba gạch ngang và kết thúc bằng dấu gạch ngang khác. Văn bản giữa chúng là các đối tượng dữ liệu ở định dạng YAML. Ví dụ:
---
layout: cover
---
# Slidev
This is the cover page.
---
layout: center
background: './images/background-1.png'
class: 'text-white'
---
# Page 2
This is a page with the layout `center` and a background image.
---
# Page 3
This is a default page without any additional metadata.
Tham khảo customization để biết thêm chi tiết.
Code Blocks
Một lý do lớn mà tôi xây dựng Slidev là làm cho code của tôi trông vừa phải trong các slide. Vì vậy, đúng như bạn mong đợi, bạn có thể sử dụng khối code Markdown để làm nổi bật code của mình.
//```ts
console.log('Hello, World!')
//```
Đánh dấu dòng
Để đánh dấu các dòng cụ thể, chỉ cần thêm số dòng trong dấu ngoặc nhọn {}. Số dòng bắt đầu đếm từ 1.
//```ts {2,3}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
//```
Để thay đổi vùng đánh dấu trong nhiều bước, bạn có thể sử dụng dấu | để tách chúng. Ví dụ
//```ts {2-3|5|all}
function add(
a: Ref<number> | number,
b: Ref<number> | number
) {
return computed(() => unref(a) + unref(b))
}
//```
Đầu tiên, điều này sẽ làm nổi bật a: Ref<number> | number và b: Ref<number> | number, và sau đó là return computed(() => unref(a) + unref(b)) sau một cú nhấp chuột, và cuối cùng là toàn bộ khối. Tìm hiểu thêm trong hướng dẫn về animation click.
Trình soạn thảo Monaco
Bất cứ khi nào bạn muốn thực hiện một số sửa đổi trong bản trình bày, chỉ cần thêm {monaco} sau ngôn ngữ id - nó biến khối thành một trình soạn thảo Monaco đầy đủ tính năng!
//```ts {monaco}
console.log('HelloWorld')
//```
Tìm hiểu thêm về configuring Monaco.
Embedded Styles
Bạn có thể sử dụng thẻ <style> trong Markdown của mình trực tiếp để ghi đè các kiểu cho slide hiện tại.
# This is Red
<style>
h1 {
color: red
}
</style>
---
# Next slide is not affected
Thẻ <style> trong Markdown luôn scoped. TĐể ghi đè kiểu toàn cục, hãy xem phần tùy chỉnh.
Được cung cấp bởi Windi CSS, bạn có thể sử dụng trực tiếp css và directives lồng nhau (ví dụ: @apply)
# Slidev
> Hello `world`
<style>
blockquote {
code {
@apply text-teal-500 dark:text-teal-400;
}
}
</style>
Lưu ý
Bạn cũng có thể ghi chú cho mỗi slide. Chúng sẽ hiển thị ở Chế độ trình bày để bạn tham khảo trong khi thuyết trình.
Trong Markdown, khối comment cuối cùng trong mỗi slide sẽ được coi là ghi chú.
---
layout: cover
---
# Page 1
This is the cover page.
<!-- This is a note -->
---
# Page 2
<!-- This is NOT a note because it precedes the content of the slide -->
The second page
<!--
This is another note
-->
Icons
Slidev cho phép bạn có quyền truy cập vào hầu hết tất cả các bộ icon mã nguồn mở phổ biến trực tiếp trong markdown của bạn. Được cung cấp bởi vite-plugin-icons và Iconify.
Việc đặt tên theo chuyển đổi của Iconify {collection-name}-{icon-name}. Ví dụ:
<mdi-account-circle />- từ Material Design Icons<carbon-badge />- từ Carbon<uim-rocket />- từ Unicons Monochrome<twemoji-cat-with-tears-of-joy />- từ Twemoji<logos-vue />- từ SVG Logos- Và nhiều hơn nữa...
Bạn có thể duyệt và tìm kiếm tất cả các icon có sẵn với Icônes.
Styling Icons
Bạn có thể tạo kiểu cho các icon giống như các element HTML khác. Ví dụ:
<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />
Slots
Có hiệu lực từ v0.18
Một số layout có thể cung cấp nhiều điểm đóng góp bằng cách sử dụng slot được đặt tên của Vue.
Ví dụ, trong two-cols layout, bạn có thể có hai cột bên trái (default slot) và bên phải (right slot) cạnh nhau.
---
layout: two-cols
---
<template v-slot:default>
# Left
This shows on the left
</template>
<template v-slot:right>
# Right
This shows on the right
<template>
Left
This shows on the left
Right
This shows on the right
Chúng tôi cũng cung cấp cú pháp viết tắt ::name:: cho tên vị trí. Ví dụ sau hoạt động giống hệt như ví dụ trước.
---
layout: two-cols
---
# Left
This shows on the left
::right::
# Right
This shows on the right
Bạn cũng có thể chỉ định rõ ràng vị trí mặc định và cung cấp theo thứ tự tùy chỉnh
---
layout: two-cols
---
::right::
# Right
This shows on the right
::default::
# Left
This shows on the left
Cấu hình
Tất cả các cấu hình cần thiết có thể được xác định trong tệp Markdown. Ví dụ:
---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---
# Slidev
This is the cover page.
Tìm hiểu thêm về cấu hình frontmatter.
LaTeX
Slidev đi kèm với hỗ trợ LaTeX bên ngoài, được cung cấp bởi KaTeX.
Inline
Bao quanh LaTeX của bạn với một ký tự $ duy nhất ở mỗi bên để hiển thị trong một dòng.
$\sqrt{3x-1}+(1+x)^2$
Block
Sử dụng hai ($$) để hiển thị khối. Chế độ này sử dụng các ký hiệu lớn hơn và căn giữa kết quả.
$$
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$
Tìm hiểu thêm: Demo | KaTeX | markdown-it-katex
Diagrams
Bạn cũng có thể tạo sơ đồ / đồ thị từ mô tả bằng văn bản trong Markdown của mình, được cung cấp bởi Mermaid.
Code block được đánh dấu là mermaid sẽ được chuyển đổi thành digram, ví dụ:
//```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
//```
Bạn có thể chuyển thêm một đối tượng tùy chọn cho nó để chỉ định tỷ lệ và chia tỷ lệ. Cú pháp của đối tượng là một đối tượng JavaScript theo nghĩa đen, bạn sẽ cần thêm dấu nháy (') cho các chuỗi và sử dụng dấu phẩy (,) giữa các khóa.
//```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
//```
Multiple Entries
Có hiệu lực từ v0.15
Bạn có thể chia slides.md của mình thành nhiều file và sắp xếp chúng theo ý muốn.
slides.md :
# Page 1
This is a normal page
---
src: ./subpage2.md
---
<!-- this page will be loaded from './subpage2.md' -->
Inline content will be ignored
subpage2.md :
# Page 2
This page is from another file
Frontmatter Merging
Bạn có thể cung cấp frontmatters từ cả mục nhập chính và các trang markdown pages. bên ngoài. Nếu có các khóa giống nhau trong chúng, thì những khóa từ mục nhập chính có mức độ ưu tiên cao hơn. Ví dụ
slides.md :
---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---
cover.md :
---
layout: cover
background: https://sli.dev/foo.png
---
# Cover
Cover Page
They will end up being equivalent of the following page:
---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---
# Cover
Cover Page
Page Reusing
With the multi-entries support, reusing pages could be straightforward. For example:
---
src: ./cover.md
---
---
src: ./intro.md
---
---
src: ./content.md
---
---
# reuse
src: ./content.md
---