Pandoc中使用Reveal-js製作幻燈片

工具：Typora (markdown編輯器) + Pandoc + reveal.js

如果需要使用 pandoc 命令，則需將 pandoc 添加到 path 環境變量中

Pandoc

pandoc如果沒有指定輸入文件則從stdin讀取，並且使用stdout作爲默認輸出。可以使用 -o選項指定輸出文件：

pandoc -o output.html input.txt

pandoc 自行安裝

文件轉換

官方提供了各種轉換示例：Pandoc - Demos

還可在線嘗試 Pandoc：Try pandoc!

直接使用 pandoc 命令（使用其默認模板）

轉換爲word：

pandoc -f markdown -t docx file.md -o file.docx

轉換爲 html：

pandoc file.md -o file.html -s

轉換爲pdf：

pandoc test.txt -o test.pdf

直接使用pandoc，遇到如下提示：

pdflatex not found. Please select a different --pdf-engine or install pdflatex

直接使用pandoc命令，使用的是其默認的模板，往往得不到自己想要的效果，所以建議利用 Typora 完成markdown 到其它文件格式的轉換。使用 Typora 調用 Pandoc，好處就是轉換後的文檔格式就是Typora中所顯示的格式。

比如中Typora中markdown與word的互轉：

在Typora中：Typora > 文件 > 導入/導出 選擇 word格式即可。（markdown中的數學公式可以轉換到word中。）

Pandoc具有模塊化設計：它由一系列讀出器和一系列編寫器組成的，讀出器用於以給定格式分析文本並生成一份此文檔的本地表示，編寫器則用於將這份本地表示轉換爲目標格式。因此，增加某種輸入或輸出格式只需要增加一個讀出器或編寫器就可以了。

查看轉換爲pdf使用的默認模板：
pandoc -D latex

轉換爲幻燈片(slides)

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

當然，你實際上可以使用任何喜歡的幻燈片框架，只要讓Pandoc在渲染HTML時使用你指定的模板（使用-t選項）即可。

使用dzslides，轉換爲ppt 的示例：

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

選項 -s 的作用：(表示不理解)

By default, pandoc produces a document fragment. To produce a standalone document (e.g. a valid HTML file including <head> and <body>), use the -s or --standalone flag:

另：使用-s / - standalone選項時，pandoc使用模板添加自立文檔所需的頁眉和頁腳材料
pandoc -s -o output.html input.txt
在直接轉換成html文件的時候感覺加不加-s沒啥大的區別，但在製作幻燈片時必須加 -s選項
HTML fragment:
pandoc README -o example1.html

Standalone HTML file:
pandoc -s README -o example2.html

在這些框架中 Reveal.js 的設計風格（字體、HTML5/CSS3效果）比起前面幾個框架更加現代，所以推薦使用 Reveal.js。

雖說reveal.js本身就提供對Markdown語法的支持.。不過使用Pandoc的好處很明顯，那就是一條命令解決問題，不需要用戶接觸任何HTML，使用簡單。缺點就是需要安裝 pandoc ，而reveal.js只有幾M大小的Js文件而已，且使用 reveal.js 可以更容易進行深度定製。

下文將介紹 reveal.js 的使用。

直接使用Reveal.js

下載 reveal.js文件裏面提供了一個模板文件 index.html 和一個示例文件 demo.html 。

我們在創建幻燈片時，可以複製index.html文件內容，並在其基礎上更改，找到文件中類似下面的標籤，並在裏面添加幻燈片。

        <div class="reveal">
            <div class="slides">
                <section>Slide 1 幻燈片1的內容</section>
                <section>Slide 2 幻燈片2的內容</section>
                  <section data-markdown> 使該幻燈片支持 markdown 語法</selection>
                  <section data-transition="值">爲該幻燈片 使用特定轉場動畫，值可以是：fede，slide，convex，concave，zoom，none</section>
                  <section data-background="#000">爲該幻燈片指定背景色</section>
                  <section data-background-image="圖片路徑">爲該幻燈片指定背景圖片</section>
                <section data-background-video="視頻地址">爲該幻燈片指定背景視頻</section>
            </div>
        </div>

如果還嫌不夠，順便說一句，Reveal.js 支持 javascript，所以其應用場景可不限於傳統的演示文稿——如果你想做一個現場投票、幸運轉盤抽獎，都沒問題。這些有趣的拓展功能都內嵌在你的 Reveal.js 版「PPT」裏。

參考： Reveal.js：把你的 Markdown 文稿變成 PPT - 少數派

更詳細的使用見文檔：GitHub - hakimel/reveal.js: The HTML Presentation Framework

使用Pandoc和Reveal.js製作幻燈片

轉換所用文本（示例文本，標準文本）：

% Habits
% 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

該文本來自： Pandoc - Pandoc User’s Guide

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

首先需要從GitHub上獲取<https://github.com/hakimel/reveal.js>，並將`reveal.js`同名的文件夾放在幻燈片所在目錄下即可：

使用git克隆，或者直接下載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

reveal.js主題：

default：（默認）深灰色背景，白色文字
beige：米色背景，深色文字
sky：天藍色背景，白色細文字
night：黑色背景，白色粗文字
serif：淺色背景，灰色襯線文字
simple：白色背景，黑色文字
solarized：奶油色背景，深青色文字

如果你用於轉換的markdown文件格式不符合要求，可能會出現如下警告：
 pandoc Pandoc.md -o slides.html -t revealjs -s -V theme=night
[WARNING] This document format requires a nonempty &lt;title&gt; element.
  Please specify either 'title' or 'pagetitle' in the metadata.
  Falling back to 'Pandoc'
-V選項：

