在Linux下制作HTML幻燈片的簡單教程參考

時間：2024-09-20 06:54:17 HTML DOM

　　所見即所得的PPT是一個比較低效的東西，因為沒有做到內容與樣式相分離，在做幻燈片的時候要把一半的精力放在外觀而不是內容上；復雜龐大的文件格式，不符合Unix的純文本哲學，只適合在特定的GUI下通過鼠標操作，無法通過文本編輯器修改，更難以用文本工具腳本處理；再加上微軟他家的格式不開放，各路開源不開源的Office產品搞出來了各種程度不同的兼容性，非常分裂。

　　所以，有Web這樣一個開放的、純粹基于文本的業界標準就很重要。

　　這篇主要講如何用Markdown這樣的輕量級標記語言在編輯器中書寫文本內容，用Pandoc迅速將其轉換成基于Web的演示文稿。如是，可以在開會前十分鐘根據事務提綱炮制出幾十頁的幻燈片，且不失美觀。

　　準備工作：安裝Pandoc

　　首先，你需要安裝文本轉換的神器Pandoc：http://johnmacfarlane.net/pandoc/installing.html

　　具體安裝方法參見文檔，在此不再贅述。

　　$ cabal update

　　$ cabal install pandoc

　　書寫內容

　　內容是演示文稿的主體。PowerPoint或OpenOffice Impress里面的“大綱”就是用來把握這個主體的視圖。這可以讓寫作者暫時忘記幻燈片的具體外觀、排版這些表面化的東西，把集中力放到整個演講的邏輯流程和提綱要領上。

　　書寫HTML幻燈片可以像日常記筆記一樣簡捷快速。實際上，這些幻燈片本身就是用輕量級標記語言寫成的純文本，你可以用任何一種Pandoc支持的標記語言（Markdown、org-mode、reST、Textile……）來書寫其內容。在此以Markdown為例：

　　% Nonsense Stuff

　　% John Doe

　　% March 22, 2005

　　# In the morning

　　## Getting up

　　- Turn off alarm

　　- Get out of bed

　　## Breakfast

　　- Eat eggs

　　- Drink coffee

　　# In the evening

　　## Dinner

　　- Eat spaghetti

　　- Drink wine

　　![picture of spaghetti](images/spaghetti.jpg)

　　## Going to sleep

　　- Get in bed

　　- Count sheep

　　分級標題、列表、插入圖片……等標準的Markdown語法均被支持，和平常用Markdown記筆記寫博客無異。

　　為了讓Pandoc對不包含任何元信息的Markdown文本進行處理生成幻燈片，在文本開頭需要包含三行以%打頭的元信息：標題、作者和日期。

　　為了生成合適的用于演示的HTML文檔，需要記住的另一點是：在默認情況下每個二級標題是一張獨立的幻燈片。這樣在寫作的時候，只需注意把每個二級標題下的內容控制在適當的長度。

　　列表的顯示效果可以人為設定，例如在幻燈片演示的時候逐條漸入，后文會提到。也可以使用$插入 TeX公式，Pandoc可以將其轉換為被大部分現代瀏覽器支持的MathML，或借助MathJax在較舊瀏覽器中顯示。

　　也可以直接在文本中嵌入HTML，用于顯示Markdown等標記語言不支持的表格，或控制字體大小，以及進行其他更加復雜的排版。當然，如果用到的HTML標簽過多，這不是Markdown這些輕量級標記語言的錯，也許是做幻燈片的方式出了問題。因為演示本身要傳達的是內容，復雜的排版沒有任何意義。

　　定義樣式

　　目前Pandoc包含了對五種HTML幻燈片框架的支持：

　　DZSlides

　　Slidy

　　Slideous

　　reveal.js

　　當然，你實際上可以使用任何喜歡的幻燈片框架（比如Google I/O HTML5 slide template），只要讓Pandoc在渲染HTML時使用你指定的模板即可。

　　自定義HTML模板

　　首先，如果你知道如何寫CSS去定義頁面外觀、如何寫JavaScript讓

　　元素動起來，或者已經有了一個不錯的HTML幻燈片模板，你就可以直接讓Pandoc把Markdown轉換成純HTML片段，用來嵌到自己的模板里：

　　$ pandoc slides.md -o slides.html

　　生成一個完整的HTML頁面（包含、、標簽和各種元信息）：

　　$ pandoc slides.md -o slides.html -s

　　DZSlides

　　當然，我們完全沒有必要寫自己的HTML模板，因為Pandoc已經提供了對多種幻燈片模板的支持。DZSlides便是其中最簡單的一種，支持鍵盤操作→/←翻頁，PgUp/PgDn，Home/End。

