怎么在Linux下制作HTML幻燈片

發(fā)布時(shí)間：2021-08-07 17:39:14 來(lái)源：億速云閱讀：181 作者：chen 欄目：系統(tǒng)運(yùn)維

這篇文章主要介紹“怎么在Linux下制作HTML幻燈片”，在日常操作中，相信很多人在怎么在Linux下制作HTML幻燈片問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”怎么在Linux下制作HTML幻燈片”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

準(zhǔn)備工作：安裝Pandoc

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

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

代碼如下:

$ cabal update
$ cabal install pandoc

書寫內(nèi)容

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

書寫HTML幻燈片可以像日常記筆記一樣簡(jiǎn)捷快速。實(shí)際上，這些幻燈片本身就是用輕量級(jí)標(biāo)記語(yǔ)言寫成的純文本，你可以用任何一種Pandoc支持的標(biāo)記語(yǔ)言（Markdown、org-mode、reST、Textile……）來(lái)書寫其內(nèi)容。在此以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

分級(jí)標(biāo)題、列表、插入圖片……等標(biāo)準(zhǔn)的Markdown語(yǔ)法均被支持，和平常用Markdown記筆記寫博客無(wú)異。

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

為了生成合適的用于演示的HTML文檔，需要記住的另一點(diǎn)是：在默認(rèn)情況下每個(gè)二級(jí)標(biāo)題是一張獨(dú)立的幻燈片。這樣在寫作的時(shí)候，只需注意把每個(gè)二級(jí)標(biāo)題下的內(nèi)容控制在適當(dāng)?shù)拈L(zhǎng)度。

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

也可以直接在文本中嵌入HTML，用于顯示Markdown等標(biāo)記語(yǔ)言不支持的表格，或控制字體大小，以及進(jìn)行其他更加復(fù)雜的排版。當(dāng)然，如果用到的HTML標(biāo)簽過(guò)多，這不是Markdown這些輕量級(jí)標(biāo)記語(yǔ)言的錯(cuò)，也許是做幻燈片的方式出了問題。因?yàn)檠菔颈旧硪獋鬟_(dá)的是內(nèi)容，復(fù)雜的排版沒有任何意義。

定義樣式

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

    DZSlides
    Slidy
    S5
    Slideous
    reveal.js

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

首先，如果你知道如何寫CSS去定義頁(yè)面外觀、如何寫JavaScript讓<div>元素動(dòng)起來(lái)，或者已經(jīng)有了一個(gè)不錯(cuò)的HTML幻燈片模板，你就可以直接讓Pandoc把Markdown轉(zhuǎn)換成純HTML片段，用來(lái)嵌到自己的模板里：

代碼如下:

$ pandoc slides.md -o slides.html

生成一個(gè)完整的HTML頁(yè)面（包含<html>、<head>、<body>標(biāo)簽和各種元信息）：

代碼如下:

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

DZSlides

當(dāng)然，我們完全沒有必要寫自己的HTML模板，因?yàn)镻andoc已經(jīng)提供了對(duì)多種幻燈片模板的支持。DZSlides便是其中最簡(jiǎn)單的一種，支持鍵盤操作→/←翻頁(yè)，PgUp/PgDn，Home/End。

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

采用默認(rèn)模板渲染一個(gè)獨(dú)立的DZSlides幻燈片：

代碼如下:

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

若要對(duì)模板的樣式進(jìn)行調(diào)整，可以用--template指定自定義模板。默認(rèn)的模板為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開發(fā)的一個(gè)極簡(jiǎn)主義HTML幻燈片模板，沒有任何多余的樣式，支持鼠標(biāo)單擊翻頁(yè)，鍵盤操作→/←，PgUp/PgDn，Home/End。

采用默認(rèn)模板渲染一個(gè)獨(dú)立的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這兩個(gè)外部文件。若不想依賴http://www.w3.org/，可以將它們保存為本地文件。
S5

S5（Simple Standards-Based Slide Show System）是一個(gè)公有領(lǐng)域的HTML幻燈片規(guī)范。它支持鼠標(biāo)單擊翻頁(yè)，鍵盤操作→/←，PgUp/PgDn，Home/End。

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

渲染幻燈片：

代碼如下:

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

在S5的幻燈片界面上，鼠標(biāo)移到右下角可以看到若干控制選項(xiàng)。
Slideous

Slideous是另一個(gè)有些年頭的HTML幻燈片框架。支持鼠標(biāo)單擊翻頁(yè)，鍵盤操作→/←，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的界面上提供了比較豐富的控制選項(xiàng)。
reveal.js

reveal.js這東西已經(jīng)紅得不能更紅了，最近開始火起來(lái)的WYSIWYG在線幻燈片工具slid.es也是基于它。

reveal.js的設(shè)計(jì)風(fēng)格（字體、HTML5/CSS3效果）比起前面幾個(gè)框架更加現(xiàn)代，所以如果沒有特別的理由（舊瀏覽器兼容性）的話，reveal.js果然還是最應(yīng)該推薦的一個(gè)。

雖說(shuō)reveal.js本身就提供對(duì)Markdown語(yǔ)法的支持，不過(guò)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

除了默認(rèn)的外觀主題以外，reveal.js還提供了多個(gè)主題可供選擇，

代碼如下:

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

    default：（默認(rèn)）深灰色背景，白色文字
    beige：米色背景，深色文字
    sky：天藍(lán)色背景，白色細(xì)文字
    night：黑色背景，白色粗文字
    serif：淺色背景，灰色襯線文字
    simple：白色背景，黑色文字
    solarized：奶油色背景，深青色文字

LaTeX Beamer

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

代碼如下:

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

更多設(shè)置
幻燈片級(jí)別（Slide level）

在前文的例子里看到，

代碼如下:

# In the morning

## Getting up

- Turn off alarm
- Get out of bed

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

可以使用--slide-level選項(xiàng)覆蓋默認(rèn)的Slide level。

在reveal.js模板下，由于幻燈片的滾動(dòng)方向可以是二維的（鍵盤→←↑↓），所以1級(jí)標(biāo)題渲染為水平方向的幻燈片，2級(jí)標(biāo)題渲染為豎直方向的幻燈片。
“華麗麗的分割線”：

------------------

用來(lái)強(qiáng)制生成新的幻燈片。
漸進(jìn)顯示

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

代碼如下:

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

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

. . .

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公式渲染方式的選項(xiàng)有--mathml，--webtex，--mathjax和--latexmathml。（Chrome和Firefox均支持MathML）
代碼高亮風(fēng)格

控制代碼高亮風(fēng)格的選項(xiàng)有：

    --highlight-style pygments
    --highlight-style kate
    --highlight-style monochrome
    --highlight-style espresso
    --highlight-style haddock
    --highlight-style tango
    --highlight-style zenburn

自定義CSS

你當(dāng)然可以通過(guò)修改相應(yīng)模板文件夾下的CSS來(lái)實(shí)現(xiàn)自定義外觀，不過(guò)也可以使用--css指定任何現(xiàn)成的CSS文件。
提示板

首先，提示板的功能僅適用于reveal.js。

其次，由于瀏覽器的本地安全策略，需使用該功能的幻燈片必須在HTTP服務(wù)器上運(yùn)行。

在Markdown中插入標(biāo)簽<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>

使用鍵盤s鍵打開提示板。當(dāng)然，這個(gè)提示板是用來(lái)給演講者自己看的，是不用mirror到外接投影儀的。

到此，關(guān)于“怎么在Linux下制作HTML幻燈片”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問一下細(xì)節(jié)

怎么在Linux下制作HTML幻燈片

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