Pandoc 安装一般没有问题,涉及到字体,把Latex配置好,能用xelatex就可以了,这篇介绍如何使用pandoc。
对中文编码有要求,先使用下面命令转换下。
1 | $iconv -t utf-8 input.txt | pandoc | iconv -f utf-8 |
自定义HTML模板
首先,如果你知道如何写CSS去定义页面外观、如何写JavaScript让元素动起来,或者已经有了一个不错的HTML幻灯片模板,你就可以直接让Pandoc把Markdown转换成纯HTML片段,用来嵌到自己的模板里:1
$ pandoc slides.md -o slides.html
生成一个完整的HTML页面
1 | $ pandoc slides.md -o slides.html -s |
DZSlides
当然,我们完全没有必要写自己的HTML模板,因为Pandoc已经提供了对多种幻灯片模板的支持。DZSlides便是其中最简单的一种,支持键盘操作翻页,PgUp/PgDn,Home/End。Pandoc生成的DZSlides幻灯片中自包含了所需CSS和JavaScript,无需依赖任何外部文件。
采用默认模板渲染一个独立的DZSlides幻灯片:
1 | $ pandoc slides.md -o slides.html -t dzslides -s |
若要对模板的样式进行调整,可以用–template指定自定义模板。默认的模板为default.dzslides,因此上述命令等效于:
1 | $ pandoc slides.md -o slides.html -t dzslides --template default.dzslides |
可以从这里pandoc-templates 找到原来的模板,自行修改后替换掉原先的模板。其余幻灯片框架与此相仿,以后不再赘述。
Slidy
HTML Slidy是W3C开发的一个极简主义HTML幻灯片模板,没有任何多余的样式,支持鼠标单击翻页,键盘操作左右,PgUp/PgDn,Home/End。
采用默认模板渲染一个独立的Slidy幻灯片:
1 | $ pandoc slides.md -o slides.html -t slidy -s |
或指定自定义模板:
1 | $ pandoc slides.md -o slides.html -t slidy --template default.slidy |
Pandoc生成的Slidy HTML依赖于 slidy css 和 slidy js 这两个外部文件。
S5
S5(Simple Standards-Based Slide Show System)是一个公有领域的HTML幻灯片规范。它支持鼠标单击翻页,键盘操作,PgUp/PgDn,Home/End。
为了使用S5作为幻灯片框架,需要从这里下载S5。解压之后把S5文件夹中的ui/default拷贝到幻灯片所在路径下,改名为s5/default即可。
渲染幻灯片:
1 | $ pandoc slides.md -o slides.html -t s5 -s |
在S5的幻灯片界面上,鼠标移到右下角可以看到若干控制选项。
Slideous
Slideous是另一个有些年头的HTML幻灯片框架。支持鼠标单击翻页,键盘操作,PgUp/PgDn,Home/End。
下载slideous.js和slideous.css这两个文件,放到本地目录slideous/下即可。
渲染幻灯片:
1 | $ pandoc slides.md -o slides.html -t slideous -s |
Slideous的界面上提供了比较丰富的控制选项。
reveal.js
reveal.js这东西已经红得不能更红了,最近开始火起来的WYSIWYG在线幻灯片工具slid.es也是基于它。
reveal.js的设计风格(字体、HTML5/CSS3效果)比起前面几个框架更加现代,所以如果没有特别的理由(旧浏览器兼容性)的话,reveal.js果然还是最应该推荐的一个。
虽说reveal.js本身就提供对Markdown语法的支持,不过Pandoc的好处很明显,那就是一条命令解决问题,不需要用户接触任何HTML。
首先需要从GitHub上获取reveal.js,将reveal.js同名的文件夹放在幻灯片所在目录下即可:
1 | $ git clone https://github.com/hakimel/reveal.js |
渲染幻灯片:
1 | $ pandoc slides.md -o slides.html -t revealjs -s |
除了默认的外观主题以外,reveal.js还提供了多个主题可供选择,
1 | $ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige |
- default:(默认)深灰色背景,白色文字
- beige:米色背景,深色文字
- sky:天蓝色背景,白色细文字
- night:黑色背景,白色粗文字
- serif:浅色背景,灰色衬线文字
- simple:白色背景,黑色文字
- solarized:奶油色背景,深青色文字
挺中意solarized主题,但是标题太大。得再去看看
LaTeX Beamer
最后,虽然不是HTML,Pandoc也可以用来将Markdown文件渲染成LaTeX beamer样式的PDF幻灯片。如需要打印而不是演示时特别有用。
1 | $ pandoc slides.md -o slides.pdf -t beamer |
这个有点鸡肋,其实用latex的模板可能会更快吧。
从md到pdf
挺多东西要设置,譬如 latex-engine 要选用 xelatex(为了编译中文,恩字体肯定是要安装的),--highlight-style=STYLE(espresso和zenburn可用,推荐zenburn)选项等,可以在.bashrc里面设置,不用敲那么多命令
1 | $pandocPdf READ.md -o read1.pdf |
选用了两个latex模板,另一个可以用来写毕业论文。
1 | $pandocPdfT READ.md -o read2.pdf |
完整的命令是:1
2$pandoc --template=/home/hou/.templates/template.tex --latex-engine=xelatex \
--toc -N --highlight-style=espresso file.md -o out.pdf
从md 到html
1 | $pandoc READ.md -s -S --toc -H ./my_css/buttondown.css -o foo.html |
css文件放在/my_sss文件夹里,有两个,其中一个是github,关于css文件,注意格式。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16/*以<style>开头,</style>结束, 这样生成的html是独立文件*/
<style type="text/css">
body {
margin: auto;
padding-right: 1em;
padding-left: 1em;
max-width: 44em;
border-left: 1px solid black;
border-right: 1px solid black;
color: black;
font-family: Verdana, sans-serif;
font-size: 100%;
line-height: 140%;
color: #333;
}
</style>