core-syntax.md - slidev

core-syntax.md

1	---
2	name: syntax
3	description: Core Markdown syntax for Slidev presentations
4	---
5
6	# Slidev Markdown Syntax
7
8	Core Markdown syntax for Slidev presentations.
9
10	## Slide Separator
11
12	Use `---` with blank lines before and after:
13
14	```md
15	# Slide 1
16
17	Content
18
19	---
20
21	# Slide 2
22
23	More content
24	```
25
26	## Headmatter (Deck Config)
27
28	First frontmatter block configures the entire deck:
29
30	```md
31	---
32	theme: default
33	title: My Presentation
34	lineNumbers: true
35	---
36
37	# First Slide
38	```
39
40	## Per-Slide Frontmatter
41
42	Each slide can have its own frontmatter:
43
44	```md
45	---
46	layout: center
47	background: /image.jpg
48	class: text-white
49	---
50
51	# Centered Slide
52	```
53
54	## Presenter Notes
55
56	HTML comments at end of slide become presenter notes:
57
58	```md
59	# My Slide
60
61	Content here
62
63	<!--
64	These are presenter notes.
65	- Remember to mention X
66	- Demo the feature
67	-->
68	```
69
70	## Code Blocks
71
72	Standard Markdown with Shiki highlighting:
73
74	````md
75	```ts
76	const hello = 'world'
77	```
78	````
79
80	With features:
81	````md
82	```ts {2,3} // Line highlighting
83	```ts {1\|2-3\|all} // Click-based highlighting
84	```ts {monaco} // Monaco editor
85	```ts {monaco-run} // Runnable code
86	```ts twoslash // TypeScript types
87	```
88	````
89
90	## LaTeX Math
91
92	Inline: `$E = mc^2$`
93
94	Block:
95	```md
96	$$
97	\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
98	$$
99	```
100
101	## Diagrams
102
103	Mermaid:
104	````md
105	```mermaid
106	graph LR
107	A --> B --> C
108	```
109	````
110
111	PlantUML:
112	````md
113	```plantuml
114	@startuml
115	Alice -> Bob : Hello
116	@enduml
117	```
118	````
119
120	## Comark Syntax
121
122	Enable with `comark: true`:
123
124	```md
125	[styled text]{style="color:red"}
126	![](/image.png){width=500px}
127	::component{prop="value"}
128	```
129
130	## Scoped CSS
131
132	Styles apply only to current slide:
133
134	```md
135	# Red Title
136
137	<style>
138	h1 { color: red; }
139	</style>
140	```
141
142	## Import Slides
143
144	```md
145	---
146	src: ./pages/intro.md
147	---
148	```
149
150	Import specific slides:
151	```md
152	---
153	src: ./other.md#2,5-7
154	---
155	```
156

156 lines MARKDOWN