1. 概览
  2. 幻灯片的结构化
  3. 增量式列表
  4. 插入停顿
  5. 定义幻灯片样式
  6. 转化HTML slide shows常用参数

概览

本文记录的是如何使用pandoc将markdown格式文本转换输出为HTML slide shows。你能够使用Pandoc将markdown转换输出HTML+javascript的幻灯片,这样就可通过web浏览器浏览。可以通过S5,DZSlides,Slidy,Slideous或者reveal.js引擎转换输出HTML幻灯片,也可以使用LaTeX beamer转换输出PDF的幻灯片。

下面是官网文档中的markdown源码文件,稍作修改,habits.md:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
% 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

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

![UML attribute text](http://readus-org.qiniudn.com/img/uml-class-diagram/attribute-text.png)

## Going to sleep

- Get in bed
- Count sheep

可使用如下命令转换输出HTML/javascript的幻灯片,然后使用浏览器打开habits.html文件。

pandoc -t FORMAT -s habits.txt -o habits.html

其中FORMAT可以是s5,slidy,slideous,dzslides或者revealjs.

对于Slidy, Slideous, reveal.js和S5, pandoc通过-s/–standalone选项转换输出的文件指向javascripts和CSS文件的链接,这些文件通常可在相对路径s5/default(S5),slideous(Slideous),reveal.js(reveal.js)或者w3.org上的Slidy网址(Slidy)找到,当然这些路径可以通过设置参数变量slidy-url, slideous-url, revealjs-url或者s5-url改变,参考pandoc的–variable选项.

对于所有的HTML幻灯片,选项–self-contained选项能够将所有依赖的文件(linked scripts,stylesheets, images, and videos)都包含进同一个文件中,这样要是分享给其他人时就只需要传递单一文件。

转换输出PDF幻灯片格式的文件,可以只用beamer,如下:

pandoc -t beamer habits.md -o habits.pdf

但是我尝试了中文的markdown文件,会出现乱码的问题,目前没有找到解决方案.

幻灯片的结构化

slide level: 默认情况下,slide level由文章的组织结构中,以紧接着文章内容(而不是另一个标题)的最高的header等级决定。在上面的例子中,一级标题总是紧跟着二级标题,二级标题后会跟着实际内容,因此slide level是2。这由文章组织结构内容决定的slide level可由pandoc 的 –slide-level选项覆盖。

文章内容根据以下规则划分为不同的幻灯片页:

  • 一条水平线总会开启一页新幻灯片。

  • header等级等于slide level总会开启一页新的幻灯片。

  • 组织结构中在slide level以下的headers会在同一幻灯片页中创建headers。例如上述例子slide level等于2,那么如果有H3或者H4等级的headers,那么它们会显示在由其他规则创建的幻灯片页中。

  • 组织结构中在slide level以上的headers会创建“title slides”,它只包含了该section的标题,从而将整个幻灯片的内容划分为不同的sections。

  • pandoc会自动根据文中的title block创建出一页title page。当然,必须得存在title block。

如果你不是很在意将幻灯片划分为多个sections和subsections的话,那么你可以在所有的幻灯片页中只使用一级标题(这样的话,slide level等于1),当然你也可以像上述示例一样将其划分为不同的sections。

Note: 在reveal.js类型的幻灯片中,如果slide level等于2,那么产生的幻灯片会是一个二维的布局,一级标题会产生水平控制阅读的幻灯片,二级标题会产生垂直方向控制的幻灯片。另外,不建议使用reveal.js写slide level大于2的幻灯片内容。

增量式列表

默认情况下,pandoc转换输出的列表都是一次性显示出来。你可以在转换输出幻灯片时使用-i选项使列表一次只显示一个列表项。如果你想让某一个特定的列表显示与默认的不一样,也就是: 没有使用-i选项的时候使某一列表增量显示,或者,使用-i选项的时候使某一列表一次性显示出来,你可以将该特定列表放置于block quote中, 如下所示:

1
2
> - Eat spaghetti
> - Drink wine

插入停顿

你可以在幻灯片页中添加停顿,该功能通过在幻灯片页中插入包含3个点的段落实现,且该三个点间以空格隔开,如下所示:

1
2
3
4
5
6
7
# Slide with a pause

content before the pause

. . .

content after the pause

定义幻灯片样式

你可以通过将自定义CSS文件放置于用户数据目录\(DATADIR下来改变HTML的样式,对于S5而言,该目录是\)DATADIR/s5/default; Slidy: \(DATADIR/slidy;Slideous:\)DATADIR/slideous; $DATADIR指的是数据目录,参考–data-dir选项说明。

对于reveal.js,幻灯片主题可通过设置theme变量指定,如下所示:

-V theme=moon

或者可以通过–css选项指定自定义的CSS样式表.

定义beamer幻灯片的样式时,可使用-V选项,指定其“theme”或者“colortheme”:

pandoc -t beamer habits.md -V theme:Warsaw -o habits.pdf

Note: pandoc在转换输出为HTML格式的幻灯片时,header的属性值会变为幻灯片页的属性(在
或者

标签中),这样就可以通过css自定义单一的幻灯片页的样式了。如下:

# References {.allowframebreaks}

转化HTML slide shows常用参数

  • -s, –standalone

    转换输出文档时会自动加上合适的header和footer(例如standalone HTML, LaTeX, RTF).该选择在转换输出pdf,epub,epub3,fb2,docx,odt格式文件时会被自动设置,因此如果转换输出上述格式文件,则不用显示指定该选项。如上所述,使用该选项后,能够将所有依赖的文件(linked scripts,stylesheets, images, and videos)都转换输出到同一个文件中。

  • –slide-level=NUMBER

    指定能够创建新幻灯片页的headers等级(对beamer, s5, slidy, slideous, dzslides而言)。在设定的level以上的header将幻灯片划分为不同的sections,在level以下的headers在同一页幻灯片中创建子标题.默认情况下根据文档内容自动确定,见幻灯片的结构化.

  • -i, –incremental

    使幻灯片中的列表选项增量式显示(one by one)。默认情况下,列表内容会一次性显示出来。

  • -c URL, –css=URL

    链接到CSS样式表。该选项能够使用多次来引入多个文件,所指定的文件能够以指定的顺序依次引入。

  • –data-dir=DIRECTORY

    指定用户数据目录,设定之后会在该目录下搜索pandoc数据文件。如果没有指定该选项,则会使用默认的用户数据目录:

    $HOME/.pandoc

    可通过pandoc --version命令查看。

  • –base-header-level=NUMBER

    指定headers的基准level,默认是1.

  • –section-divs

    将sections包裹进
    标签(在HTML5中包裹进
    标签),并且将header的identifiers附属到
    或者

    标签中。详见Section identifiers.

  • Math rendering in HTML

    如果文档中包含有TeX math,则需要看上述链接的中的内容.

参考:

Producing slide shows with Pandoc

我的博客: http://liumh.com