# Remark.js Slides 使用指南

### 完整参考手册

---

## 目录

---

# 一、基础语法

---

## 创建幻灯片

使用三个横线 `---` 分隔每一页

---

# 第二页
内容...
```
]

---

## 增量显示

使用两个横线 `--` 逐步显示内容：

- 第一点先显示

- 第二点点击后出现

- 第三点继续点击

```markdown
- 第一点
--
- 第二点 (点击后显示)
```

---

# 二、快捷键

---

## 快捷键：导航

| 按键 | 功能 |
|------|------|
| `→` `↓` `Space` | 下一页 |
| `←` `↑` | 上一页 |
| `Home` | 第一页 |
| `End` | 最后一页 |
| `数字 + Enter` | 跳转到指定页 |

---

## 快捷键：功能

| 按键 | 功能 |
|------|------|
| `O` | 概览模式 (显示所有幻灯片缩略图) |
| `P` | 演示者模式 (显示备注和计时器) |
| `C` | 克隆窗口 (双屏演示用) |
| `F` | 全屏模式 |
| `B` | 黑屏 (暂停演示) |
| `M` | 镜像模式 |

---

# 三、图片排版

---

## 图片：宏语法 (推荐)

最简洁的方式：

```markdown
![:img 50%](photo.png)

![:img-center 60%](photo.png)

![:img-left 30%](photo.png)
环绕文字...

![:img-right 30%](photo.png)
环绕文字...
```

---

## 图片：快捷类

使用 CSS 类包裹：

```markdown
.img-center[![](photo.png)]

---

## 图片：尺寸类

可用的尺寸类：

| 类名 | 宽度 |
|------|------|
| `.img-25` | 25% |
| `.img-33` | 33% |
| `.img-50` | 50% |
| `.img-66` | 66% |
| `.img-75` | 75% |
| `.img-full` | 100% |

组合使用：`.img-left.img-50[![](photo.png)]`

---

## 图片：完整类组合

精细控制，适合复杂布局：

```markdown
.float-left.width-33.pr-sm[![](photo.png)]
环绕的文字内容...

.block-middle.width-50[![](photo.png)]

.float-right.width-25.pl-sm[![](photo.png)]
```

---

# 四、布局系统

---

## 布局：pull-left / pull-right

左右各占 47%：

```markdown
.pull-left[左栏内容]
.pull-right[右栏内容]
```

---

## 布局：column-2 / column-3

自动分栏：

```markdown
.column-2[
第一栏内容...

第二栏内容...
]

第二栏...

第三栏...
]
```

无分隔线：`.column-2.column-norule[...]`

---

## 布局：Border Layout

五区域布局，适合复杂页面：

```markdown
class: border-layout

.north.height-15[顶部区域]
.west.width-20[左侧边栏]
.east.width-20[右侧边栏]
.b-center[中心内容区]
.south.height-10[底部区域]
```

使用 `.height-N` 和 `.width-N` 控制大小 (N = 1-100)

---

# 五、代码展示

---

## 代码：语法高亮

支持多种语言：

```typescript
interface User {
  name: string;
  age: number;
}
```

```python
def hello(name):
    print(f"Hello, {name}!")
```

---

## 代码：行高亮

在行首加 `*` 号高亮该行：

```javascript
function hello() {
* console.log('这行会高亮');
  return true;
}
```

代码块自动添加复制按钮，鼠标悬停显示。

---

# 六、Mermaid 图表

---

## Mermaid：流程图

```html
<div class="mermaid">
graph LR
  A[开始] --> B{判断}
  B -->|是| C[执行]
  B -->|否| D[结束]
</div>
```

<div class="mermaid">
graph LR
  A[开始] --> B{判断}
  B -->|是| C[执行]
  B -->|否| D[结束]
</div>

---

## Mermaid：时序图

```html
<div class="mermaid">
sequenceDiagram
  Client->>Server: 请求
  Server-->>Client: 响应
</div>
```

<div class="mermaid">
sequenceDiagram
  participant C as Client
  participant S as Server
  C->>S: Request
  S-->>C: Response
</div>

---

## Mermaid：其他图表

支持的图表类型：

- `graph` / `flowchart` - 流程图
- `sequenceDiagram` - 时序图
- `classDiagram` - 类图
- `stateDiagram` - 状态图
- `erDiagram` - ER 图
- `gantt` - 甘特图
- `pie` - 饼图

---

# 七、主题与样式

---

# 浅色主题

`class: nord-light`

---

## 页面类：主题

```markdown
class: nord-dark, center, middle

# 深色主题标题
```

