reveal-md¶

什么是 reveal-md ¶

• 可以只用写 markdown 的方式写 PPT，将 markdown 转换成 html，或导出 PDF
• 是 revealjs 的 makrdown 功能

安装 reveal-md ¶

本地构建 ¶

• reveal.js 使用 nodejs 构建，需要提前安装好 nodejs
• 通过 npm 安装 reveal-md

  $ npm install -g reveal-md
  $ reveal-md slides.md # 启动本地服务器并在默认浏览器中将任何 Markdown 文件演示文稿打开
  

Docker 构建 ¶

• 不需要安装 node.js
• 在容器中启用实时重新加载，还应该映射端口 35729

  $ docker run --rm -p 1948:1948 -p 35729:35729 -v <path-to-your-slides>:/slides webpronl/reveal-md:latest /slides --watch
  

相关命令 ¶

• reveal-md -w 实时重新加载
• reveal-md --scripts [url/*.js] 自定义 js
• reveal-md --css [url/*.js] 自定义 css
• reveal-md --static [--static-dirs=assets] 导出到独立的 HTML 网站 ( 将包含其他静态资源的目录复制到目标目录 )
• reveal-md --print [--print-size 1024x768 / A4] name.pdf 打印成 PDF（或者在浏览器的 url 后添加 ?print-pdf
• reveal-md --template 自定义模版

配置 ¶

yaml 配置 ¶

可以在 markdown 文件中通过 yaml 进行配置

---
title: Slide 模板 # 幻灯片名称
separator: <!--s--> # 幻灯片横行切割标志
verticalSeparator: <!--v--> # 幻灯片垂直切割标志
theme: simple # 幻灯片主题
highlightTheme: github # 代码高亮主题
css: custom.css # 自定义 css
revealOptions:
    transition: 'slide' # 动画效果
    transitionSpeed: fast # 动画速度
    center: false # 是否居中
    slideNumber: "c/t" # 幻灯片数量
    width: 1000 # 幻灯片宽度
---

幻灯片主题 ¶

• 默认主题

• 自定义主题
  1. 下载 reveal git clone git@github.com :hakimel/reveal.js.git ；
  2. 在 /css/theme/coder.scss 中复制一个文件；
  3. 运行 npm run build -- css-themes 生成 css dist/coder.css；
  4. 运行指定主题 reveal-md slides.md -w --theme theme/coder.css。

切换时动画 ¶

用法 ¶

换页 ¶

• 横向换页：<!--s-->（根据 yaml 的配置
• 垂直换页：<!--v-->（根据 yaml 的配置

添加属性 ¶

• 当需要在 section 中添加属性时 <!-- .slide: 属性=属性值 -->
• 当需要在其它元素插入属性时 <!-- .element: 属性=属性值 -->
• 设置背景色或背景图 <!-- .slide: data-background="./image1.png" -->
• 设置动画片段 Item1 <!-- .element: class="fragment" data-fragment-index="1" -->

具体可以查阅 revealjs 的 docs

指定代码高亮顺序 ¶

```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
```

地址跳转 ¶

<!-- .slide: id=0 -->
[跳转0](#/0)

部署 ¶

Github Pages¶

• 在 Github 中新建一个 slides 仓库作为总幻灯片站点，并且部署 Github Pages（可自定义域名
• 在分仓库中写好项目后，通过 Action 把 site 文件夹中的内容复制到 slides

具体查看 TonyCrane's Slide Template

Netlify¶

• 注册一个 netlify，然后创建一个站点关联上 github 仓库
• 在配置 / 部署里面添加构建命令
• 然后在域名管理添加一个自己的域名

Reference¶

• webpro/reveal-md
• revealjs 官网
• 任何利用 revealjs 写出漂亮的 PPT
• TonyCrane's Slide Template