使用reveal-md将markdown转slides

前段时间看到了vue-mark-display这套功能，直接基于markdown生成slides，都不用去专门学习beamer那套，直接就能基于现有的markdown生成，感觉相当不错。

不过在折腾这套工具的时候，遇到一个问题，自己展示的时候用html没有问题，但是归档发布给其他人的时候，当然最好还是以pdf的形式嘛。这套工具不知道是以为没适配高分屏还是什么原因，通过Chrome和decktype导出pdf时，文字布局一定会与页面上看到的不一致。

具体也没细看了，这套工具终究是个人使用为主，可能开发者的使用场景不怎么需要导出，比如纯外网或内网部署了自己的静态网站之类的情况下。

考虑到这套工具偏个性化，于是去找找适用性较广，功能做的比较完善的这类产品。

发现了reveal.js这套目前来看star数应该是最多的，也支持所有我需要的功能，如markdown。还有人基于这套，做了一个一键使用的reveal-md，更加满足我的需求了。

这篇文章主要讲的就是针对我的几个痛点，我怎么使用这套工具了。

emm，发现几个问题，看看remark和remark-slide和spectacle这俩star更多的有没有解决这个问题呢？reveal-md作者没兴趣修这些问题……

指定主题

# 指定官方提供的
reveal-md slides.md --theme solarized
# 自定义scss
reveal-md slides.md --theme theme/my-custom.css

文件内嵌yaml输出参数

---
title: temp
theme: solarized
revealOptions:
    transition: 'fade'
---

## slide 1

slide 

---

##  slide 2

这种效果

输出pdf（不建议使用，不支持mathjax）

1	reveal-md slides.md --print slides.pdf

html看到的公式和图片都是正常的。但是基于Puppeteer导出的时候，公式无法加载。按照reveal.js里说的，是已经支持了部分版本的mathjax了的，所以只能从这个工具使用的导出方式上来怀疑了。

可能因为headless浏览器那边加载的问题？没加载指定的js之类的？导致无法解析出mathjax公式。可能是这个reveal-md里对puppeteer的使用上存在一些问题？因为看decktape底层应该也是基于puppeteer来做的。

使用reveal.js的print-pdf（推荐使用）

~~emm，有人说reveal.js原生的?print-pdf已经修复了这些问题，但是reveal-md，怎么像是css不加载？~~

1
2
3

reveal-md temp.md --static static
python3 -m http.server
#然后在打开的页面里按下面增加print-pdf，保存成pdf

要在html后的#前增加?print-pdf，在#后面加是没用的……总算是意识到了

1	http://localhost:8000/index.html?print-pdf#/

遇到因为文件头部的yaml导致生成的html都无法使用的问题

奇怪，前两天操作的时候怎么好像没遇到这个问题呢？

node版本的问题嘛？不像啊

1
2
3

是因为我去掉了水平Separator的设置，但是保留了下面这个
verticalSeparator: <!--v-->

通过Decktape输出pdf(支持mathjax，但暂时存在标题与图片间隙过大问题未修复，pinned状态)

使用reveal-md提供的生成Static文件的方式，再通过decktape将静态网页转成pdf。

1 2	reveal-md temp.md --static static decktape index.html new.pdf

根据下面[^2]里提到的问题，目前找到的有两种解决方式 1. 使用screenshots输出，再写个脚本拼接成pdf，可能会丢失一些动态效果？如果尺寸比图片小，也会丢失下面的内容……不过这个和html是表现一致的，所以如果图片在html有问题，还可以调整。 2. 使用增加size的方式，直到找到可以正确显示的方式。但是这样的size针对不同的图片大小，还需要手动调整…… 3. 使用1.0.0版本的decktape，这个版本还在使用phantomjs，但是我发现在高分屏幕环境，似乎存在一点问题.只能显示一部分，原本的中间的内容跑到了右下角去了。 4. 使用原生的print-pdf，但是好像我这边生成的好像怎么都加载不了css，位置始终在左侧.

常用尺寸： * 2048x1536 * 1920x1080 * 2560x1440(screenshots)

存在图片和标题间距过大问题[^2]

绕过方式如下:

A workaround seems to be increasing (very much) the size. For example using --size='2048x1536' instead of --size='1024x768' works for me.

但是这个存在一个问题，因为图片分辨率一旦超过设置的宽度，他这边就会无法显示了。

可能相比之下还不如刚才那样直接输出。如果使用screenshots输出倒是没有一点问题。

备注

在markdown文件每页中增加Note:，这页的剩下的部分就都会显示在注释中，打开本地web端访问slides后，按s会弹出注释页面，放到其他屏幕上就可以了。然后分别按Cmd+Ctrl+f全屏即可了。[^5]

只不过这种只适合多屏幕场景了吧，不过对于投屏来说，的确就是多屏幕

生成的目录结构

本以为Reveal.js生成的slides是顺序的，但是发现实际是具有上下左右四个方向的……

本以为直接是按照目录结构保证的，但是实际上来看，和我写的目录结构并不是完全匹配的。

还得具体了解一下。

横向的幻灯片代表一章, 纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的, 而纵向的幻灯片是上下切换的。

Reveal.js 里页面有两种页面类型，横向的一级页面、纵向的子页面。后者务必嵌套在前者里面。所谓的纵横比较好理解，键盘上的左右箭头控制一级页面，上下键移动子页面。

说是这么说的.根据[^7]也是有人直接改了，让可以在section切换时，能够直接进入下一个section的开头，而不是按Esc看到的布局的右侧位置。

又仔细翻了下文档，其实是由开关控制，决定是否要继承当前所在的section下属的纵向index的，关闭navigationMode就可以了。[^8]的Navigation Mode有提开关,既然有空格可以工作，暂时就不动这个了。

还是暂时使用空格顺序切换吧。

scss编写

1
2
3

cd reveal.js
yarn
yarn run build -- css-themes

在调试过程中，发现主要痛点在于默认主题的标题全部被强制大写了，导致看上去不是很符合我的预期，找了下可以在英文外增加代码符号```来完成绕过。

使用reveal-md将markdown转slides

2020-06-21
专业

使用reveal-md将markdown转slides

指定主题

文件内嵌yaml输出参数

输出pdf（不建议使用，不支持mathjax）

使用reveal.js的print-pdf（推荐使用）

遇到因为文件头部的yaml导致生成的html都无法使用的问题

通过Decktape输出pdf(支持mathjax，但暂时存在标题与图片间隙过大问题未修复，pinned状态)

存在图片和标题间距过大问题[^2]

备注

生成的目录结构

scss编写

Reference