theme | class | highlighter | lineNumbers | routerMode | drawings | transition | mdc | |
---|---|---|---|---|---|---|---|---|
default |
content-end text-left |
shiki |
false |
hash |
|
slide-left |
true |
Document presentation report
Slidev是一个为开发人员设计的幻灯片制作和演示器,包括以下功能
- 📝 Text-based - 将重点放在Markdown的内容上,然后再对它们进行样式化
- 🎨 Themable - 主题可以与NPM包共享和使用
- 🧑💻 Developer Friendly - 代码高亮显示,实时编码与自动完成
- 🤹 Interactive - 嵌入Vue组件来增强表达式
- 🎥 Recording - 内置录音和相机视图
- 📤 Portable - 导出为PDF, png,甚至可托管的SPA
- 🛠 Hackable - 网页上任何可能的东西
阅读更多关于为什么使用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>Toc组件可以自动生成目录表,了解更多
<Toc minDepth="1" maxDepth="1"></Toc>
将鼠标悬停在左下角以查看导航的控制面板, learn more
right / space | next animation or slide |
left / shiftspace | previous animation or slide |
up | previous slide |
down | next slide |
Here!
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)
}
您可以直接在幻灯片中使用Vue组件。
我们提供了一些内置组件,如 <Tweet/>
和 <Youtube/>
您可以直接使用。添加自定义组件也非常容易。
<Counter :count="10" />
Check out the guides for more.
<Tweet id="1390115482657726468" />
Slidev具有强大的主题支持。主题可以为工具提供样式、布局、组件甚至配置。在主题之间切换只需one edit在你的frontmatter:
Animations are powered by @vueuse/motion.
<div
v-motion
:initial="{ x: -80 }"
:enter="{ x: 0 }">
Slidev
</div>
LaTeX is supported out-of-box powered by KaTeX.
Inline
Block $$ {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中从文本描述创建图表/图形。
sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction
graph TD
B[Text] --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectivness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
@startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
@enduml