pandoc

文章目录
  1. 1. 自定义HTML模板
  2. 2. DZSlides
  3. 3. Slidy
  4. 4. S5
  5. 5. Slideous
  6. 6. reveal.js
  7. 7. LaTeX Beamer
  8. 8. 从md到pdf
  9. 9. 从md 到html
  10. 10. Pandoc 主页

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 cssslidy 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.jsslideous.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
2
$pandocPdf READ.md -o read1.pdf
```language

选用了两个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>

Pandoc 主页

Pandoc help