reveal-md
# 介绍
reveal-md (opens new window) 是一个制作幻灯片的工具，基于 reveal.js 框架 (opens new window)构建，使用轻量级标记语言 Markdown 来编写幻灯片。它专为程序员打造，可以制作出专业而炫酷的幻灯片。reveal-md 具有以下几个优点：
- 简单易学的 Markdown 语法：使用 Markdown 语法可以制作出和 reveal.js 框架相媲美的幻灯片，而 Markdown 语法相对于复杂的 HTML 语言更加简单易学，即使没有复杂的前端技能，也可以制作出专业而炫酷的幻灯片。
- 高度的可扩展性：在制作幻灯片的过程中，reveal-md 仍然支持使用 HTML 语言作为补充，以便制作符合要求的幻灯片。
# 使用方法
请参考 reveal-md (opens new window) 学习全部使用方法。这里只提供一些 Tartarus 常用的功能和一些不太熟悉的功能，作为备忘使用。
- 使用 YAML Front matter 来指定制作 Slides 过程中的全局选项：
---
title: XXX # 设置 Slides HTML 页面的标签
separator: <!--s--> # 使用该符号作为不同 Slides 页面的水平分隔符
verticalSeparator: <!--v--> # 使用该符号作为不同 Slides 页面的垂直分隔符
theme: simple # 使用 reveal-md 提供的 simple 主题
highlightTheme: github # 使用 Github 中的代码高亮
css: custom.css # 自定义的用于存放 Slides 格式相关内容的 CSS 文件
revealOptions:
transition: 'slide' # 转场效果使用 slide
transitionSpeed: fast # 转场速度为快速
center: false
slideNumber: "c/t" # 显示当前页码和总页码
width: 1000
---
2
3
4
5
6
7
8
9
10
11
12
13
14
- 注意 YAML 文件中可以更改的 revealOptions 见 reveal.js config (opens new window)。
使用方法
N / SPACE：下一页
P / Shift SPACE：上一页
← / H：翻到左边页面
→ / L：翻到右边页面
↑ / K：翻到上边页面
↓ / J：翻到下边页面
B /.：暂停（黑屏）
F：全屏
ESC / O：显示概览
S：打开演讲者窗口添加 custom 的 script 和 css
javascript 和 css 是使得网页能够多样化显示的关键所在。因此 revel-md 框架本身也是支持添加的 javascript 和 css 的。
- css
css 的添加方式很简单，使用 1 中直接在 Front matter 中填入客制化的 css 文件即可 - javascript
javascript 的添加方式是在构建命令中加入
reveal-md slides.md --scripts script.js,another-script.js
- 构建 slides 的几种方式
实时预览：制作和修改时使用
reveal-md slides.md -w静态网页：部署和展示时使用
reveal-md slides.md --scripts --scripts script.js,another-script.js --static _site --assets-dir assets- assets 为静态 HTML 网站过程中第三方资产 (css 和 js) 的存放路径
- _site 指定所有构建静态 HTML 网站其他资产存放的路径
(如果没有 javascript 脚本忽略即可)
- 给 slides 添加 speaker notes
- 直接在需要添加注释的地方用
Notes:开头后面的所有文字都会变为注释。
- code 展示
- 普通的 code 展示直接 markdown 的语法即可
- 如果要高亮几行可以使用以下语法:
```python [1|3-6]
n = 0
while n < 10:
if n % 2 == 0:
print(f"{n} is even")
else:
print(f"{n} is odd")
n += 1
```
简便的生成 markdown 格式的图表
Markdown 官方是不支持使用 Markdown 语言来生成图表的，但是有很多的 Markdown 扩展支持这个功能，reveal-md 也可以使用 Table Generator (opens new window) 工具输入图片格式，然后自动导出图表。Math 支持
reveal-md 的作者说了，它是默认支持 LaTex 语法的。具体用法看 reveal.js math (opens new window), katex (opens new window)
在 Markdown 中，如果你想要包含数学公式，使用反引号是不正确的方法。反引号用于表示行内代码，而不是数学公式。
为了在 Markdown 中包含数学公式，你可以使用 LaTeX 语法，它允许你创建复杂的数学表达式。LaTeX 是一种标记语言，在学术界广泛用于排版数学公式和科学文档。
要在 Markdown 中包含数学公式，你可以使用美元符号（$）将 LaTeX 代码括起来。例如，你可以写：
$$
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
2
3
- 更改字体颜色
- 更改段落颜色
<h3 style="color:red">this is colored h3</h3>
- 更改字体颜色
<p>this is <font color="green">colored</font> paragrah</p>
Fragments
片段可以控制幻灯片上内容的顺序显示。通过将 “片段” 类分配给幻灯片上的各个元素，可以使它们在您点击演示时逐个显示。这对于突出特定观点或想法，或逐步构建复杂的图表或动画非常有用。给 slides html 页面添加一个 logo
- 直接把 logo png 文件命名为 favicon.ico 并放置在和 mdw 文件相同的文件夹下即可。
部署到 Github Pages 及 demo 链接:https://github.com/Nngxu/slides