這篇文章主要介紹“怎么在Linux下制作HTML幻燈片”，在日常操作中，相信很多人在怎么在Linux下制作HTML幻燈片問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對大家解答”怎么在Linux下制作HTML幻燈片”的疑惑有所幫助！接下來(lái)，請跟著(zhù)小編一起來(lái)學(xué)習吧！
準備工作：安裝Pandoc
首先，你需要安裝文本轉換的神器Pandoc：http://johnmacfarlane.net/pandoc/installing.html
具體安裝方法參見(jiàn)文檔，在此不再贅述。
代碼如下:
$ cabal update
$ cabal install pandoc
書(shū)寫(xiě)內容
內容是演示文稿的主體。PowerPoint或OpenOffice Impress里面的“大綱”就是用來(lái)把握這個(gè)主體的視圖。這可以讓寫(xiě)作者暫時(shí)忘記幻燈片的具體外觀(guān)、排版這些表面化的東西，把集中力放到整個(gè)演講的邏輯流程和提綱要領(lǐng)上。
書(shū)寫(xiě)HTML幻燈片可以像日常記筆記一樣簡(jiǎn)捷快速。實(shí)際上，這些幻燈片本身就是用輕量級標記語(yǔ)言寫(xiě)成的純文本，你可以用任何一種Pandoc支持的標記語(yǔ)言（Markdown、org-mode、reST、Textile……）來(lái)書(shū)寫(xiě)其內容。在此以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
------------------
## Going to sleep
- Get in bed
- Count sheep
分級標題、列表、插入圖片……等標準的Markdown語(yǔ)法均被支持，和平常用Markdown記筆記寫(xiě)博客無(wú)異。
為了讓Pandoc對不包含任何元信息的Markdown文本進(jìn)行處理生成幻燈片，在文本開(kāi)頭需要包含三行以%打頭的元信息：標題、作者和日期。
為了生成合適的用于演示的HTML文檔，需要記住的另一點(diǎn)是：在默認情況下每個(gè)二級標題是一張獨立的幻燈片。這樣在寫(xiě)作的時(shí)候，只需注意把每個(gè)二級標題下的內容控制在適當的長(cháng)度。
列表的顯示效果可以人為設定，例如在幻燈片演示的時(shí)候逐條漸入，后文會(huì )提到。也可以使用$插入 TeX公式，Pandoc可以將其轉換為被大部分現代瀏覽器支持的MathML，或借助MathJax在較舊瀏覽器中顯示。
也可以直接在文本中嵌入HTML，用于顯示Markdown等標記語(yǔ)言不支持的表格，或控制字體大小，以及進(jìn)行其他更加復雜的排版。當然，如果用到的HTML標簽過(guò)多，這不是Markdown這些輕量級標記語(yǔ)言的錯，也許是做幻燈片的方式出了問(wèn)題。因為演示本身要傳達的是內容，復雜的排版沒(méi)有任何意義。
定義樣式
目前Pandoc包含了對五種HTML幻燈片框架的支持：
DZSlides
Slidy
S5
Slideous
reveal.js
當然，你實(shí)際上可以使用任何喜歡的幻燈片框架（比如Google I/O HTML5 slide template），只要讓Pandoc在渲染HTML時(shí)使用你指定的模板即可。
自定義HTML模板
首先，如果你知道如何寫(xiě)CSS去定義頁(yè)面外觀(guān)、如何寫(xiě)JavaScript讓<div>元素動(dòng)起來(lái)，或者已經(jīng)有了一個(gè)不錯的HTML幻燈片模板，你就可以直接讓Pandoc把Markdown轉換成純HTML片段，用來(lái)嵌到自己的模板里：
代碼如下:
$ pandoc slides.md -o slides.html
生成一個(gè)完整的HTML頁(yè)面（包含<html>、<head>、<body>標簽和各種元信息）：
代碼如下:
$ pandoc slides.md -o slides.html -s
DZSlides
當然，我們完全沒(méi)有必要寫(xiě)自己的HTML模板，因為Pandoc已經(jīng)提供了對多種幻燈片模板的支持。DZSlides便是其中最簡(jiǎn)單的一種，支持鍵盤(pán)操作→/←翻頁(yè)，PgUp/PgDn，Home/End。
Pandoc生成的DZSlides幻燈片中自包含了所需CSS和JavaScript，無(wú)需依賴(lài)任何外部文件。
采用默認模板渲染一個(gè)獨立的DZSlides幻燈片：
代碼如下:
$ pandoc slides.md -o slides.html -t dzslides -s
若要對模板的樣式進(jìn)行調整，可以用--template指定自定義模板。默認的模板為default.dzslides，因此上述命令等效于：
代碼如下:
$ pandoc slides.md -o slides.html -t dzslides --template default.dzslides
可以從這里https://github.com/jgm/pandoc-templates找到原來(lái)的模板，自行修改后替換掉原先的模板。其余幻燈片框架與此相仿，以后不再贅述。
Slidy
HTML Slidy是W3C開(kāi)發(fā)的一個(gè)極簡(jiǎn)主義HTML幻燈片模板，沒(méi)有任何多余的樣式，支持鼠標單擊翻頁(yè)，鍵盤(pán)操作→/←，PgUp/PgDn，Home/End。
采用默認模板渲染一個(gè)獨立的Slidy幻燈片：
代碼如下:
$ pandoc slides.md -o slides.html -t slidy -s
或指定自定義模板：
代碼如下:
$ pandoc slides.md -o slides.html -t slidy --template default.slidy
Pandoc生成的Slidy HTML依賴(lài)于http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css和http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js這兩個(gè)外部文件。若不想依賴(lài)http://www.w3.org/，可以將它們保存為本地文件。
S5
S5（Simple Standards-Based Slide Show System）是一個(gè)公有領(lǐng)域的HTML幻燈片規范。它支持鼠標單擊翻頁(yè)，鍵盤(pán)操作→/←，PgUp/PgDn，Home/End。
為了使用S5作為幻燈片框架，需要從這里下載S5。解壓之后把S5文件夾中的ui/default拷貝到幻燈片所在路徑下，改名為s5/default即可。
渲染幻燈片：
代碼如下:
$ pandoc slides.md -o slides.html -t s5 -s
在S5的幻燈片界面上，鼠標移到右下角可以看到若干控制選項。
Slideous
Slideous是另一個(gè)有些年頭的HTML幻燈片框架。支持鼠標單擊翻頁(yè)，鍵盤(pán)操作→/←，PgUp/PgDn，Home/End。
下載http://goessner.net/download/prj/slideous/slideous.js和http://goessner.net/download/prj/slideous/slideous.css這兩個(gè)文件，放到本地目錄slideous/下即可。
渲染幻燈片：
代碼如下:
$ pandoc slides.md -o slides.html -t slideous -s
Slideous的界面上提供了比較豐富的控制選項。
reveal.js
reveal.js這東西已經(jīng)紅得不能更紅了，最近開(kāi)始火起來(lái)的WYSIWYG在線(xiàn)幻燈片工具slid.es也是基于它。
reveal.js的設計風(fēng)格（字體、HTML5/CSS3效果）比起前面幾個(gè)框架更加現代，所以如果沒(méi)有特別的理由（舊瀏覽器兼容性）的話(huà)，reveal.js果然還是最應該推薦的一個(gè)。
雖說(shuō)reveal.js本身就提供對Markdown語(yǔ)法的支持，不過(guò)Pandoc的好處很明顯，那就是一條命令解決問(wèn)題，不需要用戶(hù)接觸任何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
除了默認的外觀(guān)主題以外，reveal.js還提供了多個(gè)主題可供選擇，
代碼如下:
$ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige
default：（默認）深灰色背景，白色文字
beige：米色背景，深色文字
sky：天藍色背景，白色細文字
night：黑色背景，白色粗文字
serif：淺色背景，灰色襯線(xiàn)文字
simple：白色背景，黑色文字
solarized：奶油色背景，深青色文字
LaTeX Beamer
最后，雖然不是HTML，Pandoc也可以用來(lái)將Markdown文件渲染成LaTeX beamer樣式的PDF幻燈片。如需要打印而不是演示時(shí)特別有用。
代碼如下:
$ 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。這意味著(zhù)每個(gè)2級標題生成一張幻燈片。高于2級的標題（1級標題）生成一張獨立的僅包含標題的幻燈片，而低于2級的標題（3級標題）將存在于上一級標題的幻燈片中，不單獨生成新的幻燈片。
可以使用--slide-level選項覆蓋默認的Slide level。
在reveal.js模板下，由于幻燈片的滾動(dòng)方向可以是二維的（鍵盤(pán)→←↑↓），所以1級標題渲染為水平方向的幻燈片，2級標題渲染為豎直方向的幻燈片。
“華麗麗的分割線(xiàn)”：
------------------
用來(lái)強制生成新的幻燈片。
漸進(jìn)顯示
生成幻燈片時(shí)加入-i選項，用于控制列表的顯示效果（逐條漸入）。
代碼如下:
$ pandoc slides.md -o slides.html -t slidy -s -i
兩段文字顯示之間的人為停頓，用如下分割線(xiàn)：
. . .
TeX公式
可以直接插入TeX公式：
代碼如下:
$e^x =\sum_{n=0}^\infty\frac{x^n}{n!} =\lim_{n\rightarrow\infty} (1+x/n)^n$
MathML的渲染效果為：
代碼如下:
ex=∑n=0∞xnn!=limn→∞(1+x/n)n
控制TeX公式渲染方式的選項有--mathml，--webtex，--mathjax和--latexmathml。（Chrome和Firefox均支持MathML）
代碼高亮風(fēng)格
控制代碼高亮風(fēng)格的選項有：
--highlight-style pygments
--highlight-style kate
--highlight-style monochrome
--highlight-style espresso
--highlight-style haddock
--highlight-style tango
--highlight-style zenburn
自定義CSS
你當然可以通過(guò)修改相應模板文件夾下的CSS來(lái)實(shí)現自定義外觀(guān)，不過(guò)也可以使用--css指定任何現成的CSS文件。
提示板
首先，提示板的功能僅適用于reveal.js。
其次，由于瀏覽器的本地安全策略，需使用該功能的幻燈片必須在HTTP上運行。
在Markdown中插入標簽<div class="notes">的小抄：
代碼如下:
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"notes"</span><span class="nt">></span>
This is my note.
- It can contain markdown
- like this list
<span class="nt"></div></span>
使用鍵盤(pán)s鍵打開(kāi)提示板。當然，這個(gè)提示板是用來(lái)給演講者自己看的，是不用mirror到外接投影儀的。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
