利用 Markdown 制作在线幻灯片

杨志宏

2019-11

原理及优势

原理

原理

使用 pandoc 工具将 markdown 文本转换为 revealjs 格式的 html 文件,然后利用基于 git 技术的代码托管网站提供的免费页面服务实现在线幻灯片。

流程:

  1. 使用编辑器书写 markdown 文本。
  2. 使用 pandoc 转化为 html 文件。
  3. 发布到网络(通常为代码托管仓库)。

优势与不足

  1. 能快速制作幻灯片,节约大量时间。
  2. 文档的逻辑结构更为清晰,便于修改。
  3. 能发布到网络,有利于学习与反馈。
  4. 功能上相对 PPT 而言弱一些(如动画)。
  5. 需要了解 Git 工具、markdown 语法和一定的前端基础知识,具有一定的学习成本。

如何实现

准备工作

  • 下载并安装git工具。
  • 下载并安装 pandoc 工具。
  • 下载在线演示工具 reveal.js,解压到合适目录,并将目录名称改为revealjs
  • 安装合适的编辑器。推荐开源编辑器: VS code

使用 markdown 书写内容

  1. 首先,在编辑 markdown 文档的时候,需要遵守 Markdown 语法

  2. 其次,还需要遵守 pandoc 制定的一些规则。如:在文档开头使用%加入文档标题、作者、时间等元信息:

    % 利用 Markdown 制作在线 PPT
    % [杨志宏](http://yangzh.cn)
    % 2019-11
  3. 注意文件保存的位置,将 markdown 文本文件保存到与reveal.js同一级别的目录中。

使用 pandoc 将 markdown 转化为 html

在项目目录中,执行如下命令:

pandoc -t revealjs -s demo.md -o index.html -c yangzh.css

上述命令将demo.md 文档,转化为index.html,其中参数-c yangzh.css用来指定自定义的样式表,可以不加。现在使用浏览器打开 html 文件,即可看到演示成果。

使用 git 工具将内容发布到网络

  1. 创建仓库。
  2. 推送修改。
  3. 开通 pages 服务。

详细操作参见 使用 Pages 服务建立静态网站

进阶操作

如何插入视频

使用 markdown 语法中插入图片的语法,只不过将图片替换为视频,例如:

![](anova.mp4)

如何插入数学公式

pandoc、markdown以及html都支持数学公式的显示。

  1. 行内公式,如y = bx + a,语法为$y=bx+a$
  2. 独立公式,如:
    E = mc2
    语法为$$E=mc^2$$

如何自动生成 html 文件

使用 VScode 的 task 功能,可以实现自动执行任务的功能。

  1. 创建如下内容的 task:

    {
        "version": "2.0.0",
        "tasks": [{
            "label": "生成 html 文档",
            "type": "shell",
            "command": "pandoc -t revealjs -s demo.md -o demo.html -c yangzh.css",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }]
    }
  2. 执行该 task(快捷键为ctrl+shift+b),即可执行原来需要手工执行的命令,能大大提高预览效率。

如何分栏显示内容

左侧栏目

右侧栏目内容

右侧栏目内容

右侧栏目内容

实现的语法如下:

:::::::::::::: {.columns}
::: {.column width="40%"}
左侧栏目
:::
::: {.column width="60%"}
右侧栏目内容

右侧栏目内容

右侧栏目内容
:::
::::::::::::::

如何调整演示文档的样式

通过指定自定义样式表,可以实现演示文档样式的调整。需要创作者熟悉CSS知识。例如:

.reveal h2 {
    border-left: 0.25em solid #6ca0e8;
}

上述语法指定了二级标题的左边框宽度、样式及颜色。

参考资料

在线文档

  1. https://pandoc.org/MANUAL.html#producing-slide-shows-with-pandoc
  2. https://code.visualstudio.com/docs/editor/tasks#vscode