借助 HTML5 框架用纯文本写 PPT

概述

我在工作中，有较多的培训需求，但是很不争气，这么多年以来，一直玩不转 Powerpoint，哪怕现在有一 Keynote，也还是心怀三分敬畏，不敢轻易尝试。另外，他们也有几个我不太喜欢的缺陷：

1. 样式不好控制，作为程序员，我更希望使用文本；
2. 不方便内部分享，虽然有 Ispring Presenter 这样的工具，但毕竟还在另外转换；
3. 图片易失真，会被莫名其妙的缩放；
4. 不能贴代码，不支持高亮，只好截图展示；
5. 永远都是那个几款单调的动画效果，当然，也可能是我不会用；
6. 我没有正版的 Powerpoint，也没有 Keynote 授权。

甄选

于是，我一直在追寻好用的 HTML5 Presentation Tools，从最初的 Impress.js 开始，一共尝试了以下框架：

• Impress.js
• deck.js
• Bespoke.js
• reveal.js
• mdpress
• HTML5slides

总体说来，他们都是优秀的 PPT 工具，我悉数收藏在自己的 Wiki 之中，如果一定要排名的话，我的选择：

1. HTML5slides
   优点：Google 出品，风格大方，支持 Markdown，支持逐条飞出列表
   缺点：美观上有待提高
2. mdpress
   优点：使用 Impress.js 效果，炫丽多变，支持 Markdown 语法，支持数学公式展示
   缺点：不能复制文本，不支持逐条展示列表，不支持 IE10
3. reveal.js
   优点：效果惊艳，主题丰富，支持 Markdown 标签，代码可现场编辑
   缺点：不能完全使用 Markdown 编写

他们都有共同的优点：支持语法高亮，程序员必备！也有共同的缺点，基本都无视 IE，囧。
我也是最近，才知道这句话：不努力，就会变成 IE 浏览器。

美化

由于过分崇拜乔帮主，我把 mdpress 和 reveal 的主题，改成了 Keynote 风格：

body {
    color:#fff;
    background: linear-gradient(top,  #000 0%,#636172 100%);
    background: -moz-linear-gradient(top, #000 0%, #636172 100%);
    background: -webkit-linear-gradient(top,  #000 0%,#636172 100%);
    background: -ms-linear-gradient(top, rgb(0, 0, 0), rgb(99, 97, 116));
    background: -o-linear-gradient(top, rgb(0, 0, 0), rgb(99, 97, 116));
}

定型

今天重拾这个话题，决定好好学习使用 mdpress 。

$ where mdpress
/Users/Christen/.rvm/gems/ruby-1.9.3-p392/bin/mdpress

mdpress 使用 ruby 开发，好久没有用过了，先升级一下 mdpress

$ gem help commands

GEM commands are:

Command	Description
build	Build a gem from a gemspec
cert	Manage RubyGems certificates and signing settings
check	Check installed gems
cleanup	Clean up old versions of installed gems in the local repository
contents	Display the contents of the installed gems
dependency	Show the dependencies of an installed gem
environment	Display information about the RubyGems environment
fetch	Download a gem and place it in the current directory
generate_index	Generates the index files for a gem server directory
help	Provide help on the ‘gem’ command
install	Install a gem into the local repository
list	Display gems whose name starts with STRING
lock	Generate a lockdown list of gems
outdated	Display all gems that need updates
owner	Manage gem owners on RubyGems.org.
pristine	Restores installed gems to pristine condition from files located in the gem cache
push	Push a gem up to RubyGems.org
query	Query gem information in local or remote repositories
rdoc	Generates RDoc for pre-installed gems
regenerate_binstubs	Re run generation of executable wrappers for gems.
search	Display all gems whose name contains STRING
server	Documentation and gem repository HTTP server
sources	Manage the sources and cache file RubyGems uses to search for gems
specification	Display gem specification (in yaml)
stale	List gems along with access times
uninstall	Uninstall gems from the local repository
unpack	Unpack an installed gem to the current directory
update	Update the named gems (or all installed gems) in the local repository
which	Find the location of a library file you can require

升级记录：

$ gem update mdpress
Updating installed gems
Updating mdpress
Fetching: redcarpet-3.2.2.gem (100%)
Building native extensions.  This could take a while...
Fetching: json-1.8.2.gem (100%)
Building native extensions.  This could take a while...
Fetching: httparty-0.13.3.gem (100%)
When you HTTParty, you must party hard!
Fetching: mdpress-0.0.18.gem (100%)
Successfully installed redcarpet-3.2.2
Successfully installed json-1.8.2
Successfully installed httparty-0.13.3
Successfully installed mdpress-0.0.18
Gems updated: redcarpet, json, httparty, mdpress
Installing ri documentation for redcarpet-3.2.2...
Installing ri documentation for json-1.8.2...
Installing ri documentation for httparty-0.13.3...
Installing ri documentation for mdpress-0.0.18...
Installing RDoc documentation for redcarpet-3.2.2...
Installing RDoc documentation for json-1.8.2...
Installing RDoc documentation for httparty-0.13.3...
Installing RDoc documentation for mdpress-0.0.18...

官方提供了以下四套主题

1. $ mdpress code.md -s deckjs
2. $ mdpress code.md -s impress
3. $ mdpress code.md -s obtvse
4. $ mdpress code.md -s default

自定义主题的方法
You can also create your own local theme:

1. Use the lib/impress_css/ files as a model to work from.
2. Create a folder called themes in the directory where your markdown file is. Inside it put the [yourtheme].css and [yourtheme].html files
3. Call mdpress -s [yourtheme] and mdpress will look for the two theme files in themes/ matching that name.

我定义的主题名为 keynote，主要是修改背景颜色和字体颜色，用 360 字体库替换 Google 字体库：

<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,800italic,300,400,800' rel='stylesheet' type='text/css'>

最后的问题：
Mdpress 通过 MathJax 支持数学公式的展示，但是这次测试不成功，之前的在线演示却可以，好在我不是学数学的，这方面的需求不多。


When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$