Slidev

Σύνταξη Markdown

Οι διαφάνειες γράφονται μέσα σε ένα ενιαίο αρχείο markdown (εξ ορισμού ./slides.md).

Μπορείτε να χρησιμοποιήσετε τις δυνατότητες του Markdown όπως θα κάνατε κανονικά, με την πρόσθετη υποστήριξη του ενσωματωμένου HTML και των Vue Components. Επίσης υποστηρίζεται styling χρησιμοποιώντας UnoCSS. Χρησιμοποιήστε το --- συνοδευμένο από μια νέα γραμμή για να διαχωρίσετε τις διαφάνειές σας.

# Slidev

Γεια σου, Κόσμε!

---

# Σελίδα 2

Άμεση χρήση code blocks για επισήμανση

//```ts
console.log('Γεια σου, Κόσμε!')
//```

---

# Σελίδα 3

Μπορείτε να χρησιμοποιήσετε απευθείας τα Windi CSS και Vue components
για να διαμορφώσετε και να εμπλουτίσετε τις διαφάνειές σας.

<div class="p-3">
  <Tweet id="20" />
</div>

Front Matter & Layouts

Καθορίστε layouts και άλλα μεταδεδομένα για κάθε διαφάνεια μετατρέποντας τα διαχωριστικά σε front matter blocks. Κάθε frontmatter αρχίζει με μια τριπλή παύλα και τελειώνει με μια άλλη. Τα κείμενα μεταξύ τους είναι objects δεδομένων σε μορφή YAML. Για παράδειγμα:

---
layout: cover
---

# Slidev

Αυτό είναι το εξώφυλλο.

---
layout: center
background: './images/background-1.png'
class: 'text-white'
---​

# Σελίδα 2

Αυτή είναι μια σελίδα με το layout `center` και μια εικόνα φόντου.

---

# Σελίδα 3

Πρόκειται για μια προεπιλεγμένη σελίδα χωρίς πρόσθετα μεταδεδομένα.

Ανατρέξτε στις προσαρμογές για περισσότερες πληροφορίες.

Code Blocks

Ένας μεγάλος λόγος που φτιάχνω το Slidev είναι ότι πρέπει να κάνω τον κώδικά μου να φαίνεται σωστά στις διαφάνειες. Έτσι, όπως ακριβώς περιμένατε, μπορείτε να χρησιμοποιήσετε code block με μορφή Markdown για να επισημάνετε τον κώδικά σας.

//```ts
console.log('Γεια σου, Κόσμε!')
//```

Υποστηρίζουμε και Prism και Shiki ως επισημαντήρες σύνταξης. Ανατρέξτε στην ενότητα επισημαντήρες για περισσότερες πληροφορίες.

Επισήμανση Γραμμής

Για να επισημάνετε συγκεκριμένες γραμμές, απλά προσθέστε τους αριθμούς γραμμών μέσα σε μία αγκύλη {}. Οι αριθμοί γραμμών αρχίζουν να μετρούν από το 1 από προεπιλογή.

//```ts {2,3}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Μπορείτε να ενεργοποιήσετε τον αριθμό γραμμής σε όλες τις διαφάνειες θέτοντας τη ρύθμιση lineNumbers: true στο config ή να το ενεργοποιήσετε σε κάθε μπλοκ κώδικα ξεχωριστά θέτοντας τη ρύθμιση lines:true. Σε περίπτωση που θέλετε να απενεργοποιήσετε την αρίθμηση για ένα συγκεκριμένο μπλοκ όταν ισχύει το lineNumbers: true μπορείτε να ορίσετε το lines:false για το συγκεκριμένο μπλοκ:

//```ts {2,3} {lines:true}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Μπορείτε επίσης να ορίσετε τη γραμμή έναρξης για κάθε μπλοκ κώδικα και να επισημάνετε τις γραμμές ανάλογα, η προεπιλεγμένη τιμή είναι 1:

//```ts {6,7} {lines:true, startLine:5}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Για να αλλάξετε την επισήμανση σε πολλαπλά βήματα, μπορείτε να χρησιμοποιήσετε | για να τα διαχωρίσετε. Για παράδειγμα

