美文网首页Markdown教育pandoc+markdown+vscode
Markdown+pandoc+reveal.js做网页PPT

Markdown+pandoc+reveal.js做网页PPT

作者: safeasy | 来源:发表于2018-08-16 18:19 被阅读55次

    源起

    希望把工作相关的东西都用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了。


    Demoppt.gif

    方法详解

    %符号作用

    前三行的%的作用是告诉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页。


    幻灯片缩略图.png

    演讲模式

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


    演讲模式.png

    更进一步

    逐条显示条目

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

    ::: 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目录下,是直接可以用的主题。

    reveal.js支持的主题.PNG
    目录中每个.css文件就是一个主题。如果我们想生成一个simple主题,那么使用pandoc的 -V参数来指定主题即可。
    pandoc demo.md -o demo.html -t revealjs -s -V theme=simple
    

    现在ppt变成这样了:


    simple主题ppt.PNG

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

    其他未涉及

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

    相关文章

      网友评论

      • pfgp2n:我记得之前在github上也有一个用md写presentation的。不过跟你这个是有点差别。还有就是如果要改模板,需要修改CSS吗?希望后续可以有更进一步的文章出来
        safeasy:根据你的意见补充了如何设置生成的演示文件的主题的部分。个人觉得用pandoc来完成把markdown生成演示文件的人,主要还是不想麻烦,需要简单,或者还有很多是html的外行,不愿意或者没能力修改CSS,制作自己的模板。如果能力足够,直接用reveal.js,直接改写网页做演示文件就可以了,因此,不打算深入,修改CSS的细节了。

      本文标题:Markdown+pandoc+reveal.js做网页PPT

      本文链接:https://www.haomeiwen.com/subject/vobobftx.html