製做Geek風格的投影片

作投影片用什麼?若是你的回答是用PowerPoint,有沒有感受弱爆了?好吧,也許你會說用開源的替代,好比openOffice/Libreoffice。固然其實本質都是同樣的,那就是PPT!html

從今天開始不要再說、再用 PPT這三個字母了! 咱們如今要從新定義,使用它原本的名稱投影片!,即使是要裝B用英文的話,也要用Slides這個詞!html5

今天開始,這些都不用了,我將會最有Geek風格的投影片製做方法,也就是Markdown+HTML5的方法。先來講這種方式有什麼好處:git

  1. 採用」輕文本標記型語言「,主要是Markdown語言。文檔和格式分開,輕便簡單方便操做github

  2. 採用HTML5技術,先進快捷。在瀏覽器中打開投影片,很是簡單易行。大多數現代瀏覽器(IE瀏覽器和國產山寨瀏覽器除外)都是支持的。瀏覽器

  3. 很是酷,由於大可能是用Javascript腳本實現的,因此想要多酷就有多酷,徹底自由!ruby

  4. 由於是網頁格式,不用擔憂中文的問題(與Latex Beamer相比較)。只要瀏覽器能顯示和渲染就行。bash

  5. 易於分享,只要放到網站上便可,看的人不須要安裝任何軟件!因此目前有愈來愈多的項目在github上弄個網頁來展現投影片。markdown

  6. 即使不會Javascript和HTML5的語法也不要緊,只要用Markdown和一些工具,就能徹底自由的製做投影片咯!ide

  7. 像寫代碼同樣寫投影片,很是有Geek Style!工具

既然是要用Markdown,那麼首先用markdown來寫一個演講稿大綱,並把這個大綱按照投影片的方式整理一下:

% 主標題
% 演講人
% 日期時間
----
# 投影片的標題
## 副標題
- 列表
- 列表項**強調的內容**
- 列表項3
----
#又一個投影片的標題
1. 有序列表1
2. 有序列表2 *斜體的內容*
----
# 第三張投影片
! [圖片](p_w_picpath/press.jpg)


Markdown+Impress.js


這是我第一個嘗試的辦法,有個項目叫mdpress,它能夠實現Markdown+Impress.js的結合,能夠參考這篇文章。若是不想看英文呢,我就說說如何在Ubuntu下安裝mdpress,簡單至極:

  1. 首先安裝須要的包:

    sudo apt-get install gem ruby-1.9.1-dev
  2. 而後安裝mdpress:

    sudo gem install mdpress
  3. 剩下的就是把投影片"編譯"一下:  

    mdpress slides.md
  4. 此時會在當前目錄下獲得一個叫slides的目錄,這個目錄名和上面的文件名是同樣的,而後進入這個目錄能夠看到一個index.html網頁,用任何現代瀏覽器(Firefox\Chrome\Opera)打開便可。

  5. 左右鍵控制翻頁,大多數瀏覽器用F11來全屏瀏覽。

  6. Impress.js還有恨多很是酷的特效,在markdown寫的投影片裏用至少三個連續短線"----"來分割投影片,在短線下面能夠寫上一些impress.js提供的特效參數。最終版源文件

mdpress項目還有一些示例能夠看看,項目主頁:https://github.com/egonSchiele/mdpress

Markdown+Pandoc+Reveal.js

這是最近剛剛發現的一個,實現的最終效果和上一個差很少,可是我以爲更炫。這是由Reveal.js提供的,自帶了好幾個主題包,其3D效果很是炫。我這裏還要用到Pandoc,因此安裝略有點複雜。能夠看這篇文章這篇文章

  1. 首先是安裝pandoc。

    sudo apt-get install pandoc
  2. 而後須要下載reveal.js項目的代碼https://github.com/hakimel/reveal.js/archive/master.zip

  3. 解包,進入目錄。而後下載這個gist獲得template-revealjs.html文件,放到revel.js項目根目錄下。

  4. 準備好演講用的投影片文件好比slides.md,也放到reveal.js的根目錄下,而後在命令行執行:

pandoc -t html5 --template=template-revealjs.html \
--standalone --section-divs \
--variable theme="beige" \
--variable transition="linear" \
slides.md -o slides.html
  1. 上面這段有不少參數,其中theme能夠指定reveal.js自帶的主題,transition能夠指定reveal.js自帶的切換效果。-o後面的文件名就是「編譯」完成之後的投影片。直接用瀏覽器打開便可。最終效果

  2. 用上下左右鍵來翻頁,用ESC能夠看到整個投影片結構(這是比impress進步的一點)。注意頁面右下角有操做提示,很是方便!

  3. 若是以上步驟嫌麻煩,那麼reveal.js還開發了一個徹底所見即所得的網站,在線製做投影片,在線播放! http://www.rvl.io/

結論

以上兩種方法各有優缺點,若是想表達效果更炫,能夠選用reveal.js的方法。若是想要更簡單快捷的製做投影片能夠選用impress.js的方法。

總之,不管使用以上何種方法,都遠好於用PPT!

相關文章
相關標籤/搜索