🛠 Reveal-md

使用reveal-md 可以将 markdown 转换成 Html，或导出PDF。

安装

npm install -g reveal-md

npm 6.x 版本安装会出现权限错误，需要添加 --unsafe-perm=true

sudo npm install -g reveal-md --unsafe-perm=true

–unsafe-perm=true：“false if running as root, true otherwise”，大体意思是 npm 的安全限制，root身份运行时不会查询 root 的上下文，所以 sudo 运行时还需要指定 –unsafe-perm=true 忽略这种限制。

幻灯片主题

默认主题

名称	效果
black	黑色背景，白色文本，蓝色链接（默认）
white	白色背景，黑色文本，蓝色链接
league	灰色背景，白色文字，蓝色链接
beige	米色背景，深色文字，棕色链接
sky	蓝色背景，细暗文本，蓝色链接
night	黑色背景，厚白色文字，橙色链接
serif	卡布奇诺背景，灰色文本，棕色链接
simple	白色背景，黑色文本，蓝色链接
solarized	高分辨率照片
blood	深色背景，厚白文字，红色链接
moon	高分辨率照片

自定义主题

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

切换时动画

名称	效果
none	瞬间切换背景
fade	交叉淡入淡出 - 背景转换的默认值
slide	在背景之间滑动 — 幻灯片过渡的默认设置
convex	以凸角滑动
concave	以凹角滑动
zoom	向上缩放传入的幻灯片，使其从屏幕中心向内扩展

配置

我们可以在Markdown文件里通过 yaml 进行配置

title: Slides # 幻灯片名称
theme: solarized # 幻灯片主题
highlightTheme: github # 代码高亮主题
revealOptions: 
  transition: 'convex' # 动画效果

reveal 其它配置项

{
  // 显示控制箭头
  controls: true,
  // 循环播放
  loop: false
  // 更多参考 https://revealjs.com/config/
}

reveal-md 其它配置项

{
  // 幻灯片横行切割标志
  "separator": "^\n\n\n",
  // 幻灯片垂直切割标志
  "verticalSeparator": "^\n\n"
}

用法

当需要在 section 中添加属性时，Markdown 的写法如下

<!-- .slide: 属性=属性值 -->

当需要在其它元素插入属性时，Markdown 的写法如下

<!-- .element: 属性=属性值 -->

一些例子，设置背景色或背景图

//设置页面切换动画
<!-- .slide: data-transition="fade" -->
//设置背景色
<!-- .slide: data-background="#fff" -->
//设置背景图
<!-- .slide: data-background="./bg.png" -->
<!-- .slide: data-background-image="https://xxx.jpg" data-background-opacity=.1 data-background-repeat="no-repeat" -->

设置 fragment

- Item1 <!-- .element: class="fragment" data-fragment-index="1" -->
- Item2 <!-- .element: class="fragment fade-in-then-out" data-fragment-index="2" -->

指定代码的高亮顺序

```js [1-2|3|4|5]
let a = 1;
let b = 2;
let c = x => 1 + 2 + x;
c(3);
c(2);
```

地址跳转

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

双列模式

刚接触 reveal-md.js 时只是使用单列模式，其实在有些情况双列展示可以非常友好的展示一些对比性内容，刚好组内万能大神找到了双列解决方案，我就私下取经, 得到了解决方案，我们可以写个自己的 CSS 文件，比如 doubleCol.css 然后在里面添加这点样式就行了：

#left {
 margin: 10px 0 15px 20px;
 text-align: left;
 float: left;
 z-index:-10;
 width:48%;
 font-size: 0.85em;
 line-height: 1.5; 
}
 
#right {
 margin: 10px 0 15px 0;
 float: right;
 text-align: left;
 z-index:-10;
 width:48%;
 font-size: 0.85em;
 line-height: 1.5; 
}

然后我们在 Markdown 文件里，像下面这样添加 Markdown 语法内容就好了

<div id="left">
 
## Left column
- Bullet 1
- Bullet 2
- Bullet 3 
- Even [links](https://www.google.com)
 
</div>
 
<div id="right">
 
## Right colum
1. List
2. List
3. ![Icon](https://cdn3.iconfinder.com/data/icons/ballicons-free/128/graph.png)
 
</div>

最后通过 –css 引入咱们自定义的 CSS 文件即可，就像这样：

reveal-md test.md  --css theme/doubleCol.css

参考reveal.js的官方文档

安装

相关命令

幻灯片主题

切换时动画

配置

用法

双列模式