91 lines
2.0 KiB
Markdown
91 lines
2.0 KiB
Markdown
# 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
|
||
|
||
```
|
||
|
||
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幻灯片演示文稿。 |