分享 用 Markdown 做幻灯片

astaxie · 2020年03月15日 · 611 次阅读

前言

自从跳了科研这个坑,做幻灯片(ppt)应该已经是个十分日常的任务。组会、读书报告、课程期末汇报,以及各种各样的答辩(开题、立项、毕业……),它们最后都要以 “幻灯片演讲” 作为结果展示。

大部分人做幻灯片都是用 PowerPoint 编辑一个现成的模板。模板一般不是来自于各种网上平台就是来自师兄师姐的 “代代相传”。对着自己的课题内容一点点替换掉模板里的内容,然后仔细修改切换效果和对象动画,一番折腾下来还是有些疲惫的。或者有时候直接就自暴自弃,没背景,随便放上图片和文字,展示的效果那就一言难尽了。

那么快速和效果良好可以同时达到吗?

“使用 Markdown 做幻灯片” 就是可能的答案。简单快捷,不用被排版分心,特别适合学术类幻灯片。

环境准备

本文使用 Visual Studio Code 编写 Markdown 源码,使用 Markdown Preview Enhanced 扩展对源码进行渲染和输出。(Visual Studio Code 是个超级棒的编辑器,而 Markdown Preview Enhanced 是使用 Visual Studio Code 编写 Markdown 文档十分有利的工具。)

Visual Studio Code

再开始编写源代码前需要到官网( https://code.visualstudio.com/ )下载并安装好编辑器 Visual Studio Code。

Markdown Preview Enhanced

安装好 Visual Studio Code 后安装 Markdown Preview Enhanced 扩展。

基本语法

Markdown 基本语法

下面介绍一些 Markdown 基本语法,需要了解更为详细的内容请参照 MPE 扩展的官方文档( https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/markdown-basics )。

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
正文

列表

#### 无序列表
- 1
- 2
- 3
* 1
* 2
* 3
#### 有序列表
1. 1
2. 2
3. 3

引用

> 这里是引用

图片与链接

注:图片建议使用相对路径引用,以方便拷贝到别处演示。

插入链接

[Bing](https://cn.bing.com)
#### 插入图片
![Bing](/images/bing-teal-logo-wordmark1-1920.png)

强调

**这里是粗体**
*这里是斜体*
~~这里是删除线~~

表格

#### 表格


| 实验组 | 时间 | 数量 |
| :---- | :--: | -----: |
| M1 | 1h | 120000 |
| M2 | 2h | 140000 |
| M3 | 3h | 160000 |

代码块

#### 代码块
```Python
print("hi")

行内代码

print("hi")正文

![](https://static.gocn.vip/photo/2020/90478fc7-041d-4c96-82a1-058f3ba60e3b.png?x-oss-process=image/resize,w_1920)

### 分割线
```go
#### 下面是分割线
***
#### 下面也是分割线
---

公式

MPE 的支持渲染 KaTex 和 MathJax 公式,默认为 KaTex,可以在 Visual Studio Code 设置中修改。

#### 块内公式

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

#### 行内公式

$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$ 正文

MPE 渲染预览

在代码编辑区域右击,点选菜单项 “Markdown Preview Enhanced: Open Preview to the Side”。编辑区域右侧则会出现预览窗口,可以看到渲染效果,并进行操作。

MPE 幻灯片分割

每张幻灯片的代码以 “<!-- slide -->” 开始至下一张幻灯片的 “<!-- slide -->” 前结束。

<!-- slide -->
# Hi here
<!-- slide -->
let us go
<!-- slide -->
Thank you!

Presentation Front-Matter

MPE 通过 front-matter 进行幻灯片的各种配置,下面这段代码的前四行就是 front-matter 的内容。这里只指定了幻灯片主题为 serif.css,开启了鼠标滚轮切换幻灯片(默认只有右下角按钮切换和键盘方向键切换),并设定了幻灯片的尺寸。主题效果如上节 “MPE 幻灯片分割” 中动图所示。

---
presentation:
  theme: serif.css
  mouseWheel: true
  width: 1000
  height: 900
---
<!-- slide -->
# Hi here
<!-- slide -->
let us go
<!-- slide -->
Thank you!

详细的其他设置可以通过官方文档( https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/presentation?id=%e8%ae%be%e7%bd%ae )查询。编辑器内预览和输出时的默认主题也可以通过扩展的设置项来选择,但是用 front-matter 指定主题会更为快捷。

实例

本节展示一个更为完整的幻灯片代码,大家可以在环境搭建好后查看渲染效果,以使自己有个更为直观完整的印象。

---
presentation:
  theme: solarized.css
  mouseWheel: true
  width: 1000
  height: 900
---
<!-- slide -->
# Markdown

# 制作幻灯片

## by 契卡
<!-- slide -->
# 目录

## 1. 环境准备

## 2. 基本语法

## 3. 代码实例

## 4. 结果输出
<!-- slide -->
### 环境准备

#### Visual Studio Code 编辑器安装

![VS Code](/images/Snipaste_2020-02-19_00-50-32-new.png)
<!-- slide -->
### 环境准备

#### Markdown Preview Enhanced 扩展安装

![Markdown Preview Enhanced](/images/Snipaste_2020-02-19_01-03-02.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
正文

基本语法

Markdown 基本语法

标题

基本语法

Markdown 基本语法

#### 无序列表
- 1
- 2
- 3
* 1
* 2
* 3
#### 有序列表
1. 1
2. 2
3. 3

基本语法

Markdown 基本语法

列表

基本语法

Markdown 基本语法

> 这里是引用

基本语法

Markdown 基本语法

引用

基本语法

Markdown 基本语法

#### 插入链接
[Bing](/images/https://cn.bing.com)
#### 插入图片
![Bing](/images/bing-teal-logo-wordmark1-1920.png)

基本语

Markdown 基本语法

链接和图片

基本语法

Markdown 基本语法

**这里是粗体**
*这里是斜体*
~~这里是删除线~~

基本语法

Markdown 基本语法

强调

基本语法

Markdown 基本语法

#### 表格
| 实验组 | 时间  |   数量 |
| :----- | :---: | -----: |
| M1     |  1h   | 120000 |
| M2     |  2h   | 140000 |
| M3     |  3h   | 160000 |

基本语法

Markdown 基本语法

表格

基本语法

Markdown 基本语法

代码块

基本语法

Markdown 基本语法

代码块

基本语法

Markdown 基本语法

#### 下面是分割线
***
#### 下面也是分割线
---

基本语法

Markdown 基本语法

分割线

基本语法

Markdown 基本语法

#### 块内公式

$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

#### 行内公式

$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

基本语法

Markdown 基本语

公式

基本语法

MPE 幻灯片分割

<!-- slide -->
# Hi here
<!-- slide -->
let us go
<!-- slide -->
Thank you!

基本语法

MPE 幻灯片分割

MPE 幻灯片分割

代码实例

就是本幻灯片

结果输出

结果输出

Thank you!


## 输出
输出幻灯片为 HTML 格式,使用浏览器即可播放。在右侧渲染预览窗口右击,菜单中选择 HTML→HTML(cdn hosted)。如果选择 offline 的话在本机没问题,但是拷贝到别的机子上的时候可能会出现无法正常显示的情况。

![](https://static.gocn.vip/photo/2020/e7f699b9-5818-42f5-91d1-fe8ec90b8540.png?x-oss-process=image/resize,w_1920)

原文:https://zhuanlan.zhihu.com/p/108697301
更多原创文章干货分享,请关注公众号
  • 加微信实战群请加微信(注明:实战群):gocnio
暂无回复。
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册