模板包含變量（variables），它的作用是允許在文件中的任何位置包含任意信息。可以使用-V / - variable選項在命令行中設置它們。

如果未設置變量，pandoc將在文檔的元數據中查找對應的值。元數據可以使用YAML metadata blocks 或--metadata選項進行設置。

YAML metadata blocks：就是出現在文檔頂部，且使用兩個 --- 包圍起來的部分。

幻燈片的分隔依據

內容整理自： Pandoc - Pandoc User’s Guide

默認情況下，幻燈片級別是層次結構中的最高標級別，後面緊跟內容，而不是文檔中某處的一個標題。在上面的示例中，級別1標題後面始終跟有2級標題，後跟內容，因此2是幻燈片級別。

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級標題渲染爲豎直方向的幻燈片。

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

這裏幻燈片的佈局格式：

+---------+     +---------+    +---------+
|         |     |         |    |         |
+---------+     +---------+    +---------+

+---------+     +---------+    +---------+
|         |     |         |    |         |
|  slide1 |     |  slide1 |    |  slide1 |
|         |     |         |    |         |
+---------+     +---------+    +---------+

+---------+     +---------+    +---------+
|         |     |         |    |         |
| slide2  |     | slide2  |    | slide2  |
|         |     |         |    |         |
+---------+     +---------+    +---------+

根據以下規則將文檔劃分爲幻燈片：

水平規則始終會分割出一個新幻燈片（對應上文的 ----------），即可以使用分割線來強行生成新的幻燈片。分隔線的使用場景我想因該是當你的內容在一張幻燈片上裝不下時使用。
幻燈片級別的標題始終會分割出一個新幻燈片。
.....（看不懂）

文件編碼必須是 utf-8，否則當文件中出現中文時會產生如下錯誤：

pandoc: Cannot decode byte '\xe3': Data.Text.Internal.Encoding.decodeUtf8: Invalid UTF-8 stream

漸進顯示的列表

比如有如下列表：

列表項1
列表項2

你希望展示時先顯示列表項1，之後點擊向下箭頭後再顯示列表項2，則可使用下面的 fenced div語法：

::: incremental

- 列表項1i
- 列表項2

:::

這裏 :::對錶示這是一個 div，而 incremental表示它所屬的 class
&lt;div class=incremental&gt;

&lt;/div&gt;

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

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

插入暫停

使用帶空格的三個點 . . .即可插入在兩段文字顯示之間的人爲停頓

## 暫停

暫停之前

. . .

暫停之後

建議直接複製上面的三個點

幻燈片主題

這裏所有的配置 reveal.js configuration options 都可通過變量形式進行設置。比如主題可以使用 theme變量來進行設置：

-V theme=moon

我們找到上面 url 中所列的 keyboard來進行測試：

pandoc test01.txt -o slides.html -t revealjs -s  -V theme=simple -V keyboard=false

效果是我們在生成的幻燈片中不能使用鍵盤的方向鍵來切換幻燈片。

提示板

notes應該是爲了給演講者相應的提示的內容，Notes使用如下格式：

::: notes

這是我的筆記.

- 它可以包含 Markdown
- 比如這個列表
- 只有按 s 鍵，notes纔會顯示

:::

默認看不到notes，只有按 s 鍵，notes纔會顯示。

並排顯示

可以添加多個列，只需將對應的 div的class設置爲columns並且爲 width屬性設置值。示例：

:::::::::::::: {.columns}
::: {.column width="40%"}
contents...
:::
::: {.column width="60%"}
contents...
:::
::::::::::::::

設置背景

Sorry：在我的windows中就是提示找不到本地圖片，可能路徑有問題

當使用在線圖片是可以顯示的，可能會有點慢(在嘗試了幾次後才加載出來)

爲每個幻燈片設置同一個背景圖片：

使用配置選項 parallaxBackgroundImage ，可以在YAML元數據塊中或作爲命令行變量使用該選項。

You can also set parallaxBackgroundHorizontal and parallaxBackgroundVertical the same way and must also set parallaxBackgroundSize to have your values take effect.

爲單獨的某個幻燈片設置背景圖片：

在第一個幻燈片級別的頭部添加 {data-background-image="/path/to/image"}。

add {data-background-image="/path/to/image"} to the first slide-level header on the slide (which may even be empty).

其它的一些 background 設置也可以在單獨的某個幻燈片上使用，包括：

data-background-size, data-background-repeat, data-background-color, data-transition, and data-transition-speed.

查看 reveal.js documentation 文檔以瞭解更多細節 ( 一定要看 )。

示例：

---
title: My Slideshow
parallaxBackgroundImage: /path/to/my/background_image.png
---

## Slide One

Slide 1 has background_image.png as its background.

## {data-background-image="/path/to/special_image.jpg"}

Slide 2 has a special image for its background, even though the header has no content.

In reveal.js’s overview mode, the parallaxBackgroundImage will show up only on the first slide. 只會在第一個幻燈片上顯示

代碼高亮風格

控制代碼高亮風格的選項有：

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

參考：桌面應用|Markdown+Pandoc→HTML幻燈片速成

來自於我的簡書：faner - 簡書

Pandoc中使用Reveal-js製作幻燈片

Pandoc

文件轉換

轉換爲幻燈片(slides)

直接使用Reveal.js

使用Pandoc和Reveal.js製作幻燈片

幻燈片的分隔依據

漸進顯示的列表

插入暫停

幻燈片主題

提示板

並排顯示

設置背景

代碼高亮風格

使用Docker安裝mysql 5 和 mysql 8

Cmder詳細設置

Pandoc中使用Reveal-js製作幻燈片

Pandoc中使用Reveal-js製作幻燈片

Xfce-主題配置

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結