Cette traduction est obsolète, veuillez consulter le document en anglais.
Slidev

Syntaxe de Markdown

Les diapositives sont écrites dans un seul fichier markdown (par défaut ./slides.md).

Vous pouvez utiliser les fonctionnalités Markdown comme vous le feriez normalement, avec le support supplémentaire du HTML intégré et des composants Vue. Le style à l'aide de Windi CSS est également pris en charge. Utilisez --- avec une nouvelle ligne pour séparer vos diapositives.

# Slidev

Hello, World!

---

# Page 2

Utilisez directement des blocs de code pour la mise en évidence

//```ts
console.log('Hello, World!')
//```

---

# Page 3

Vous pouvez directement utiliser les composants Windi CSS et Vue pour styliser et enrichir vos diapositives.

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

Front Matter & Layouts

Vous pouvez spécifier des mises en page et d'autres métadonnées pour chaque diapositive en convertissant les séparateurs en blocs de présentation. Chaque avant-propos commence par un triple tiret et se termine par un autre. Les textes entre eux sont des objets de données au format YAML. Par exemple :

---
layout: cover
---

# Slidev

Ceci est la page de garde.

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

# Page 2

Ceci est une page avec la mise en page «centre» et une image d'arrière-plan.

---

# Page 3

Il s'agit d'une page par défaut sans métadonnées supplémentaires.

Reportez-vous à personnalisations pour plus de détails.

Blocs de code

L'une des principales raisons pour lesquelles je construis Slidev est de faire en sorte que mon code apparaisse parfaitement dans les diapositives. Donc, comme vous vous y attendiez, vous pouvez utiliser le bloc de code aromatisé Markdown pour mettre en évidence votre code.

//```ts
console.log('Hello, World!')
//```

Nous supportons Prism et Shiki en tant que surligneurs de syntaxe. Se référer à la section Surligneurs pour plus de détails.

Mise en évidence de ligne

Pour mettre en évidence des lignes spécifiques, ajoutez simplement des numéros de ligne entre crochets {}. Les numéros de ligne commencent à compter de 1.

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

Pour changer la surbrillance en plusieurs étapes, vous pouvez utiliser | pour les séparer. Par exemple

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

Cela mettra d'abord en évidence a: Ref <number> | number et b: Ref <number> | number, puis return computed (() => unref (a) + unref (b)) après un clic, et enfin, tout le bloc. Pour en savoir plus, consultez le guide des animations de clics.

Pour ignorer la mise en surbrillance des lignes, vous pouvez définir le numéro de ligne sur "0". Par exemple










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

Si le code ne rentre pas dans une diapositive, vous pouvez passer une option maxHeight supplémentaire qui définira une hauteur fixe et activer le défilement


 









//```ts {2|3|7|12} {maxHeight:'100'}
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)
//```

Éditeur Monaco

Chaque fois que vous souhaitez apporter des modifications à la présentation, ajoutez simplement {monaco} après l'identifiant de la langue - cela transforme le bloc en un éditeur Monaco complet!

//```ts {monaco}
console.log('HelloWorld')
//```

En savoir plus sur la configuration de Monaco.

Styles intégrés

Vous pouvez utiliser la balise <style> dans votre Markdown directement pour remplacer les styles de la diapositive actuelle.

# C'est rouge

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

---

# La prochaine diapositive n'est pas affectée

La balise <style> dans Markdown est toujours scoped. Pour avoir des remplacements de style globaux, consultez la section de personnalisation.

Propulsé par Windi CSS, vous pouvez utiliser directement des css imbriqués et des répertoires (par exemple, @apply)

# Slidev

> Hello `world`

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

Assets statiques

Tout comme vous le feriez dans Markdown, vous pouvez utiliser des images pointant vers une URL distante ou locale.

Pour les assets statiques, le vite-plugin-remote-assets intégré les mettra en cache sur le disque à la première exécution afin que vous puissiez avoir un chargement instantané même pour de grandes images plus tard.

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

Pour les ressources locales, placez-les dans le dossier public et référencez-les avec la barre oblique principale.

![Image locale](/pic.png)

Si vous souhaitez appliquer des tailles ou des styles personnalisés, vous pouvez les convertir en balise <img>

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

Remarques

Vous pouvez également prendre des notes pour chaque diapositive. Ils apparaîtront en Mode Présentateur pour que vous puissiez vous y référer pendant les présentations.

Dans Markdown, le dernier bloc de commentaire de chaque diapositive sera traité comme une note.

