pandoc将markdown转换输出HTML slide
概览
本文记录的是如何使用pandoc将markdown格式文本转换输出为HTML slide shows。你能够使用Pandoc将markdown转换输出HTML+javascript的幻灯片,这样就可通过web浏览器浏览。可以通过S5,DZSlides,Slidy,Slideous或者reveal.js引擎转换输出HTML幻灯片,也可以使用LaTeX beamer转换输出PDF的幻灯片。
下面是官网文档中的markdown源码文件,稍作修改,habits.md:
1 | % Habits |
可使用如下命令转换输出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 | > - Eat spaghetti |
插入停顿
你可以在幻灯片页中添加停顿,该功能通过在幻灯片页中插入包含3个点的段落实现,且该三个点间以空格隔开,如下所示:
1 | # Slide with a 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
标签中),这样就可以通过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.
参考:
Producing slide shows with Pandoc
我的博客: http://liumh.com
CaryaLiu
@Chengdu
iOS Developer
Chengdu