//```ts {2-3|5|all}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Αυτό θα επισημάνει πρώτα τα a: Ref<number> | number και b: Ref<number> | number, και μετά return computed(() => unref(a) + unref(b)) μετά από ένα click, και τέλος, ολόκληρο το block. Μάθετε περισσότερα στον οδηγό κινήσεων clicks.

Για να παραλείψετε την επισήμανση οποιασδήποτε γραμμής, μπορείτε να ορίσετε τον αριθμό γραμμής σε 0. Για παράδειγμα










//```ts {0}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
//```

Αν ο κώδικας δεν χωράει σε μία διαφάνεια, μπορείτε να περάσετε μια επιπλέον επιλογή maxHeight που θα ορίσει σταθερό ύψος και θα ενεργοποιήσει το scrolling


 









//```ts {2|3|7|12} {maxHeight:'100px'}
function add(
  a: Ref<number> | number,
  b: Ref<number> | number
) {
  return computed(() => unref(a) + unref(b))
}
/// ...as many lines as you want
const c = add(1, 2)
//```

Monaco Editor

Κάθε φορά που θέλετε να κάνετε κάποια τροποποίηση στην παρουσίαση, απλά προσθέστε {monaco} μετά το αναγνωριστικό γλώσσας - αυτό μετατρέπει το block σε έναν πλήρως εξοπλισμένο Monaco editor!

//```ts {monaco}
console.log('ΓειαΣουΚόσμε')
//```

Μάθετε περισσότερα για την ρύθμιση Monaco.

Monaco diff

Το Monaco μπορεί επίσης να δημιουργήσει ένα diff μεταξύ δύο μπλοκ κώδικα. Χρησιμοποιήστε {monaco-diff} για να μετατρέψετε το μπλοκ σε diff Monaco editor και χρησιμοποιήστε ~~~ για να διαχωρίσετε την αρχική και την τροποποιημένη έκδοση του κώδικα!

//```ts {monaco-diff}
Η γραμμή αυτή αφαιρείται στα δεξιά.
λίγο κείμενο
abcd
efgh
Λίγο ακόμα κείμενο
~~~
λίγο κείμενο
abcz
zzzzefgh
Λίγο ακόμα κείμενο.
Η γραμμή αυτή αφαιρείται στα αριστερά.
//```

Ενσωματωμένα Styles

Μπορείτε να χρησιμοποιήσετε την ετικέτα <style> στο Markdown σας απευθείας για να παρακάμψετε τα styles για την τρέχουσα διαφάνεια.

# Αυτό είναι Κόκκινο

<style>
h1 {
  color: red
}
</style>

---

# Η επόμενη διαφάνεια δεν επηρεάζεται

Η ετικέτα <style> στο Markdown είναι πάντα περιορισμένη. Ως αποτέλεσμα, ένας selector με το child combinator (.a > .b) είναι άχρηστος ως έχει; δείτε τον προηγούμενο σύνδεσμο. Για να έχετε global style overrides, δείτε την ενότητα προσαρμογής.

Με την βοήθεια του UnoCSS, μπορείτε να χρησιμοποιήσετε άμεσα εμφωλευμένα css και οδηγίες (π.χ. @apply)

# Slidev

> Γεια σου `κόσμε`

<style>
blockquote {
  code {
    @apply text-teal-500 dark:text-teal-400;
  }
}
</style>

Στατικά Assets

Ακριβώς όπως θα κάνατε σε markdown, μπορείτε να χρησιμοποιήσετε εικόνες από μια απομακρυσμένη ή τοπική διεύθυνση URL.

Για τα απομακρυσμένα assets, το ενσωματωμένο vite-plugin-remote-assets θα τα αποθηκεύσει στη μνήμη cache στο δίσκο κατά την πρώτη εκτέλεση, ώστε να μπορείτε να έχετε άμεση φόρτωση ακόμα και για μεγάλες εικόνες αργότερα.