　　Pandoc生成的DZSlides幻燈片中自包含了所需CSS和JavaScript，無需依賴任何外部文件。

　　采用默認模板渲染一個獨立的DZSlides幻燈片：

　　$ pandoc slides.md -o slides.html -t dzslides -s

　　若要對模板的樣式進行調整，可以用--template指定自定義模板。默認的模板為default.dzslides，因此上述命令等效于：

　　$ pandoc slides.md -o slides.html -t dzslides --template default.dzslides

　　可以從這里https://github.com/jgm/pandoc-templates找到原來的模板，自行修改后替換掉原先的模板。其余幻燈片框架與此相仿，以后不再贅述。

　　Slidy

　　HTML Slidy是W3C開發的一個極簡主義HTML幻燈片模板，沒有任何多余的樣式，支持鼠標單擊翻頁，鍵盤操作→/←，PgUp/PgDn，Home/End。

　　采用默認模板渲染一個獨立的Slidy幻燈片：

　　$ pandoc slides.md -o slides.html -t slidy -s

　　或指定自定義模板：

　　$ pandoc slides.md -o slides.html -t slidy --template default.slidy

　　Pandoc生成的Slidy HTML依賴于http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css和http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js這兩個外部文件。若不想依賴http://www.w3.org/，可以將它們保存為本地文件。

　　S5（Simple Standards-Based Slide Show System）是一個公有領域的HTML幻燈片規范。它支持鼠標單擊翻頁，鍵盤操作→/←，PgUp/PgDn，Home/End。

　　為了使用S5作為幻燈片框架，需要從這里下載S5。解壓之后把S5文件夾中的ui/default拷貝到幻燈片所在路徑下，改名為s5/default即可。

　　渲染幻燈片：

　　$ pandoc slides.md -o slides.html -t s5 -s

　　在S5的幻燈片界面上，鼠標移到右下角可以看到若干控制選項。

　　Slideous

　　Slideous是另一個有些年頭的HTML幻燈片框架。支持鼠標單擊翻頁，鍵盤操作→/←，PgUp/PgDn，Home/End。

　　下載http://goessner.net/download/prj/slideous/slideous.js和http://goessner.net/download/prj/slideous/slideous.css這兩個文件，放到本地目錄slideous/下即可。

　　渲染幻燈片：

　　$ 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上獲取https://github.com/hakimel/reveal.js，將reveal.js同名的文件夾放在幻燈片所在目錄下即可：

　　$ git clone https://github.com/hakimel/reveal.js

　　渲染幻燈片：

　　$ pandoc slides.md -o slides.html -t revealjs -s

　　除了默認的外觀主題以外，reveal.js還提供了多個主題可供選擇，

　　$ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige

　　default：（默認）深灰色背景，白色文字

　　beige：米色背景，深色文字

　　sky：天藍色背景，白色細文字

　　night：黑色背景，白色粗文字

　　serif：淺色背景，灰色襯線文字

　　simple：白色背景，黑色文字

　　solarized：奶油色背景，深青色文字

　　LaTeX Beamer

　　最后，雖然不是HTML，Pandoc也可以用來將Markdown文件渲染成LaTeX beamer樣式的PDF幻燈片。如需要打印而不是演示時特別有用。

　　$ pandoc slides.md -o slides.pdf -t beamer

　　更多設置

　　幻燈片級別（Slide level）

　　在前文的例子里看到，

　　# In the morning

　　## Getting up

　　- Turn off alarm

　　- Get out of bed

　　1級標題In the morning后面緊跟2級標題Getting up，而2級標題Getting up后面的內容是顯示在幻燈片上的主體內容，因此這里的Slide level為2。這意味著每個2級標題生成一張幻燈片。高于2級的標題（1級標題）生成一張獨立的僅包含標題的幻燈片，而低于2級的標題（3級標題）將存在于上一級標題的幻燈片中，不單獨生成新的幻燈片。

　　可以使用--slide-level選項覆蓋默認的Slide level。

　　在reveal.js模板下，由于幻燈片的滾動方向可以是二維的（鍵盤→←↑↓），所以1級標題渲染為水平方向的幻燈片，2級標題渲染為豎直方向的幻燈片。

　　用來強制生成新的幻燈片。

　　漸進顯示

　　生成幻燈片時加入-i選項，用于控制列表的顯示效果（逐條漸入）。

　　$ pandoc slides.md -o slides.html -t slidy -s -i

　　兩段文字顯示之間的人為停頓，用如下分割線：

　　. . .

　　TeX公式

　　可以直接插入TeX公式：

　　$e^x =sum_{n=0}^inftyfrac{x^n}{n!} =lim_{nrightarrowinfty} (1+x/n)^n$

　　MathML的渲染效果為：