markdown 行内公式_用 Markdown 做幻灯片

d16800bdd1ee70c75b15190b135c5c31.png

前言

自从跳了科研这个坑,做幻灯片(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 扩展。

25bf9199520529d5904e7ceeb2875fcf.png

907aa35b1c2b4472875bb65447a4d27e.png

基本语法

Markdown 基本语法

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

标题

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

62c1c20abee5c54ac6b50af5b80ae633.png

列表

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

b997212d0b128d1148c1820b8254674c.png

引用

> 这里是引用

e19d1dad98fe4a4460ed66a2239c0652.png

图片与链接

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

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

d47ef931f011e14b206738a59bedea57.png

强调

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

f50cf54354d351e0e3f93e47a145758a.png

表格

#### 表格


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

f30cba54e1f69a0bfd7498b458925e5c.png

代码块

#### 代码块
```Python
print("hi")
```
#### 行内代码
`print("hi")`正文

9fab155374afe618e60f656f4bf4e40f.png

分割线

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

7f382d999de133296fa1445ac974fd3f.png

公式

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

04f817ddd1cc5f218ab3c29c834731d6.png
#### 块内公式

$$x=frac{-bpmsqrt{b^2-4ac}}{2a}$$

#### 行内公式

$x=frac{-bpmsqrt{b^2-4ac}}{2a}$ 正文

ea6be3a20b37d5ba3de76dbf63f5ffdb.png

MPE 渲染预览

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

c638d005e32a48e2f4911ffbf68d4890.png

9846f4fa3a83709e27acb111e7b2e6b7.png

MPE 幻灯片分割

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

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

cf0d14d6af46ffec4e8a95af17617f07.gif

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
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
正文
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![标题](/images/Snipaste_2020-02-19_19-57-59.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
#### 无序列表
- 1
- 2
- 3
* 1
* 2
* 3
#### 有序列表
1. 1
2. 2
3. 3
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![列表](/images/Snipaste_2020-02-19_20-04-02.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
> 这里是引用
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![引用](/images/Snipaste_2020-02-19_20-12-16.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
#### 插入链接
[Bing](/images/https://cn.bing.com)
#### 插入图片
![Bing](/images/bing-teal-logo-wordmark1-1920.png)
```
<!-- slide -->
### 基本语

#### Markdown 基本语法

![链接和图片](/images/Snipaste_2020-02-19_20-16-30.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
**这里是粗体**
*这里是斜体*
~~这里是删除线~~
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![强调](/images/Snipaste_2020-02-19_21-14-46.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
#### 表格
| 实验组 | 时间  |   数量 |
| :----- | :---: | -----: |
| M1     |  1h   | 120000 |
| M2     |  2h   | 140000 |
| M3     |  3h   | 160000 |
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![表格](/images/Snipaste_2020-02-19_21-16-49.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![代码块](/images/Snipaste_2020-02-19_21-40-34.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![代码块](/images/Snipaste_2020-02-19_21-41-47.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
#### 下面是分割线
***
#### 下面也是分割线
---
```
<!-- slide -->
### 基本语法

#### Markdown 基本语法

![分割线](/images/Snipaste_2020-02-19_21-43-24.png)
<!-- slide -->
### 基本语法

#### Markdown 基本语法

```Markdown
#### 块内公式

$$x=frac{-bpmsqrt{b^2-4ac}}{2a}$$

#### 行内公式

$x=frac{-bpmsqrt{b^2-4ac}}{2a}$
```
<!-- slide -->
### 基本语法

#### Markdown 基本语

![公式](./images/Snipaste_2020-02-22_15-39-17.png)
<!-- slide -->
### 基本语法

#### MPE 幻灯片分割

```Markdown
<!-- slide -->
# Hi here
<!-- slide -->
let us go
<!-- slide -->
Thank you!
```
<!-- slide -->
### 基本语法

#### MPE 幻灯片分割

![MPE 幻灯片分割](/images/test1.gif)
<!-- slide -->
### 代码实例

#### 就是本幻灯片
<!-- slide -->
### 结果输出

![结果输出](/images/Snipaste_2020-02-23_19-12-08.png)
<!-- slide -->
# Thank you!

输出

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

6d558afffa5981d6f066f70e476c004b.png

预告

本次文章只介绍了 Markdown 幻灯片的基本使用,能够满足大部分场景,但是有些进阶的设置在某些时候仍然会被需要,将在下一篇文章中介绍。


1ba645884699cbca4252cff4cd7faff9.png
本专栏团队的公众号
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值