現在越來越流行制作網頁格式的 slides,並通過浏覽器來播放和發布。 這樣做有很多優點:包括跨平台(特別在移動端)、無需特殊軟件支持、分享方便、輕量級等。
可惜並不是所有人都精通網頁編程技術,即便是最常見的 html 和 css,也常常造成 slides 編寫人員的困擾。
一款最理想的 slides 制作工具,應該做到讓用戶只需要關心內容,其它的包括布局、風格等都交由軟件來完成。
隨著 HTML5 的流行,現在已經出現了不少這方面的工具,允許用戶用 Markdown 等文本標記語言來編寫好內容。它們能自動轉化為網頁形式,添加合適的主題,獲得不亞於 PPT 軟件的播放效果,甚至更為強大。
在這裡介紹幾種支持 Markdown 來編寫內容的網頁 slides 生成工具。
對於 Markdown 不熟悉的讀者,推薦先花個五分鐘,簡單看下 Markdown 的簡單語法:http://daringfireball.net/projects/Markdown。順便說下,本文就是使用 Markdown 編寫的。
比較早期的一個利用 Markdown 生成網頁 slides 的工具。
它功能比較單一,特色是支持語法高亮。後面出現的不少工具都參考了它,功能要更加豐富。
remarkjs 是一個簡單的基於 Markdown 的網頁 slides 生成工具。
remarkjs 生成的網頁 slides 支持語法高亮、響應式設計。
Reveal.js 是基於 Node.js 實現的一個網頁 slides 編寫框架。
它支持自定義快捷鍵、嵌套 slides、在網頁中直接嵌入 Markdown 語法、導出 pdf、備注和 JavaScript 等強大功能。
它需要用戶對 HTML 和 CSS 相關技術比較熟悉一些。支持的很多參數可以直接在模板中進行配置,比如自動翻頁、快捷鍵等。
slidify 支持 RMarkdown 語言,可以利用 RMarkdown 文件生成效果驚艷的 HTML5 頁面,並且支持發布到 GitHub、RPub、DropBox 等,當然這就需要用戶熟悉 Markdown,R、LaTex 等多種語言的語法。
R Markdown 語言是 RStudio 支持的一種專門為編寫 HTML 5 的 slides 而提出的混合型語言,它可以很好的混合利用 Markdown,R、LaTex 等多種語言來生成十分復雜的頁面。
KeyDown 與 Showoff, Slidedown, HTML5 Rocks 等類似,也是專注生成單頁的網頁 slides。 它基於 Ruby 語言編寫,利用 deck.js 轉化 Markdown 為網頁 slides。支持語法高亮、背景圖片、快捷鍵等。用戶要自定義一些風格可以修改 css 文件。
其使用過程十分簡單,需要 Ruby、Rubygems 環境。
$ gem install keydown $ keydown generate my_presentation
然後編寫 Markdown 文件,並可以調整 css,之後進行轉換。
$ keydown slides
推薦指數:4
deck.js 是一個專門實現網頁 slides 的 js 框架,網站為 http://imakewebthings.github.com/deck.js。*
Showoff 是一個成熟的網頁 slides 生成工具,基於 Ruby 語言編寫。它借鑒了 S5 (http://meyerweb.com/eric/tools/s5/)。設計了基於 Markdown 的 DSL,因此,用戶只需要懂 Markdown 語法即可。
舉一個例子。
!SLIDE # My Presentation #! SLIDE bullets incremental transition=fade # Bullet Points # * first point * second point * third point
所生成的網頁 slides 功能十分全面,可以說,能想到的功能都實現了,包括語法高亮、菜單、JavaScript、效果、備注等等。
安裝和使用。
$ gem install showoff $ git clone (showoff-repo) $ cd (showoff-repo) $ showoff serve
showoff 唯一的問題可能是它已經有數年沒有更新了,不然完全可以打 5 分。
cleaver 可以將 Markdown 文檔轉化為網頁格式,基於 Ruby 語言編寫,同樣支持基於 Markdown 的 DSL。它的整體設計風格也是十分簡約,作者還有其它幾個很 cute 的小工具。
下面給出一個 clever 支持的文件的例子。
title: Basic Example author: name: Jordan Scales twitter: jdan url: http://jordanscales.com output: basic.html controls: true -- # Cleaver 101 ## A first look at quick HTML presentations -- ### A textual example Content can be written in **Markdown!** New lines no longer need two angle brackets. This will be in a separate paragraph -- ### A list of things * Item 1 * Item B * Item gamma No need for multiple templates!
安裝和使用:
npm install -g cleaver cleaver path/to/something.md
它支持多種主題和語法高亮等功能,
Landslide 可以利用 markdown、ReST 或 textile 格式文件生成 HTML5 的網頁 slides,參考了 Google 的 html5slides。
Landslide 基於 Python 開發,最大的優點就是簡潔,從安裝到編寫,到生成的 slides 風格都十分簡潔。整個過程,用戶只需要懂 Markdown 語法就可以。
此外,它的配置文件(.cfg)使用了類似 ini 文件的語法,也很容易理解。
安裝:
pip install landslide
運行
landslide slides.md
默認會生成 html 格式的 slides。
是不是很簡單?
此外,它還支持生成 pdf、快捷鍵、備注、自定義主題、CSS、JavaScript、注冊新的語法宏等高級功能。
HTML5 Rocks 是一個基於 HTML5 的強大的網頁 slides 展示系統。它生成的網頁可以支持多種風格,但需要用戶掌握一定的網頁編程技術。
另外,可能有人會推薦 Prezi(http://prezi.com),我也為 Prezi 的動態效果所驚訝。但對於關注內容的人員(特別是工程師)來說,並不十分推薦 Prezi,Prezi 往往更適合於設計或市場營銷人員。
使用LiteIDE編寫Markdown文檔 http://www.linuxidc.com/Linux/2014-07/104664.htm
Remarkjs: 使用 Markdown 做幻燈 http://www.linuxidc.com/Linux/2014-04/99416.htm
Markdown編輯器CuteMarkEd的新功能 http://www.linuxidc.com/Linux/2014-02/96567.htm
Markdown 語法說明 http://www.linuxidc.com/Linux/2013-09/90719.htm
Linux下Markdown的安裝及常用語法 http://www.linuxidc.com/Linux/2013-09/90718.htm
Markdown中插入數學公式的方法 http://www.linuxidc.com/Linux/2014-08/104996.htm