全栈攻城狮

Appearance

Markdown 语法基础 ​

Slidev 的幻灯片内容全部是标准 Markdown，额外约定少量特殊语法用于分页与配置。掌握这一章即可写出第一份可用的演示文稿。

幻灯片分隔符 --- ​

Slidev 用三个连续的短横线（---）分隔幻灯片，每个分隔符之间的内容构成一张幻灯片。

markdown
# 第一张幻灯片

内容...

---

# 第二张幻灯片

内容...

---

# 第三张幻灯片

内容...
  • 每张幻灯片之间用 --- 分隔，独立成行
  • --- 之后的内容属于下一张幻灯片
  • 文件开头的 Frontmatter 与第一张幻灯片之间也要用 --- 分隔

Frontmatter 配置 ​

slides.md 顶部以 --- 包裹的 YAML 块称为 Frontmatter（Slidev 中常称为 Headmatter），用于配置整份演示文稿的全局选项：

yaml
---
theme: seriph            # 主题
layout: default          # 默认布局
title: 我的演示          # 文档标题（显示于浏览器标签页）
info: 一段描述信息
lineNumbers: true        # 代码块显示行号
transition: slide-left   # 幻灯片切换动画
colorSchema: auto        # 颜色模式：light / dark / auto
fonts:
  sans: Noto Sans SC     # 字体配置
---

# 第一张幻灯片

常用配置项：

配置项作用
theme主题名称，决定整体视觉风格
layout默认布局（default / center / cover 等）
title / titleTemplate页面标题与模板
info附加描述信息
lineNumbers代码块是否显示行号
highlighter代码高亮引擎（shiki / prism）
transition全局幻灯片切换效果
colorSchema亮色 / 暗色 / 跟随系统
fonts自定义字体（sans / serif / mono）
defaults所有幻灯片的默认 Frontmatter

单页配置（页级 Frontmatter） ​

除了文件开头的全局配置，每张幻灯片都可以携带自己的 Frontmatter：在分隔符后、内容前用 --- 包裹一份 YAML，只对该页生效。

markdown
# 全局主题下的第一页

---

---
layout: center            # 仅本页使用 center 布局
transition: fade          # 仅本页使用 fade 过渡
---

# 居中展示的标题

---

# 回到默认布局的第三页

优先级：页级 Frontmatter 覆盖全局 Frontmatter。

YAML 格式要点 ​

Frontmatter 使用 YAML 语法，注意以下约定：

  • 键值对：key: value，冒号后必须有一个空格
  • 字符串：一般可不加引号；含特殊字符（如 #、:）时用引号包裹
  • 布尔值：true / false
  • 数字：直接写数值
  • 嵌套对象：缩进表示层级（如 fonts: 下的 sans:）
  • 数组：- 元素 列表形式
yaml
---
title: 配置示例
lineNumbers: true
transition: fade
fonts:
  sans: Noto Sans SC
  mono: Fira Code
defaults:
  layout: center
---

第一份 Slidev 幻灯片示例 ​

综合上述语法，一份最小的完整演示文稿：

markdown
---
theme: seriph
title: 入门演示
lineNumbers: true
---

# 开场

这是第一张幻灯片。

---

---
layout: center
---

# 居中标题

使用 `layout: center` 让内容垂直水平居中。

---

## 收尾

- 用 `---` 分页
- 用 Frontmatter 配置
- 保存即可热更新

启动 slidev 后可以看到三张幻灯片依次切换，这就是一个可运行的最小 Slidev 演示。

常用 Markdown 能力 ​

Slidev 支持完整 CommonMark 语法，并在渲染上做了增强：

语法说明
# 到 ######标题层级（也是幻灯片内章节标题）
**加粗** *斜体* ~~删除线~~文本样式
- / 1.无序 / 有序列表
[链接](url)超链接（点击跳转）
![描述](图片路径)图片
> 引用引用块
`code`行内代码
表格管道符绘制表格
任务列表- [x] 已完成

这些能力与普通 Markdown 一致，配合幻灯片分页即构成 Slidev 的内容基础。