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
截止今天,我已经在本博客上写了607.9k个字了!

Your browser is out-of-date!

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

×