Skip to content

Latest commit

 

History

History
327 lines (249 loc) · 9.43 KB

slides.md

File metadata and controls

327 lines (249 loc) · 9.43 KB
Raw
theme background class highlighter lineNumbers info
seriph
text-center
shiki
false
## Курсовая работа по Slidev Выполнил Гусельников Валентин, ВТиП-402, Торайгыров университет, 2021 г.

Добро пожаловать в Slidev

Слайды презентаций для разработчиков

Нажмите Space чтобы перейти на следующую страницу

Что такое Slidev?

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

  • 📝 Основан на тексте - сосредоточьтесь на содержимом с помощью Markdown, а стилизуйте позже
  • 🎨 Темы - темами можно делиться и использовать с помощью пакетов npm
  • 🧑‍💻 Для разработчиков - подсветка кода, live coding с автодополнением
  • 🤹 Интерактивность - встраивание компонентов Vue для улучшения презентации
  • 🎥 Запись - встроенная запись и просмотр камеры
  • 📤 Портативность - экспорт в PDF, PNG или даже в SPA (Single Page Application)
  • 🛠 Кастомизация - на веб-странице возможно все


Более подробно Почему Slidev?

<style> h1 { background-color: #2B90B6; background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } </style>

layout: image-right image: https://source.unsplash.com/collection/94734566/1920x1080

Код

Используй фрагменты кода и получайте его подсветку!1

interface User {
  id: number
  firstName: string
  lastName: string
  role: string
}

function updateUser(id: number, update: User) {
  const user = getUser(id)
  const newUser = {...user, ...update}  
  saveUser(id, newUser)
}
<style> .footnotes-sep { @apply mt-20 opacity-10; } .footnotes { @apply text-sm opacity-75; } .footnote-backref { display: none; } </style>

Компоненты

Можно использовать Vue компоненты внутри слайдов.

Есть несколько встроенных компонентов, например <Tweet/> и <Youtube/> которые можно использовать сразу. А добавление своих компонентов очень просто.

<Counter :count="10" />

Подробнее в официальной документации.

<Tweet id="1390115482657726468" />

class: px-20

Темы

Slidev поставляется с мощной поддержкой тем. Темы могут предоставлять стили, макеты, компоненты или даже конфигурации для инструментов. Переключение между темами осуществляется всего лишь одной правкой в frontmatter:

---
theme: default
---
---
theme: seriph
---

Читайте подробнее Как использовать тему и посмотрите Галерею тем.

preload: false

Анимации

Анимации осуществляются с помощью @vueuse/motion.

<div
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev
</div>
Slidev
<script setup lang="ts"> const final = { x: 0, y: 0, rotate: 0, scale: 1, transition: { type: 'spring', damping: 10, stiffness: 20, mass: 2 } } </script>

LaTeX

LaTeX поддерживается из коробки благодаря KaTeX.


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

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


Подробнее

Диаграммы

Можно создавать диаграммы / графы из текстового описания прямо в Markdown.

sequenceDiagram
    Алиса->Боб: Привет Боб, как дела?
    Note over Алиса,Боб: Стандартное взаимодействие
Loading 
graph TD
B[Текст] --> C{Решение}
C -->|Один| D[Результат 1]
C -->|Два| E[Результат 2]
Loading

Подробнее

layout: center class: text-center

Ознакомиться подробнее

Документация · GitHub · Примеры

Footnotes

  1. Подробнее ↩