![Remote Image](https://sli.dev/favicon.png)

Για τοπικά assets, τοποθετήστε τα στο φάκελο public και αναφερθείτε σε αυτά με slash από μπροστά.

![Local Image](/pic.png)

Αν θέλετε να εφαρμόσετε προσαρμοσμένα μεγέθη ή styles, μπορείτε να τα μετατρέψετε σε ετικέτα <img>

<img src="/pic.png" class="m-40 h-40 rounded shadow" />

Σημειώσεις

Μπορείτε επίσης να κρατάτε σημειώσεις για κάθε διαφάνεια. Θα εμφανίζονται στη Λειτουργία Παρουσιαστή για να μπορείτε να ανατρέχετε σε αυτές κατά τη διάρκεια των παρουσιάσεων.

Σε Markdown, το τελευταίο block σχολίων σε κάθε διαφάνεια θα αντιμετωπίζεται ως σημείωση.

---
layout: cover
---

# Σελίδα 1

Αυτό είναι το εξώφυλλο.

<!-- Αυτή είναι μια σημείωση -->

---

# Σελίδα 2

<!-- Αυτή ΔΕΝ είναι σημείωση, διότι προηγείται του περιεχομένου της διαφάνειας. -->

Αυτή είναι η δεύτερη σελίδα

<!--
Αυτή είναι μια άλλη σημείωση
-->

Εικονίδια

Το Slidev σας επιτρέπει να έχετε πρόσβαση σε σχεδόν όλα τα δημοφιλή σύνολα εικονιδίων ανοιχτού κώδικα απευθείας στο markdown σας. Με την βοήθεια του unplugin-icons και του Iconify.

Η ονομασία ακολουθεί τη μετατροπή του Iconify {collection-name}-{icon-name}. Για παράδειγμα:

Περιηγηθείτε και αναζητήστε όλα τα εικονίδια που είναι διαθέσιμα με το Icônes.

Μορφοποίηση Εικονιδίων

Μπορείτε να διαμορφώσετε τα εικονίδια όπως και τα άλλα στοιχεία HTML. Για παράδειγμα:

<uim-rocket />
<uim-rocket class="text-3xl text-red-400 mx-2" />
<uim-rocket class="text-3xl text-orange-400 animate-ping" />

Slots

Διαθέσιμο από v0.18

Ορισμένα layouts μπορούν να παρέχουν πολλαπλά σημεία συμβολής χρησιμοποιώντας τα named slots του Vue.

Για παράδειγμα, στο two-cols layout, μπορείτε να έχετε δύο στήλες αριστερά (default slot) και δεξιά (right slot) δίπλα-δίπλα.

---
layout: two-cols
---

<template v-slot:default>

# Αριστερά

Αυτό εμφανίζεται στα αριστερά

</template>
<template v-slot:right>

# Δεξιά

Αυτό εμφανίζεται στα δεξιά

</template>

Αριστερά

Αυτό εμφανίζεται στα αριστερά

Δεξιά

Αυτό εμφανίζεται στα δεξιά

Παρέχουμε επίσης μια συντόμευση σύνταξης ::name:: για το όνομα του slot. Το ακόλουθο παράδειγμα λειτουργεί ακριβώς όπως και το προηγούμενο.

---
layout: two-cols
---

# Αριστερά

Αυτό εμφανίζεται στα αριστερά

::right::

# Δεξιά

Αυτό εμφανίζεται στα δεξιά

Μπορείτε επίσης να καθορίσετε ρητά το προεπιλεγμένο slot και να το παρέχετε σε προσαρμοσμένη σειρά

---
layout: two-cols
---

::right::

# Δεξιά

Αυτό εμφανίζεται στα δεξιά

::default::

# Αριστερά

Αυτό εμφανίζεται στα αριστερά

Ρυθμίσεις

Όλες οι ρυθμίσεις που απαιτούνται μπορούν να οριστούν στο αρχείο Markdown. Για παράδειγμα:

---
theme: seriph
layout: cover
background: 'https://source.unsplash.com/1600x900/?nature,water'
---

# Slidev

Αυτό είναι το εξώφυλλο.

Μάθετε περισσότερα για τις ρυθμίσεις frontmatter.

LaTeX

Το Slidev έρχεται με ενσωματωμένη υποστήριξη για LaTeX, με τη βοήθεια του KaTeX.

Γραμμική

Περιβάλλετε το LaTeX σας με ένα απλό $ σε κάθε πλευρά για γραμμική απεικόνιση.

$\sqrt{3x-1}+(1+x)^2$

Block

Χρησιμοποιήστε δύο ($$) για απεικόνιση block. Αυτή η λειτουργία χρησιμοποιεί μεγαλύτερα σύμβολα και κεντράρει το αποτέλεσμα.

$$
\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}
$$

