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
+71-46Lines changed: 71 additions & 46 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
71
+
72
+
> Διαθέσιμο από v0.44
73
+
74
+
Η προσαρμοσμένη σύνταξη ενδέχεται να μην είναι συμβατή με ορισμένους formatters όπως το Prettier.
75
+
Μπορείτε είτε να εγκαταστήσετε το [Prettier Plugin](/guide/editors#prettier-plugin) είτε να χρησιμοποιήσετε απευθείας ένα μπλοκ κώδικα `yaml` για να ορίσετε το frontmatter:
76
+
77
+
~~~markdown
78
+
---
79
+
layout: cover
80
+
---
81
+
82
+
# Slidev
83
+
84
+
Αυτό είναι το εξώφυλλο.
85
+
86
+
---
87
+
88
+
```yaml
89
+
# Το πρώτο μπλοκ yaml θα θεωρηθεί ως το frontmatter αυτής της διαφάνειας
90
+
layout: center
91
+
background: './images/background-1.png'
92
+
class: 'text-white'
93
+
```
94
+
95
+
# Σελίδα 2
96
+
97
+
Αυτή είναι μια σελίδα με τη διάταξη `center` και μια εικόνα φόντου.
98
+
~~~
96
99
97
100
## Code Blocks
98
101
@@ -183,6 +186,8 @@ const c = add(1, 2)
183
186
184
187
### Ενσωμάτωση TwoSlash
185
188
189
+
> Διαθέσιμο από v0.46
190
+
186
191
Αυτή η λειτουργία είναι διαθέσιμη μόνο όταν [θέτετε το `highlighter` σε `shiki`](/custom/highlighters)
187
192
188
193
Το [TwoSlash](https://www.typescriptlang.org/dev/twoslash/) είναι ένα ισχυρό εργαλείο για την απεικόνιση μπλοκ κώδικα TypeScript με πληροφορίες τύπων κατά την αιώρηση ή inlined. Είναι αρκετά χρήσιμο για την προετοιμασία διαφανειών για θέματα σχετικά με JavaScript/TypeScript.
@@ -207,6 +212,33 @@ const count = ref(0)
207
212
// ^?
208
213
```
209
214
215
+
<!-- Για να μην επικαλύπτει το popup το παρακάτω περιεχόμενο -->
216
+
<divclass="py-20" />
217
+
218
+
### Shiki Magic Move
219
+
220
+
> Διαθέσιμο από v0.48
221
+
222
+
Το Shiki Magic Move σας επιτρέπει να έχετε λεπτομερή μετάβαση μεταξύ των αλλαγών κώδικα όπως το Magic Move του Keynote. Μπορείτε να παρακολουθήσετε [αυτό το demo](https://shiki-magic-move.netlify.app/) για να δείτε πώς λειτουργεί.
223
+
224
+
Στο Slidev, το συνδέουμε με το [σύστημα clicks](/guide/animations#κινησεις-click). Η σύνταξη είναι να τυλίξετε πολλαπλά μπλοκ κώδικα που αντιπροσωπεύουν κάθε βήμα με <code>````md magic-move</code> (προσέξτε ότι είναι **4** backticks), αυτό θα μετατραπεί σε ένα μπλοκ κώδικα, που μεταμορφώνεται σε κάθε βήμα καθώς κάνετε click.
225
+
226
+
~~~~md
227
+
````md magic-move
228
+
```ts
229
+
console.log(`Βήμα ${1}`)
230
+
```
231
+
```ts
232
+
console.log(`Βήμα ${1 + 1}`)
233
+
```
234
+
```ts
235
+
console.log(`Βήμα ${3}`)
236
+
```
237
+
````
238
+
~~~~
239
+
240
+
<!-- TODO: add an inline demo -->
241
+
210
242
### Monaco Editor
211
243
212
244
Κάθε φορά που θέλετε να κάνετε κάποια τροποποίηση στην παρουσίαση, απλά προσθέστε `{monaco}` μετά το αναγνωριστικό γλώσσας - αυτό μετατρέπει το block σε έναν πλήρως εξοπλισμένο Monaco editor!
@@ -327,6 +359,16 @@ layout: cover
327
359
-->
328
360
~~~
329
361
362
+
Υποστηρίζονται επίσης οι απλές γλώσσες Markdown και HTML στις σημειώσεις κατά την απεικόνιση στην λειτουργία παρουσιαστή.
363
+
364
+
### Δείκτες Click
365
+
366
+
> Διαθέσιμο από v0.48
367
+
368
+
Για ορισμένες διαφάνειες που μπορεί να έχετε μεγαλύτερες σημειώσεις που ενδέχεται να είναι δύσκολο να βρείτε το σημείο που ψάχνετε, δημιουργήσαμε τους δείκτες click που επιτρέπουν την επισήμανση και την αυτόματη κύλιση στο τμήμα των σημειώσεων του αντίστοιχου περιεχομένου σας. Βάλτε δείκτες `[click]` στις σημειώσεις σας για το χρονοδιάγραμμα που χρειάζεστε για να μεταβείτε σε ένα άλλο [click](/guide/animations#κινησεις-click), το Slidev χωρίζει το περιεχόμενο μεταξύ των δεικτών click και τα επισημαίνει στις σημειώσεις του παρουσιαστή, συγχρονισμένα με την πρόοδο της διαφάνειάς σας.
369
+
370
+
<!-- TODO: add a video -->
371
+
330
372
## Εικονίδια
331
373
332
374
Το Slidev σας επιτρέπει να έχετε πρόσβαση σε σχεδόν όλα τα δημοφιλή σύνολα εικονιδίων ανοιχτού κώδικα **απευθείας** στο markdown σας μετά την εγκατάσταση του αντίστοιχου πακέτου. Με την βοήθεια του [`unplugin-icons`](https://github.com/antfu/unplugin-icons) και του [Iconify](https://iconify.design/).
@@ -444,28 +486,11 @@ layout: two-cols
444
486
<<< @/snippets/snippet.js
445
487
```
446
488
447
-
:::tip
448
-
Η τιμή του `@` αντιστοιχεί στο root directory του πακέτου σας. Συνιστάται να τοποθετείτε τα αποσπάσματα στο `@/snippets`, για λόγους συμβατότητας με τον επεξεργαστή Monaco. Εναλλακτικά, μπορείτε επίσης να εισάγετε από relative paths.
489
+
:::tip
490
+
Η τιμή του `@` αντιστοιχεί στο root της πηγής σας, τον φάκελο όπου βρίσκεται το αρχείο `slides.md`.
449
491
:::
450
492
451
-
Μπορείτε επίσης να χρησιμοποιήσετε μια [περιοχή VS Code](https://code.visualstudio.com/docs/editor/codebasics#_folding) για να συμπεριλάβετε μόνο το αντίστοιχο τμήμα του αρχείου κώδικα:
452
-
453
-
```md
454
-
<<< @/snippets/snippet.js#region-name
455
-
```
456
-
457
-
Για να καθορίσετε ρητά τη γλώσσα του εισαγόμενου κώδικα, μπορείτε να προσθέσετε ένα αναγνωριστικό γλώσσας μετά:
458
-
459
-
```md
460
-
<<< @/snippets/snippet.js ts
461
-
```
462
-
463
-
Υποστηρίζονται επίσης οποιεσδήποτε λειτουργίες μπλοκ κώδικα όπως [επισήμανση γραμμής](#επισημανση-γραμμης) και [Monaco editor](#monaco-editor):
Αυτή η λειτουργία προσφέρεται από το VitePress, μάθετε περισσότερα γι' αυτό στις [οδηγίες του VitePress](https://vitepress.dev/guide/markdown#import-code-snippets).
0 commit comments