# Руководство

# Введение

Slidev ^{(slide + dev, произносится /slʌɪdɪv/)} – это веб-приложение для создания и презентации слайдов. Предназначен для разработчиков, которые сосредоточены на написании контента в Markdown, в то же время используя HTML и Vue-компоненты для реализации pixel-perfect шаблонов и дизайна со встроенными интерактивными демо в ваши презентации.

Slidev использует многофункциональный markdown-файл для создания красивых слайдов с мгновенной перезагрузкой, а также множество встроенных интеграций, таких как live-кодинг, экспорт PDF, запись презентаций и т.д. Поскольку он работает через интернет, вы можете делать с Slidev всё что угодно — возможности безграничны.

Вы можете узнать больше о создании проекта на странице Почему Slidev.

# Особенности

• 📝 Markdown-based - используйте свои любимые редакторы и рабочие процессы
• 🧑‍💻 Удобство разработки - встроенная подсветка кода, live-кодинг, и т.д.
• 🎨 Темизация - темы могут распространяться и использоваться через npm-пакеты
• 🌈 Стилизация - благодаря Windi CSS очень просто работать со стилями
• 🤹 Интерактивность - плавное встраивание Vue-компонентов
• 🎙 Режим докладчика - используйте другое окно или даже телефон для управления слайдами
• 🧮 LaTeX - встроенная поддержка LaTeX математических уравнений
• 📰 Диаграммы - создание диаграмм с текстовым описанием
• 🌟 Иконки - доступ к иконкам напрямую из любого набора иконок
• 💻 Редакторы - встроенные редакторы и расширения для VS Code
• 🎥 Запись - встроенная запись и просмотр камеры
• 📤 Портативность - экспорт в PDF, PNGs, или даже в hostable SPA
• ⚡️ Скорость - мгновенная перезагрузка благодаря Vite
• 🛠 Расширяемость - использование Vite плагинов, Vue-компонентов, либо других npm-пакетов

# Технический стек

Slidev разработан благодаря набору этих инструментов и технологий.

• Vite - Чрезвычайно быстрый инструмент frontend разработки.
• Vue 3 на основе Markdown - Фокусировка на контенте, при этом используя всю мощность HTML и Vue компонентов в любом месте.
• Windi CSS - CSS-фреймворк на основе utility-классов, позволяет легко стилизовать слайды.
• Prism, Shiki, Monaco Editor - Первоклассная поддержка фрагментов кода с возможностью live-кодинг.
• RecordRTC - Встроенная запись и просмотр камеры.
• VueUse - Набор @vueuse/core, @vueuse/head, @vueuse/motion, и т.д.
• Iconify - Коллекция иконок.
• KaTeX - Математический рендеринг LaTeX.
• Mermaid - Текстовые диаграммы.

# Создание вашей первой презентации

Через NPM:

$ npm init slidev

Через Yarn:

$ yarn create slidev

Следуйте инструкциям и начните создавать слайды прямо сейчас! Подробнее о markdown-синтаксисе читайте в руководстве о синтаксисе.

# Command Line Interface

В проекте, где установлен Slidev, вы можете использовать бинарную версию slidev в своих npm-скриптах.

{
  "scripts": {
    "dev": "slidev", // запуск dev севера
    "build": "slidev build", // билд SPA для production
    "export": "slidev export" // экспорт слайдов в pdf
  }
}

В противном случае вы можете использовать npx

$ npx slidev

Запустите slidev --help для просмотра дополнительный опций.

# Markdown синтакс

Slidev считывает ваш slides.md файл в корне проекта и конвертирует его в файлы. Всякий раз, когда вы вносите в него изменения, содержание слайдов будет моментально обновлено. Например:

# Slidev

Привет, мир!

---

# Страница 2

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

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

---

# Страница 3

Подробнее о Markdown синтаксисе Slidev читайте в руководстве по синтаксису.