online-slide

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

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

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

基本语法

1. 幻灯片分隔：

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

2. 基本示例：

## 第一张幻灯片
这是第一张幻灯片的内容

---

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

高级功能

1. 外部Markdown文件： 在HTML中使用data-markdown属性加载外部文件：

   <section data-markdown="markdown.md" 
            data-separator="^\n\n\n" 
            data-separator-vertical="^\n\n">
   </section>
   

2. 代码高亮：

   ```javascript [1|3-5]
   function example() {
       console.log("Hello");
       return true;
   }
   

3. 元素属性：

   - 项目1 <!-- .element: class="fragment" data-fragment-index="2" -->
   - 项目2 <!-- .element: class="fragment" data-fragment-index="1" -->
   

4. 幻灯片属性：

   <!-- .slide: data-background="#000000" -->
   ## 幻灯片标题
   

5. 图片插入：

   ![Alt文本](图片URL)
   

6. 数学公式：

   $$
   \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幻灯片演示文稿。