mdx-deck 制作幻灯片

mdx-deck 制作幻灯片

该项目的 Github 地址为:jxnblk/mdx-deck
可以使用 Markdown 编写幻灯片,并编译成 html/pdf 文件。
下面介绍这个工具的用法。

第一步

创建一个新的文件夹,在终端运行下面的命令:

Shell
1
sudo cnpm i -D mdx-deck

然后你就会发现该文件夹里出现了一个 node_modules 文件夹和一个 package.json 文件。

第二步

创建一个 deck.mdx 文件,里面是用 Markdown 语法编写的内容,例如:

Markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export { hack as theme } from 'mdx-deck/themes'

# mdx-deck制作幻灯片
## 程振兴 2018年9月19日

---

# 第二页PPT

---

# 第三页PPT

---

# 第四页PPT

export { hack as theme } from 'mdx-deck/themes'是设定主题用的。这里使用的是 hack 主题。

第三步

在 package.json 文件里面添加下面的代码:

JavaScript
1
2
3
4
5
"scripts": {
"start": "mdx-deck deck.mdx",
"build": "mdx-deck build deck.mdx",
"pdf": "mdx-deck pdf deck.mdx"
},

也就是所 package.json 文件的整体内容是这样的:

JavaScript
1
2
3
4
5
6
7
8
9
10
{
"scripts": {
"start": "mdx-deck deck.mdx",
"build": "mdx-deck build deck.mdx",
"pdf": "mdx-deck pdf deck.mdx"
},
"devDependencies": {
"mdx-deck": "^1.7.4"
}
}

第四步

  • 运行sudo cnpm start即可实时查看幻灯片;

第一页 PPT 的效果是这样的:

  • 运行sudo cnpm run-script build即可即可把幻灯片编译为 html 文件;
  • 运行sudo cnpm run-script pdf即可把幻灯片编译为 pdf 文件。

Frame 插入示例

HTML
1
<iframe src="url" width="1020" height="420px" frameborder="0"></iframe>

内置主题

在文件的开头使用export { hack as theme } from 'mdx-deck/themes'即可设定主题为 hack 主题,此外还有其它的一些主题:

Default

JavaScript
1
export { default as theme } from 'mdx-deck/themes'

default

Big

JavaScript
1
export { big as theme } from 'mdx-deck/themes'

big

Book

JavaScript
1
export { book as theme } from 'mdx-deck/themes'

book

Code

JavaScript
1
export { code as theme } from 'mdx-deck/themes'

code

Comic

JavaScript
1
export { code as theme } from 'mdx-deck/themes'

comic

Condensed

JavaScript
1
export { code as theme } from 'mdx-deck/themes'

condensed

Dark

JavaScript
1
export { code as theme } from 'mdx-deck/themes'

dark

Future

JavaScript
1
export { code as theme } from 'mdx-deck/themes'

future

Hack

JavaScript
1
export { hack as theme } from 'mdx-deck/themes'

hack

Notes

JavaScript
1
export { notes as theme } from 'mdx-deck/themes'

notes

Script

JavaScript
1
export { script as theme } from 'mdx-deck/themes'

script

Swiss

JavaScript
1
export { swiss as theme } from 'mdx-deck/themes'

swiss

Yellow

JavaScript
1
export { yellow as theme } from 'mdx-deck/themes'

yellow

使用注释

使用 notes 作为代码块的语言属性可以为幻灯片添加注释:

Markdown
1
2
3
4
5
# Slide Content

\`\`\`notes
这些文字只能在展示者模式中被看到。
\`\`\`

快捷键

Key Description
Left Arrow Go to previous slide (or step in Appear)
Right Arrow Go to next slide (or step in Appear)
Space Go to next slide (or step in Appear)
Up Arrow Hide current step in Appear component without navigating slides
Down Arrow Show next step in Appear component without navigating slides
Option + P Toggle Presenter Mode
Option + O Toggle Overview Mode
Option + G Toggle grid view mode

Layout

例如,创建一个 Layout.js 文件,文件内容如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
import React from 'react'

export default ({ children }) =>
<div
style={{
width: '100vw',
height: '100vw',
backgroundColor: 'tomato'
}}>
{children}
</div>

在 mdx 文件的开头引用这个文件import Layout from './Layout',然后就能在文中使用下面的代码引用这个 Layout 了:

Markdown
1
2
3
export default Layout

# Custom Layout

效果:

内置 Layout

Image

在开头使用import { Image } from 'mdx-deck'引用 Image 就能使用这个图层了,这是个全屏显示图片的图层。

HTML
1
<Image src='20170220_IMG_6819.JPG' />

Invert

在开头使用import { Invert } from 'mdx-deck/layouts'即可引用该图层,在需要使用该图层的页面使用下面的代码即可使用:

Markdown
1
2
3
export default Invert

# Inverted

Split

在开头使用import { Split } from 'mdx-deck/layouts'即可引用该图层,在需要使用该图层的页面使用下面的代码即可使用:

Markdown
1
2
3
4
5
export default Split

![](20170220_IMG_6819.JPG)

## 🐻🐰

SplitRight

在开头使用import { SplitRight } from 'mdx-deck/layouts'即可引用该图层,在需要使用该图层的页面使用下面的代码即可使用:

Markdown
1
2
3
4
5
export default SplitRight

![](20170220_IMG_6819.JPG)

## 🐻🐰

FullScreenCode

在开头使用

JavaScript
1
import { FullScreenCode } from 'mdx-deck/layouts'

即可引用该图层,在需要使用该图层的页面使用下面的代码即可使用:

Markdown
1
2
3
4
export default FullScreenCode

# 全屏代码模式
代码块

我觉得这个时候最好还是不要加文字了,全部代码即可。

自定义主题

例如,创建一个 theme.js 文件,文件内容如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Example theme.js
import theme from 'mdx-deck/themes'

export default {
// extends the default theme
...theme,
// add a custom font
font: 'Roboto, sans-serif',
// custom colors
colors: {
text: '#f0f',
background: 'black',
link: '#0ff',
}
}

然后在 mdx 文件开头引用这个主题:

Markdown
1
export { default as theme } from './theme'

此外还可以设置语法高亮,例如把 theme.js 文件修改成如下:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Example theme.js
import theme from 'mdx-deck/themes'
import { future } from 'mdx-deck/themes'
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'

export default {
// extends the default theme
...theme,
// add a custom font
font: 'Roboto, sans-serif',
// custom colors
colors: {
text: '#f0f',
background: 'black',
link: '#0ff',
},
...future,
prism: {
style: okaidia
}
}

代码高亮效果:

指定代码语言高亮效果:
例如添加 python 属性:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// Example theme.js
import theme from 'mdx-deck/themes'
import { future } from 'mdx-deck/themes'
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
import prismPython from 'react-syntax-highlighter/languages/prism/python'

export default {
// extends the default theme
...theme,
// add a custom font
font: 'Roboto, sans-serif',
// custom colors
colors: {
text: '#f0f',
background: 'black',
link: '#0ff',
},
...future,
prism: {
style: okaidia,
languages: {
python: prismPython
}
}
}

  • 然后在 mdx 文件中使用,效果如下:

  • 更多可以设置的元素可以参考这篇文档:Reference

还有很多高级用法

我就看不懂了。

评论

程振兴

程振兴 @czxa.top
截止今天,我已经在本博客上写了165.1k个字了!

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×