用MarkDown写跨平台的PPT

0. 先来个最终效果

1. 预备知识

1.1 实现机制

• Pandoc，一个格式转换器，PDF，Markdown，Word，LaTex支持几十种格式互转，堪称文档格式转换届的瑞士军刀
• MarkDown，这是轻文档格式
• Html，这是网页，有浏览器就能看
• Reveal.js 这是一个文档展示的框架

---

1.2 需要的材料

• [Pandoc]{.highlight} ver 2.11.3.2 跨平台，Linux，Windows均有
• [Reveal.JS]{.highlight} ver 4.1.0
• 写MarkDownD文档的编辑器，记事本都可以

2. 从源码逐步看

2.1 首页

title: 5分钟写完一个跨平台的PPT
author: Adam Xiao
date: Jan 20, 2021
---

• 首页的代码其实就这么几行，很固定，标题，作者，日期

• ---这个相当于ppt的分页符，多于3个的-就可以，如果喜欢你可以写10个

---

2.2 第二页

# 预备知识

## 实现机制

这里的 # 是Markdown的标题分级，#代表第一级标题 ##代表第二级标题

当然你写几个井号就是第几级标题了啊，不过这里一般不建议多于三级

---

2.3 如何嵌入图片呢

引用图片
![](./convert.png)  
引用网页
[url](https://www.baidu.com/) 

这里是Markdown引用图片的语法，引用网页也是类似，少一个！而已。
[]里面填的是图注或者url显示的名称。

---

2.4 如何分栏显示呢

:::::::::::::: {.columns}
::: {.column width="40%"}
第一栏里面要写东西
:::
::: {.column width="30%"}
第二栏里面要写东西
:::
::: {.column width="30%"}
第三栏里面要写东西
:::
::::::::::::::

这个语法是pandoc赋予的转换规则，不是markdown的，不过看起来也容易理解

这个功能实际上用的不太多。

---

2.5 如何写幻灯片注释呢

:::notes
我是演讲者模式的备注.exe
:::

在某张幻灯片的任意处添加这个，那么这些东西只会在演讲者模式中呈现。

按 [S]{.highlight} 可以打开演讲者模式。

顺便提一下，按B是黑屏，按shift+?是帮助菜单，Esc是全景式图

---

2.6 如何高亮某部分

 [要高亮的内容]{.highlight}

在外部搞个css文件

/* custom.css */
.highlight {
    color: red;
    border-style: double;
    font-size: larger;
}

3. 从源码转成PPT

3.1 基本命令

pandoc 源码.md -s -o 展示文件.html -t revealjs 

1. -o 输出成什么
2. -s 标准的html
3. -t revealjs 按照reveal.js的格式输出

---

3.2 个性化指令

pandoc 源码.md  --css custom.css -s -o 展示文件.html -t revealjs -i -V theme=league -V revealjs-url=./revealjs

1. -i 表示所有标题类文本按一下空格才显现
2. -V theme=league 选择幻灯片主题
3. -V revealjs-url=./revealjs 如果离线环境可以指定js脚本本地路径
4. –css custom.css 指定源码中使用的特殊格式的css文件路径

4. 如何播放

4.1 有外网播放方式

直接把生成的html文件运行即可

---

4.2 无外网播放方式

把html文件，和reveal.js脚本文件夹和资源文件放在一起，运行

5. 彩蛋

其实这篇文章就是用生成ppt的md略作修改发的博客哟。

5.1 这篇博文的PPT md源码

编译指令：

pandoc --css custom.css -s test.md -o index.html -t revealjs -i -V theme=league -V revealjs-url=./revealjs

test.md

---
title: 5分钟写完一个跨平台的PPT
author: Adam Xiao
date: Jan 20, 2021
---

# 预备知识

## 实现机制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YNb8eekY-1611140591884)(./convert.png)]

:::::::::::::: {.columns}
::: {.column width="50%"}
- Pandoc
- MarkDown
:::
::: {.column width="50%"}
- Html
- Reveal.js
:::
::::::::::::::


::: notes
- pandoc，一个格式转换器，PDF，Md，Word，LaTex支持几十种格式互转，堪称文档格式转换届的瑞士军刀
- MarkDown，这是轻文档格式
- Html，这是网页，有浏览器就能看
- revealjs 这是一个文档展示的框架
:::

---

## 需要的材料

- [Pandoc]{.highlight} ver 2.11.3.2 跨平台，Linux，Windows均有
- [Reveal.JS]{.highlight} ver 4.1.0
- 写MarkDownD文档的编辑器，记事本都可以

-----

# 从源码逐步看

## 首页

```md
title: 5分钟写完一个跨平台的PPT
author: Adam Xiao
date: Jan 20, 2021
---
```

- 首页的代码其实就这么几行，很固定，标题，作者，日期

- `---`这个相当于ppt的分页符，多于3个的`-`就可以，如果喜欢你可以写10个

----

## 第二页

```md

# 预备知识

## 实现机制

```


这里的 `#` 是Markdown的标题分级，`#`代表第一级标题 `##`代表第二级标题


:::notes
当然你写几个井号就是第几级标题了啊，不过这里一般不建议多于三级
:::

------

## 如何嵌入图片呢

```md
引用图片
![](./convert.png)  
引用网页
[url](https://www.baidu.com/) 
```

这里是Markdown引用图片的语法，引用网页也是类似，少一个！而已。

:::notes
[]里面填的是图注或者url显示的名称。
:::


----


## 如何分栏显示呢

```md
:::::::::::::: {.columns}
::: {.column width="40%"}
第一栏里面要写东西
:::
::: {.column width="30%"}
第二栏里面要写东西
:::
::: {.column width="30%"}
第三栏里面要写东西
:::
::::::::::::::
```

这个语法是pandoc赋予的转换规则，不是markdown的，不过看起来也容易理解

:::notes
这个功能实际上用的不太多。
:::

-------

## 如何写幻灯片注释呢

```md
:::notes
我是演讲者模式的备注.exe
:::
```

在某张幻灯片的任意处添加这个，那么这些东西只会在演讲者模式中呈现。

按 [S]{.highlight} 可以打开演讲者模式。

:::notes
顺便提一下，按B是黑屏，按shift+?是帮助菜单，Esc是全景式图
:::

------

## 如何高亮某部分

```md
 [要高亮的内容]{.highlight}
```

在外部搞个css文件

```css
/* custom.css */
.highlight {
    color: red;
    border-style: double;
    font-size: larger;
}
```


# 从源码转成PPT

## 基本命令

```sh
pandoc 源码.md -s -o 展示文件.html -t revealjs 
```

1. -o 输出成什么
2. -s 标准的html
3. -t revealjs 按照reveal.js的格式输出

------


## 个性化指令


```sh
pandoc 源码.md -s -o 展示文件.html -t revealjs -i -V theme=league -V revealjs-url=./revealjs
```

1. -i 表示所有标题类文本按一下空格才显现
2. -V theme=league 选择幻灯片主题
3. -V revealjs-url=./revealjs 如果离线环境可以指定js脚本本地路径



# 如何播放

## 有外网播放方式

直接把生成的html文件运行即可

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


## 无外网播放方式

把html文件，和reveal.js脚本文件夹和资源文件放在一起，运行



# Thank you

## Q & A