Slidev

Markdown синтаксис

Слайды описываются в одном markdown-файле (по умолчанию ./slides.md).

Вы можете использовать обычный Markdown, с дополнительной поддержкой встроенного HTML и Vue-компонентов. Также поддерживается стилизация с использованием Windi CSS. Используйте --- с добавлением новой строки для разделения слайдов.

# Slidev

Привет, мир!

---

# Page 2

Использование блоков кода для подсветки

//```ts
console.log('Привет, мир!')
//```

---

# Page 3

Вы можете напрямую использовать Windi CSS и Vue-компоненты для стилизации и улучшения своих слайдов.

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

Front Matter и Шаблоны

Укажите макеты и другие метаданные для каждого слайда, преобразовав разделители в front matter блоки. Каждый frontmatter блок начинается с тройного тире и заканчивается ими же. Тексты между ними представляют собой объекты данных в формате YAML. Например:

---
layout: cover
---

# Slidev

Это титульная страница.

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

# Page 2

Это страница с макетом `center` и фоновым изображением.

---

# Page 3

Это дефолтная страниц без каких-либо дополнительных метаданных.

Подробная информация описана на странице кастомизации.

Блоки кода

Одна из главных причин, по которой я создала Slidev – это то, что мой код должен хорошо выглядеть на слайдах. Так, как вы и ожидали, вы можете использовать блоки кода 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))
}
//```

Чтобы изменить выделение в несколько шагов, вы можете использовать | для их разделения. Например

//```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)) после одного клика, и наконец, весь блок. Подробнее в руководстве анимации по кликам.

Monaco редактор

Всякий раз, когда вы хотите внести какие-либо изменения в презентацию, просто добавьте {monaco} после указания языка подсветки - это превратит блок в полнофункциональный Monaco редактор!

//```ts {monaco}
console.log('ПриветМир')
//```

Подробнее в конфигурации Monaco.

Встроенные стили

Вы можете использовать тег <style> напрямую в Markdown, чтобы переопределить стили для текущего слайда.

# Это красный заголовок

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

---

# На следующем слайде стили заголовка останутся прежними

Тег <style> в Markdown всегда является scoped. Чтобы изменить глобальные стили, прочтите раздел кастомизации.

Работая с Windi CSS, вы можете напрямую использовать вложенные CSS и directives (например, @apply)

# Slidev

> Привет, `мир`

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

Статические ресурсы

Как и в случае с markdown, вы можете вставлять изображения, использующие удаленный или локальный URL.

Для удаленных ресурсов встроенный vite-plugin-remote-assets кэширует их на диск при первом запуске, поэтому позже у вас будет мгновенная загрузку даже для больших изображений.

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

Для локальных ресурсов поместите их в папку public и укажите их через ведущий слэш.

![Local Image](/pic.png)

Если вы хотите применить кастомные размеры или стили, вы можете вставить их через <img> тег

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

Заметки

Вы также можете делать заметки для каждого слайда. Они будут отображаться в Режиме презентации, чтобы вы могли ссылаться на них во время презентаций.

В Markdown последний блок комментария в каждом слайде будет считаться как примечание.

---
layout: cover
---

# Страница 1

Это титульная страница.

<!-- Это заметка -->

---

# Страница 2

<!-- Это НЕ заметка, потому что стоит перед содержанием слайда. -->

Это вторая страница

<!--
А это другая заметка
-->

Иконки

Slidev позволяет вам получить доступ практически ко всем популярным наборам иконок с открытым исходным кодом прямо в вашем markdown. Работает это через vite-plugin-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" />

Слоты

Доступны с версии v0.18

Некоторые шаблоны могут предоставлять несколько дополнительных точек, используя именованные слоты Vue.

Например, в шаблоне two-cols у вас может быть два столбца рядом, левый (default слот) и правый (right слот).

---
layout: two-cols
---

<template v-slot:default>

# Левый

Это отобразится слева

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

# Правый

Это отобразится справа

</template>

Левый

Это отобразится слева

Правый

Это отобразится справа

Мы также предоставляем сокращённый синтаксический сахар ::name:: для имени слота. Следующий пример работает точно так же, как и предыдущий.

---
layout: two-cols
---

# Левый

Это отобразится слева

::right::

# Правый

Это отобразится справа

Вы также можете явно указать слот по умолчанию и в произвольном порядке

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

Блок

Используйте 2 ($$) для блочного рендеринга. В этом режиме используются более крупные символы и результат центрируется.

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

Подробнее: Демо | KaTeX | markdown-it-katex

Диаграммы

Вы также можете создавать диаграммы / графики из текстовых описаний в вашем Markdown, используя Mermaid.

Блоки кода, помеченные как mermaid, будут преобразованы в диаграммы, например:

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

Кроме того, вы можете передать ему объект параметров, чтобы указать масштабирование и тему. Синтаксис объекта - это литерал объекта JavaScript, вам нужно будет добавить кавычки (') для строк и использовать запятую (,) между ключами.

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

Подробнее: Демо | 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
---