slides.md - slidev

slides.md

1	# Page 1
2
3	Hello World
4
5	---
6
7	# Page 2
8
9	```html
10	<style>
11	p {
12	color: red;
13	}
14	</style>
15	```
16
17	`<p>` should have a green border, but no red text
18
19	<style>
20	p {
21	border: 1px solid green;
22	}
23	</style>
24
25	---
26	src: sub/page1.md
27	---
28
29	This will be ignored
30
31	---
32	src: sub/page2.md
33	background: https://sli.dev/demo-cover.png
34	---
35
36	---
37
38	# Page 5
39
40	```html
41	<div>{{$slidev.nav.currentPage}}</div>
42	```
43
44	Current Page: {{$slidev.nav.currentPage}}
45
46	---
47
48	# Page 6
49
50	<v-clicks>
51
52	- A
53	- B
54	- C
55
56	</v-clicks>
57
58	<v-clicks>
59
60	1. C
61	2. B
62	3. A
63
64	</v-clicks>
65
66	---
67
68	# Page 7
69
70	$$
71	\begin{aligned}
72	\frac{D \boldsymbol{v}}{D t}=&-\frac{1}{\rho} \operatorname{grad} p+\frac{\mu}{\rho} \Delta \boldsymbol{v}+\frac{\lambda+\mu}{\rho} \operatorname{grad} \Theta+\frac{\Theta}{\rho} \operatorname{grad}(\lambda+\mu) \\
73	&+\frac{1}{\rho} \operatorname{grad}(\boldsymbol{v} \cdot \operatorname{grad} \mu)+\frac{1}{\rho} \operatorname{rot}(\boldsymbol{v} \times \operatorname{grad} \mu)-\frac{1}{\rho} \boldsymbol{v} \Delta \mu+\boldsymbol{g}
74	\end{aligned}
75	$$
76
77	---
78	layout: two-cols
79	---
80
81	::right::
82
83	# Right
84
85	<b>Right</b>
86
87	:: default ::
88
89	# Left
90
91	Left
92
93	---
94
95	# Page 9
96
97	<div class="cy-content">
98	<div v-click="3">A</div>
99	<div v-click="2">B</div>
100	<div v-click="1">C</div>
101	<div v-click.hide="4">D</div>
102	<v-click hide><div>E</div></v-click>
103	</div>
104
105	---
106
107	# Page 10
108
109	<div class="cy-content-hide">
110	<div v-click-hide>A</div>
111	<div v-click-hide>B</div>
112	<div v-click>C</div>
113	<div v-click-hide>D</div>
114	</div>
115
116	---
117
118	# Page 11
119
120	<div class="cy-depth">
121	<v-clicks depth="3">
122
123	- A
124	- B
125	- C
126	- D
127	- E
128	- F
129	- G
130	- H
131	- I
132
133	</v-clicks>
134
135	<v-clicks>
136
137	- J
138	- K
139	- L
140
141	</v-clicks>
142	</div>
143
144	---
145
146	# Page 12
147
148	<v-clicks>
149	<ul><li>A</li><li>B</li></ul>
150	</v-clicks>
151
152	<wrap-in-clicks>
153	<ul><li>A</li><li>B</li></ul>
154	</wrap-in-clicks>
155
156	<wrap-in-clicks>
157
158	- A
159	- B
160
161	</wrap-in-clicks>
162
163	---
164
165	# Page 13
166
167	<div class="cy-wrapdecorate">
168	<wrap-in-clicks-decorate>
169	<li>E</li>
170	<li>F</li>
171	</wrap-in-clicks-decorate>
172
173	(the next is kept for a future patch but not animating the nesting)
174
175	<wrap-in-component-in-clicks>
176	<li>step i</li>
177	<li>step j</li>
178	</wrap-in-component-in-clicks>
179	</div>
180
181	---
182
183	# Page 14
184
185	<div class="cy-animation-presets">
186	<div v-click.fade.up>fade-up</div>
187	<div v-click.scale>scale</div>
188	<div v-click.none>none</div>
189	</div>
190
191	---
192	clickAnimation: fade down
193	---
194
195	# Page 15
196
197	<div class="cy-animation-frontmatter">
198	<div v-click>from-frontmatter</div>
199	</div>
200
201	---
202	clickAnimation: foo
203	---
204
205	# Page 16
206
207	<div class="cy-animation-hierarchy">
208	<div v-click>frontmatter-invalid-foo</div>
209	<div v-click.fade.right>modifier-overrides-frontmatter</div>
210	<div v-click.none>modifier-none-overrides-frontmatter</div>
211	<div v-click.scale>modifier-scale-overrides-frontmatter</div>
212	</div>
213

213 lines MARKDOWN