Docs: 更新幻灯片

README.md

@@ -1,3 +1,91 @@
 # online-slide
 
-🧐 基于 Reveal.js 的在线幻灯片
+🧐 基于 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幻灯片演示文稿。