---
layout: cover
---

# Page 1

Ceci est la page de garde.

<!-- Ceci est une note -->

---

# Page 2

<!-- Ce n'est PAS une note car elle précède le contenu de la diapositive -->

La deuxième page

<!--
Ceci est une autre note
-->

Icônes

Slidev vous permet d'accéder à presque tous les jeux d'icônes open-source populaires directement dans votre markdown. Propulsé par unplugin-icons et Iconify.

Le nom suit la conversion de Iconify {collection-name}-{icon-name}. Par exemple:

Vous pouvez parcourir et rechercher toutes les icônes disponibles avec Icônes.

Icônes de style

Vous pouvez styliser les icônes comme les autres éléments HTML. Par exemple :

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

Emplacements

Disponible depuis v0.18

Certaines mises en page peuvent fournir de multiples points de contributions utilisant Les emplacements nommés de Vue.

Par exemple, dans la mise en page two-cols, vous pouvez avoir deux colonnes à gauche (emplacement par défaut) et à droite (emplacement de droite) côte à côte.

---
layout: two-cols
---

<template v-slot:default>

# Gauche

Cela apparaît sur la gauche

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

# Droite

Cela apparaît sur la droite

</template>

Gauche

Cela apparaît sur la gauche

Droite

Cela apparaît sur la droite

Nous fournissons également une syntaxe abrégée ::name:: pour le nom de l'emplacement. L'exemple suivant fonctionne exactement de la même manière que le précédent.

---
layout: two-cols
---

# Gauche

Cela apparaît sur la gauche

::right::

# Droite

Cela apparaît sur la droite

Vous pouvez également spécifier explicitement l'emplacement par défaut et fournir dans un ordre personnalisé

---
layout: two-cols
---

::right::

# Droite

Cela apparaît sur la droite

::default::

# Gauche

Cela apparaît sur la gauche

Configurations

Toutes les configurations nécessaires peuvent être définies dans le fichier Markdown. Par exemple :

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

# Slidev

Ceci est la page de garde.

En savoir plus sur les configurations frontmatter.

LaTeX

Slidev est livré avec le support LaTeX prêt à l'emploi, alimenté par KaTeX.

Rendu en ligne

Entourez votre LaTeX d'un seul $ de chaque côté pour un rendu en ligne.

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

Block

Utilisez deux ($$) pour le rendu en bloc. Ce mode utilise des symboles plus grands et centre le résultat.

$$
\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}
$$

En savoir plus: Démo | KaTeX | markdown-it-katex

Diagrammes

Vous pouvez également créer des diagrammes / graphiques à partir de descriptions textuelles dans votre Markdown, alimenté par Mermaid.

Les blocs de code marqués comme mermaid seront convertis en digrammes, par exemple :

//```mermaid
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
//```

Vous pouvez en outre lui transmettre un objet d'options pour spécifier la mise à l'échelle et la thématisation. La syntaxe de l'objet est un littéral d'objet JavaScript, vous devrez ajouter des guillemets (`` '') pour les chaînes et utiliser une virgule (,) entre les clés.

//```mermaid {theme: 'neutral', scale: 0.8}
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
//```

En savoir plus: Démo | Mermaid

Entrées multiples

Depuis la version v0.15.0, nous avons livré le support multi-entrées. Cela signifie que vous pouvez diviser votre slides.md en plusieurs fichiers and les organiser comme vous le souhaitez.

Disponible depuis v0.15

Vous pouvez diviser votre slides.md en plusieurs fichiers et les organiser comme vous le souhaitez.

slides.md :

# Page 1

Ceci est une page normale

---
src: ./sous-page2.md
---

<!-- Cette page sera chargée depuis './subpage2.md' -->
Le contenu en ligne sera ignoré

sous-page2.md :

# Page 2

Cette page provient d'un autre fichier

Fusion de frontmatter

Vous pouvez fournir des frontmatters depuis l'entrée principale mais également depuis une page markdown externe. S'il y a les mêmes clés, celles de l'entrée principale ont la priorité la plus élevée. Par exemple

slides.md :

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

cover.md :

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

# Couverture

Page de couverture

Ils finiront par être équivalents à la page suivante :

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

# Couverture

Page de couverture

Réutilisation de la page

Avec la prise en charge des entrées multiples, la réutilisation des pages peut être simple. Par exemple :

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

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

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

---
# réutilisation
src: ./content.md
---