Markdown+pandoc+reveal.js做网页PPT

源起

希望把工作相关的东西都用git管理起来,对程序员来说,主要是三个东西:代码,文档,演示。用git管的话,这些东西需要都是基于纯文本的,代码已然是,文档用Markdown来写,抛弃word,剩下演示怎么弄,如何能抛弃PowerPoint?这篇文稿描述用Markdown来编写内容,然后用pandoc来生成基于reveal.js的网页ppt。好处很明显,让作者专注内容,写好的文档基于纯文本,可用git管理起来。

说明:reveal.js本身就可以支持Markdown,直接能制作网页PPT,而我们用pandoc的原因是,完全不用了解html的细节,对纯外行很适用。

基础工作

Markdown编辑器

推荐Typora,免费又好用,谁用谁知道。

安装pandoc

pandoc官网:http://pandoc.org/。官网有链接到github的下载地址,有各个系统的安装包,文档以Windows为例,下载...x86_64.msi文件,直接安装。

pandoc没有图形界面,安装好之后,用powershell,输入命令:pandoc -v,验证一下,能出来版本号等提示就表示安装成功了。

下载reveal.js

从github上下载:https://github.com/hakimel/reveal.js,不需要安装,下载下来是一个目录,目录名:“reveal.js”。

示例

1.首先用Markdown编写需要演示的PPT的内容。这里引用pandoc官方文档的示例,我们假设文件名取名为demo.md。

% Habits
% John Doe
% March 22, 2005

# In the morning

## Getting up

- Turn off alarm
- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

# In the evening

## Dinner

- Eat spaghetti
- Drink wine

------------------

![picture of spaghetti](images/spaghetti.jpg)

## Going to sleep

- Get in bed
- Count sheep

2.用demo.md文件来生成用于演示的html。

pandoc -t revealjs -s demo.md -o demo.html

3.享受成果,查看生成的ppt。

这里需要注意,把生成的demo.html和下载下来的reveal.js放到同一个目录下,比如放到temp目录下:

temp
│ demo.html

└─reveal.js

用浏览器,推荐chrome来打开demo.html就看到生成好的网页PPT了。

image

方法详解

%符号作用

前三行的%的作用是告诉pandoc,这个Markdown文本要处理成幻灯片。前三行分别是:文档标题,作者,日期,会单独生成一页ppt作为全部ppt的起始页。

理解slide level

slide level(我姑且翻译成“滑动级别”)是理解幻灯片生成的重要概念,英文好的直接读pandoc帮助文档。根据帮助文档,我这样理解,Markdown文档里面,后面紧跟着正文内容的标题的级别(标题的级别就是1级标题、2级标题的级,也是HTML里面的h1、h2、……),就是这篇文档的“滑动级别”,产生的结果是:

  • 与“滑动级别”同级的标题,会单独产生一页PPT,如果紧跟上一级标题,生成的PPT纵向滑动。
  • 高于“滑动级别”的标题,会单独成一页只有标题的PPT,横向滑动。
  • 低于“滑动级别”的标题,只会作为ppt的内容。

用我们的例子理解一下,紧跟正文内容的标题级别是2,那么这篇文档的slide level就是2。所有1级标题会单独产生一页只有标题的ppt,紧跟这个1级标题的每个2级标题及其正文内容,会单独产生单独的一页ppt,会在一级标题页之下,通过纵向滑动展示,而一级标题之间通过横向滑动来切换页。

帮助文档也提到可以在生成的时候,通过--slide-level 选项来指定“滑动级别”。实践中,你也可以用3级标题来写正文内容,2级标题来作为单独标题页,理解好“滑动级别”就可以灵活运用。

网页PPT常用操作

缩略图模式

演示ppt的时候,按键盘“esc”键,就可以出现所有ppt的缩略图,可以任意选择ppt页。

image

演讲模式

按下键盘“S”键,就进入演讲模式。(演讲模式我自己取的名,就是用PowerPoint的时候,演示人自己看到一个界面,内容丰富,有注释,还有下一页预览等,而给听众只看到普通的页面。)如果是双屏情况下,把普通页拓到投影那边即可。

image

更进一步

逐条显示条目

要让条目逐条显示,用下面的方式把条目包起来就可以了。

::: incremental

- Eat spaghetti
- Drink wine

:::

不逐条的:

::: nonincremental

- Eat spaghetti
- Drink wine

:::

同一页显示多列

:::::::::::::: {.columns}
::: {.column width="40%"}
contents...
:::
::: {.column width="60%"}
contents...
:::
::::::::::::::

演讲注释

演讲模式里面,演讲者的界面里,可以有注释信息,和PowerPoint的注释功能一样。实现方法:

::: notes

This is my note.

- It can contain Markdown
- like this list

:::

修改默认主题

前面我们使用命令pandoc demo.md -o demo.html -t revealjs -s来生成网页PPT,生成的网页PPT使用reveal.js的默认主题——黑色主题。如果我们对此不爽,reveal.js本身提供了很多主题供我们选择,可以查看reveal.js/css/theme目录下,是直接可以用的主题。

image

目录中每个.css文件就是一个主题。如果我们想生成一个simple主题,那么使用pandoc的 -V参数来指定主题即可。

pandoc demo.md -o demo.html -t revealjs -s -V theme=simple

现在ppt变成这样了:

image

不同的主题,看官自己去试吧。

其他未涉及

还有一些换背景,换转场效果等技能,我暂时没用到,也觉得不是核心特别要用的,请参考pandoc的文档吧。

作者:safeasy
链接:https://www.jianshu.com/p/9b71614f57b1
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容