You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: guide/syntax.md
+84-26Lines changed: 84 additions & 26 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -67,32 +67,35 @@ class: 'text-white'
67
67
68
68
Ανατρέξτε στις [προσαρμογές](/custom/) για περισσότερες πληροφορίες.
69
69
70
-
> The custom syntax might not be compactible with some formatters like Prettier. To improve that, we also support using a direct `yaml` code block to define the frontmatter:
71
-
>
72
-
> ~~~markdown
73
-
> ---
74
-
> layout: cover
75
-
> ---
76
-
>
77
-
> # Slidev
78
-
>
79
-
> This is the cover page.
80
-
>
81
-
> ---
82
-
>
83
-
> ```yaml
84
-
> # The first yaml block will be treated as the frontmatter of that slide
85
-
> layout: center
86
-
> background: './images/background-1.png'
87
-
> class: 'text-white'
88
-
> ```
89
-
>
90
-
> # Page 2
91
-
>
92
-
> This is a page with the layout `center` and a background image.
93
-
> ~~~
94
-
>
95
-
> (Available since v0.44.0)
70
+
### Prettier Support
71
+
72
+
> Available since v0.44
73
+
74
+
The custom syntax might not be compactible with some formatters like Prettier.
75
+
You can either install the [Prettier Plugin](/guide/editors#prettier-plugin) or use a direct `yaml` code block to define the frontmatter instead:
76
+
77
+
~~~markdown
78
+
---
79
+
layout: cover
80
+
---
81
+
82
+
# Slidev
83
+
84
+
This is the cover page.
85
+
86
+
---
87
+
88
+
```yaml
89
+
# The first yaml block will be treated as the frontmatter of that slide
90
+
layout: center
91
+
background: './images/background-1.png'
92
+
class: 'text-white'
93
+
```
94
+
95
+
# Page 2
96
+
97
+
This is a page with the layout `center` and a background image.
98
+
~~~
96
99
97
100
## Code Blocks
98
101
@@ -183,7 +186,13 @@ const c = add(1, 2)
183
186
184
187
### Ενσωμάτωση TwoSlash
185
188
189
+
<<<<<<< HEAD
186
190
Αυτή η λειτουργία είναι διαθέσιμη μόνο όταν [θέτετε το `highlighter` σε `shiki`](/custom/highlighters)
191
+
=======
192
+
> Available since v0.46
193
+
194
+
This feature is only available when you [set `highlighter` to `shiki`](/custom/highlighters)
195
+
>>>>>>> e8054222645741a1f15a6138c2b0b6a091fb43a1
187
196
188
197
Το [TwoSlash](https://www.typescriptlang.org/dev/twoslash/) είναι ένα ισχυρό εργαλείο για την απεικόνιση μπλοκ κώδικα TypeScript με πληροφορίες τύπων κατά την αιώρηση ή inlined. Είναι αρκετά χρήσιμο για την προετοιμασία διαφανειών για θέματα σχετικά με JavaScript/TypeScript.
189
198
@@ -207,6 +216,33 @@ const count = ref(0)
207
216
// ^?
208
217
```
209
218
219
+
<!-- For the popup to not to overlap the content below -->
220
+
<divclass="py-20" />
221
+
222
+
### Shiki Magic Move
223
+
224
+
> Available since v0.48
225
+
226
+
Shiki Magic Move enables you to have granular transition between code changes like Keynote's Magic Move. You can check [this demo](https://shiki-magic-move.netlify.app/) to see how it works.
227
+
228
+
In Slidev, we bind it to the [clicks system](/guide/animations#click-animations). The syntax is wrap multiple code blocks representing each steps with <code>````md magic-move</code> (mind it's **4** backticks), this will be transformed into one code block, that morphing to each steps as you click.
229
+
230
+
~~~~md
231
+
````md magic-move
232
+
```ts
233
+
console.log(`Step ${1}`)
234
+
```
235
+
```ts
236
+
console.log(`Step ${1 + 1}`)
237
+
```
238
+
```ts
239
+
console.log(`Step ${3}`)
240
+
```
241
+
````
242
+
~~~~
243
+
244
+
<!-- TODO: add an inline demo -->
245
+
210
246
### Monaco Editor
211
247
212
248
Κάθε φορά που θέλετε να κάνετε κάποια τροποποίηση στην παρουσίαση, απλά προσθέστε `{monaco}` μετά το αναγνωριστικό γλώσσας - αυτό μετατρέπει το block σε έναν πλήρως εξοπλισμένο Monaco editor!
@@ -327,7 +363,21 @@ layout: cover
327
363
-->
328
364
~~~
329
365
366
+
<<<<<<< HEAD
330
367
## Εικονίδια
368
+
=======
369
+
Basic Markdown and HTML are also supported in notes on Presenter renderering.
370
+
371
+
### Click Markers
372
+
373
+
> Available since v0.48
374
+
375
+
For some slides you might have longer notes that might be hard to find where you are looking at, we introduced the click markers that allows highlighting and auto-scrolling to the section of notes of your corresponding content. Put `[click]` markers in your notes for the timming you need to go to another [click](/guide/animations#click-animations), Slidev divide the content between the click markers and highlight them in presenter notes, synchronized with your slide progress.
376
+
377
+
<!-- TODO: add a video -->
378
+
379
+
## Icons
380
+
>>>>>>> e8054222645741a1f15a6138c2b0b6a091fb43a1
331
381
332
382
Το Slidev σας επιτρέπει να έχετε πρόσβαση σε σχεδόν όλα τα δημοφιλή σύνολα εικονιδίων ανοιχτού κώδικα **απευθείας** στο markdown σας μετά την εγκατάσταση του αντίστοιχου πακέτου. Με την βοήθεια του [`unplugin-icons`](https://github.com/antfu/unplugin-icons) και του [Iconify](https://iconify.design/).
333
383
@@ -444,6 +494,7 @@ layout: two-cols
444
494
<<< @/snippets/snippet.js
445
495
```
446
496
497
+
<<<<<<< HEAD
447
498
:::tip
448
499
Η τιμή του `@` αντιστοιχεί στο root directory του πακέτου σας. Συνιστάται να τοποθετείτε τα αποσπάσματα στο `@/snippets`, για λόγους συμβατότητας με τον επεξεργαστή Monaco. Εναλλακτικά, μπορείτε επίσης να εισάγετε από relative paths.
The value of `@` corresponds to the source root, the directory where the `slides.md` is located.
523
+
:::
524
+
525
+
This feature is vendored from VitePress, learn more about it in [VitePress's documentation](https://vitepress.dev/guide/markdown#import-code-snippets).
0 commit comments