Μάθετε περισσότερα: Demo | KaTeX | markdown-it-katex

Επισήμανση γραμμής LaTeX

Διαθέσιμο από v0.43.1

Για να επισημάνετε συγκεκριμένες γραμμές, απλά προσθέστε τους αριθμούς γραμμών μέσα στην αγκύλη {}. Οι αριθμοί γραμμών αρχίζουν να μετρούν από το 1 από προεπιλογή.

$$ {1|3|all}
\begin{array}{c}
\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\
\nabla \cdot \vec{\mathbf{B}} & = 0
\end{array}
$$

Διαγράμματα

Μπορείτε επίσης να δημιουργήσετε διαγράμματα / γραφήματα από περιγραφές κειμένου στο Markdown σας, με τη βοήθεια του Mermaid.

Τα code blocks που χαρακτηρίζονται ως mermaid θα μετατρέπονται σε διαγράμματα, για παράδειγμα:

//```mermaid
sequenceDiagram
  Αλίκη->Γιάννης: Γεια σου Γιάννη, τι κάνεις;
  Σημείωση για την Αλίκη, Γιάννη: Μια τυπική επικοινωνία
//```

Μπορείτε επίσης να του περάσετε ένα object επιλογών για να καθορίσετε την κλιμάκωση και τη θεματοποίηση. Η σύνταξη του object είναι ένα JavaScript object literal, θα πρέπει να προσθέσετε εισαγωγικά (') για τα strings και να χρησιμοποιήσετε κόμμα (,) μεταξύ κλειδιών.

//```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Κείμενο] --> C{Απόφαση}
C -->|Ένα| D[Αποτέλεσμα 1]
C -->|Δύο| E[Αποτέλεσμα 2]
//```

Μάθετε περισσότερα: Demo | Mermaid

Πολλαπλές Είσοδοι

Διαθέσιμο από v0.15

Μπορείτε να χωρίσετε το slides.md σας σε πολλαπλά αρχεία και να τα οργανώσετε όπως θέλετε.

slides.md :

# Σελίδα 1

Αυτή είναι μια κανονική σελίδα

---
src: ./subpage2.md
---

<!-- αυτή η σελίδα θα φορτωθεί από το './subpage2.md' -->
Το γραμμικό υλικό θα αγνοηθεί

subpage2.md :

# Σελίδα 2

Αυτή η σελίδα είναι από ένα άλλο αρχείο

Συγχώνευση Frontmatter

Μπορείτε να παρέχετε frontmatters τόσο από την κύρια είσοδό σας όσο και από εξωτερικές σελίδες markdown. Εάν υπάρχουν τα ίδια κλειδιά σε αυτές, αυτά από την κύρια είσοδο έχουν μεγαλύτερη προτεραιότητα. Για παράδειγμα

slides.md :

---
src: ./cover.md
background: https://sli.dev/bar.png
class: text-center
---

cover.md :

---
layout: cover
background: https://sli.dev/foo.png
---

# Εξώφυλλο

Σελίδα Εξωφύλλου

Θα καταλήξουν να είναι ισοδύναμα της επόμενης σελίδας:

---
layout: cover
background: https://sli.dev/bar.png
class: text-center
---

# Εξώφυλλο

Σελίδα Εξωφύλλου

Επαναχρησιμοποίηση Σελίδων

Με την υποστήριξη πολλαπλών εισόδων, η επαναχρησιμοποίηση σελίδων είναι απλή. Για παράδειγμα:

---
src: ./cover.md
---

---
src: ./intro.md
---

---
src: ./content.md
---

---
# επαναχρησιμοποίηση
src: ./content.md
---

Σύνταξη MDC

Διαθέσιμο από v0.43.0

Το Slidev έχει πειραματική υποστήριξη για την MDC (Markdown Components) Σύνταξη που υποστηρίζεται από το markdown-it-mdc.

Μπορείτε να την ενεργοποιήσετε προσθέτοντας mdc: true στο frontmatter του αρχείου markdown σας.

---
mdc: true
---

Αυτό είναι ένα [κόκκινο κείμενο]{style="color:red"} :inline-component{prop="value"}

![](/image.png){width=500px lazy}

::block-component{prop="value"}
Η **προκαθορισμένη** υποδοχή
::

Μάθετε περισσότερα για τη σύνταξη.