```markdown
class: nord-light, center, middle

# 浅色主题标题
```

---

## 页面类：布局

| 类名 | 效果 |
|------|------|
| `center` | 水平居中 |
| `middle` | 垂直居中 |
| `nord-dark` | 深色主题 |
| `nord-light` | 浅色主题 |
| `pangujs` | 中英文自动空格 |
| `wrap-title` | 标题智能换行 |
| `scale-title` | 标题响应式缩放 |

---

# 八、文本样式

---

## 文本：对齐

```markdown
.left[左对齐文本]
.center[居中文本]
.right[右对齐文本]
```

---

## 文本：强调

| 语法 | 效果 |
|------|------|
| `.hl[高亮]` | .hl[黄色高亮] |
| `.keyword[关键词]` | .keyword[粉色强调] |
| `.text-success[成功]` | .text-success[绿色] |
| `.text-warning[警告]` | .text-warning[橙色] |
| `.text-error[错误]` | .text-error[红色] |
| `.text-info[信息]` | .text-info[蓝色] |
| `.text-muted[弱化]` | .text-muted[灰色] |

---

## 文本：字体大小

| 类名 | 大小 |
|------|------|
| `.font-xs` | 超小 |
| `.font-sm` | 小 |
| `.font-md` | 中 (默认) |
| `.font-lg` | 大 |
| `.font-xl` | 超大 |
| `.font-xxl` | 特大 |

`.letter-spacing-20[增加字间距]`

---

# 九、表格样式

---

## 表格：基础

```markdown
.st.st-hline[
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
]
```

.st.st-hline[
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
]

---

## 表格：变体

| 类名 | 效果 |
|------|------|
| `.st-hline` | 水平线 |
| `.st-vline` | 垂直线 |
| `.st-allline` | 全边框 |
| `.noborder` | 无边框 |

可组合：`.st.st-allline.font-sm[...]`

---

# 十、视频与 iframe

---

## 嵌入视频

```markdown
![:video 100%, 400](demo.mp4)
```

或 HTML 方式：

```html
<video width="100%" height="400" controls>
  <source src="demo.mp4" type="video/mp4">
</video>
```

---

## 嵌入网页

```markdown
![:iframe 100%, 400](https://example.com)
```

或 HTML 方式：

```html
<iframe src="https://example.com"
        width="100%" height="400"
        frameborder="0">
</iframe>
```

---

# 十一、模板与备注

---

## 命名幻灯片

```markdown
name: intro

# 介绍页
基础内容...
```

其他页面可以引用：

```markdown
template: intro

### 追加内容
在 intro 页基础上追加...
```

---

## 演示者备注

在 `???` 之后的内容只在演示者模式显示：

```markdown
# 标题

这是观众看到的内容

???

这是演示者备注：
- 提醒自己要说的要点
- 时间控制提示
```

按 `P` 键进入演示者模式查看。

---

# 十二、长标题处理

---

## 长标题：智能换行

使用 `wrap-title` 类，标题会美观换行：

```markdown
class: wrap-title

# 这是一个很长的标题会自动换行
```

使用 CSS `text-wrap: balance` 均匀分配。

---

## 长标题：响应式缩放

使用 `scale-title` 类，字体随视口缩放：

```markdown
class: scale-title

# 标题字体会根据屏幕大小调整
```

使用 CSS `clamp()` 函数。

---

# 速查表

---

## 速查：图片

```markdown
# 宏语法
![:img 50%](a.png)
![:img-center 60%](a.png)
![:img-left 30%](a.png)
![:img-right 30%](a.png)

# 类语法
.img-center[![](a.png)]
.img-left.img-50[![](a.png)]
.pull-left[![](a.png)]
```

---

## 速查：布局

```markdown
# 两栏
.pull-left[...]
.pull-right[...]

# 分栏
.column-2[...]
.column-3[...]

# 五区域
class: border-layout
.north[...] .south[...]
.west[...] .east[...]
.b-center[...]
```

---

## 速查：快捷键

| 按键 | 功能 |
|------|------|
| `O` | 概览模式 |
| `P` | 演示者模式 |
| `C` | 克隆窗口 |
| `F` | 全屏 |
| `B` | 黑屏 |
| `Esc` | 退出概览 |

---

## 速查：页面类

```markdown
class: center, middle
class: nord-dark
class: nord-light
class: pangujs
class: wrap-title
class: scale-title
class: border-layout
```

---

# Happy Presenting!

按 `O` 查看所有幻灯片概览

按 `P` 进入演示者模式