syntax.md - slidev

syntax.md

1	---
2	outline: deep
3	---
4
5	# Syntax Guide
6
7	Slidev's slides are written as Markdown files, which are called Slidev Markdowns. A presentation has a Slidev Markdown as its entry, which is `./slides.md` by default, but you can change it by passing the file path as an argument to [the CLI commands](../builtin/cli).
8
9	In a Slidev Markdown, not only [the basic Markdown features](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) can be used as usual, Slidev also provides additional features to enhance your slides. This section covers the syntax introduced by Slidev. Please make sure you know the basic Markdown syntax before reading this guide.
10
11	## Slide Separators {#slide-separators}
12
13	Use `---` padded with a new line to separate your slides.
14
15	````md {5,15}
16	# Title
17
18	Hello, Slidev!
19
20	---
21
22	# Slide 2
23
24	Use code blocks for highlighting:
25
26	```ts
27	console.log('Hello, World!')
28	```
29
30	---
31
32	# Slide 3
33
34	Use UnoCSS classes and Vue components to style and enrich your slides:
35
36	<div class="p-3">
37	<Tweet id="..." />
38	</div>
39	````
40
41	## Frontmatter & Headmatter {#frontmatter}
42
43	At the beginning of each slide, you can add an optional [frontmatter](https://jekyllrb.com/docs/front-matter/) to configure the slide. The first frontmatter block is called headmatter and can configure the whole slide deck. The rest are frontmatters for individual slides. Texts in the headmatter or the frontmatter should be an object in [YAML](https://www.cloudbees.com/blog/yaml-tutorial-everything-you-need-get-started/) format. For example:
44
45	<!-- eslint-skip -->
46
47	```md {1-4,10-14,26-28}
48	---
49	theme: seriph
50	title: Welcome to Slidev
51	---
52
53	# Slide 1
54
55	The frontmatter of this slide is also the headmatter
56
57	---
58	layout: center
59	background: /background-1.png
60	class: text-white
61	---
62
63	# Slide 2
64
65	A page with the layout `center` and a background image
66
67	---
68
69	# Slide 3
70
71	A page without frontmatter
72
73	---
74	src: ./pages/4.md # This slide only contains a frontmatter
75	---
76
77	---
78
79	# Slide 5
80	```
81
82	Configurations you can set are described in the [Slides deck configurations](/custom/#headmatter) and [Per slide configurations](/custom/#frontmatter) sections.
83
84	To make the headmatter more readable, you can install the VSCode extension:
85
86	<LinkCard link="features/vscode-extension" />
87
88	Also, there is another possible frontmatter format:
89
90	<LinkCard link="features/block-frontmatter" />
91
92	## Notes {#notes}
93
94	You can also create presenter notes for each slide. They will show up in <LinkInline link="guide/ui#presenter-mode" /> for you to reference during presentations.
95
96	The comment blocks at the end of each slide are treated as the note of the slide:
97
98	```md {9,19-21}
99	---
100	layout: cover
101	---
102
103	# Slide 1
104
105	This is the cover page.
106
107	<!-- This is a note -->
108
109	---
110
111	# Slide 2
112
113	<!-- This is NOT a note because it is not at the end of the slide -->
114
115	The second page
116
117	<!--
118	This is _another_ note
119	-->
120	```
121
122	Basic Markdown and HTML are also supported in notes and will be rendered.
123
124	<SeeAlso :links="[
125	'features/click-marker',
126	]" />
127
128	## Code Blocks {#code-block}
129
130	One big reason that led to the creation of Slidev was the need to perfectly display code in slides. Consequently, you can use Markdown-flavored code blocks to highlight your code.
131
132	````md
133	```ts
134	console.log('Hello, World!')
135	```
136	````
137
138	Slidev has [Shiki](https://github.com/shikijs/shiki) built in as the syntax highlighter. Refer to [Configure Shiki](/custom/config-highlighter) for more details.
139
140	More about code blocks:
141
142	<LinkCard link="features/code-block-line-numbers" />
143	<LinkCard link="features/code-block-max-height" />
144	<LinkCard link="features/line-highlighting" />
145	<LinkCard link="features/monaco-editor" />
146	<LinkCard link="features/monaco-run" />
147	<LinkCard link="features/monaco-write" />
148	<LinkCard link="features/shiki-magic-move" />
149	<LinkCard link="features/twoslash" />
150	<LinkCard link="features/import-snippet" />
151	<LinkCard link="features/code-groups" />
152
153	## LaTeX Blocks {#latex-block}
154
155	Slidev supports LaTeX blocks for mathematical and chemical formulas:
156
157	<LinkCard link="features/latex" />
158
159	## Diagrams {#diagrams}
160
161	Slidev supports [Mermaid](https://mermaid.js.org/) and [PlantUML](https://plantuml.com/) for creating diagrams from text:
162
163	<LinkCard link="features/mermaid" />
164	<LinkCard link="features/plantuml" />
165
166	## Comark Syntax {#comark-syntax}
167
168	Comark Syntax is the easiest way to apply styles and classes to elements:
169
170	<LinkCard link="features/comark" />
171
172	## Scoped CSS {#scoped-css}
173
174	You can use scoped CSS to style your slides:
175
176	<LinkCard link="features/slide-scope-style" />
177
178	## Importing Slides {#importing-slides}
179
180	<LinkCard link="features/importing-slides" />
181

181 lines MARKDOWN