用 HTML 做 presentation

最后更新日期：2014-06-18

　　现在 HTML slides 库实在太多了，Web-based slideshow 列举了一部分。传统的如 W3C 的 Slidy ，现代的如 deck.js ，还有炫酷的如 impress.js 。

　　HTML 幻灯片相对于 MS ppt / Google Docs 的好处：

  1. 纯文本，兼容性好，还可以使用版本控制
  2. 不需要安装额外软件：播放只需要浏览器，编辑只需要文本编辑器。没安装浏览器的电脑很少见，但没安装 Office 2010 的电脑你还是很有可能遇到的。

　　相对于直接用文本（比如直接 Vim）做幻灯片的好处：

  1. 可以展示图片
  2. 可以加入动画
  3. 可以用鼠标在上面涂画

　　HTML 幻灯片应该支持的其他功能：

  1. 能转换成 pdf

　　我尝试的第一个 HTML slides 库是 deck.js ，效果还是很不错的，自己添加一些 CSS 的话也可以比较容易地打印成 pdf 。

　　但我后来发现 deck.js 的最大问题是需要手写 html 。人总是追求更便利的，特别是出现了 Markdown 这种可以转换成 HTML 的格式之后。

　　于是我转到使用 pandoc 将 Markdown 生成 html slides 。pandoc 支持的 slides 格式见 pandoc 手册 。在这些格式中，我选择了 Slidy ，主要是因为它可以显示幻灯片大纲（下面的“contents?”按钮），其次是因为我是 W3C 的粉丝 > <。

pandoc 命令参数

样例

　　最后的效果是：Markdown 中一个 2 级标题会开始一张新的幻灯片，1 级标题将出来一个新的标题幻灯片。

美化和自定义

　　上面我加入了自定义的 CSS ，因为 Slidy 默认是什么都没有的白的。下面给出我自己的 simple.css ，参考了 deck.js 的 web-2.0 主题修改。

body {
    font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, "微软雅黑", "WenQuanYi Zen Hei", sans-serif;
}

pre, code {
    font-family: "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", "AR PL New Sung Mono", monospace;
    white-space: pre-wrap;
    *white-space: pre;
    *word-wrap: break-word;
}

img {
    max-width: 100%;
}

table {
    border-collapse: collapse;
}

th, td {
    border: 1px solid black;
}

@media print {
    @page {
        size: 10in 7.5in;
        margin: 0;
        @bottom-right {
            content: counter(page) " / " counter(pages);
            margin-top: -2em;
            margin-right: 0.5em;
            font-size: 10pt;
        }
    }
}

html {
    height: 100%;
}

body {
    background-color: #f4fafe;
    background-image: -webkit-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: -moz-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: -o-linear-gradient(top, #f4fafe, #ccf0f0);
    -ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f4fafe', EndColorStr='#ccf0f0');
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#f4fafe', EndColorStr='#ccf0f0');
    *zoom: 1;
    background-image: -ms-linear-gradient(top, #f4fafe, #ccf0f0);
    background-image: linear-gradient(top, #f4fafe, #ccf0f0);

    background-attachment: fixed;
    height: 100%;
}

body.single_slide div.slide {
    position: static;
}

div.slide {
    padding: 1em 2em;
}

@media screen {
    div.slide {
        max-width: 1080px;
        margin: 0 auto;
    }
}

h1 {
    font-family: "DejaVu Sans", "Bitstream Vera Sans", Verdana, "微软雅黑", "WenQuanYi Zen Hei", sans-serif;
    color: #0B7495;
}

/* title slide */

div.slide.titleslide {
    text-align: center;
}

div.slide.titleslide h1 {
    padding-top: 20%;
}

/* code block */

pre.sourceCode {
    color: black;
}