# online-slide

🧐 基于 Reveal.js 的在线幻灯片

# 如何使用Markdown撰写slide（幻灯片）

根据对Reveal.js框架的分析，以下是使用Markdown创建幻灯片的完整指南：

## 基本语法

1. **幻灯片分隔**：
   - 使用H2标题（##）分隔幻灯片
   - 也可以使用三个连字符（---）分隔幻灯片
   - 使用两个连字符（--）分隔垂直幻灯片

2. **基本示例**：
```markdown
## 第一张幻灯片
这是第一张幻灯片的内容

---

## 第二张幻灯片
这是第二张幻灯片的内容
```

## 高级功能

1. **外部Markdown文件**：
   在HTML中使用data-markdown属性加载外部文件：
   ```html
   <section data-markdown="markdown.md" 
            data-separator="^\n\n\n" 
            data-separator-vertical="^\n\n">
   </section>
   ```

2. **代码高亮**：
   ```markdown
   ```javascript [1|3-5]
   function example() {
       console.log("Hello");
       return true;
   }
   ```
   ```

3. **元素属性**：
   ```markdown
   - 项目1 <!-- .element: class="fragment" data-fragment-index="2" -->
   - 项目2 <!-- .element: class="fragment" data-fragment-index="1" -->
   ```

4. **幻灯片属性**：
   ```markdown
   <!-- .slide: data-background="#000000" -->
   ## 幻灯片标题
   ```

5. **图片插入**：
   ```markdown
   ![Alt文本](图片URL)
   ```

6. **数学公式**：
   ```markdown
   $$
   \begin{aligned}
   \dot{x} & = \sigma(y-x) \\
   \dot{y} & = \rho x - y - xz \\
   \dot{z} & = -\beta z + xy
   \end{aligned}
   $$
   ```

## 配置选项

- `data-separator`：定义幻灯片分隔符的正则表达式
- `data-separator-vertical`：定义垂直幻灯片分隔符的正则表达式
- `data-separator-notes`：定义备注分隔符的正则表达式

## 实现细节

Reveal.js的Markdown插件（plugin/markdown/plugin.js）支持：
- 外部Markdown文件加载
- 自定义分隔符
- 代码高亮和行号
- 元素和幻灯片属性
- 内容转义和安全处理

通过这些功能，您可以创建功能丰富的Markdown幻灯片演示文稿。