歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux基礎 >> Linux教程 >> Markdown+Pandoc→HTML幻燈片速成

Markdown+Pandoc→HTML幻燈片速成

日期:2017/2/28 14:26:41   编辑:Linux教程

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

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

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

使用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

准備工作:安裝Pandoc

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

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

  1. $ cabal update
  2. $ cabal install pandoc

書寫內容

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

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

  1. %NonsenseStuff
  2. %JohnDoe
  3. %March22,2005
  4. # In the morning
  5. ## Getting up
  6. -Turn off alarm
  7. -Getout of bed
  8. ## Breakfast
  9. -Eat eggs
  10. -Drink coffee
  11. # In the evening
  12. ## Dinner
  13. -Eat spaghetti
  14. -Drink wine
  15. ------------------
  16. ![picture of spaghetti](images/spaghetti.jpg)
  17. ## Going to sleep
  18. -Getin bed
  19. -Count sheep

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

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

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

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

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

定義樣式

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

  • DZSlides
  • Slidy
  • S5
  • Slideous
  • reveal.js

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

自定義HTML模板

首先,如果你知道如何寫CSS去定義頁面外觀、如何寫JavaScript讓<div>元素動起來,或者已經有了一個不錯的HTML幻燈片模板,你就可以直接讓Pandoc把Markdown轉換成純HTML片段,用來嵌到自己的模板裡:

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

生成一個完整的HTML頁面(包含<html>、<head>、<body>標簽和各種元信息):

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

DZSlides

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

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

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

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

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

  1. $ pandoc slides.md -o slides.html -t dzslides --templatedefault.dzslides

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

Slidy

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

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

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

或指定自定義模板:

  1. $ pandoc slides.md -o slides.html -t slidy --templatedefault.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

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

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

渲染幻燈片:

  1. $ 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/下即可。

渲染幻燈片:

  1. $ 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同名的文件夾放在幻燈片所在目錄下即可:

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

渲染幻燈片:

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

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

  1. $ 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幻燈片。如需要打印而不是演示時特別有用。

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

更多詳情見請繼續閱讀下一頁的精彩內容: http://www.linuxidc.com/Linux/2014-10/108384p2.htm

Copyright © Linux教程網 All Rights Reserved