mdx-code：让mdx-deck上的JS代码跑起来

• 项目地址：GitHub
• 项目作者：Pranay Prakash (@pranaygp)

在上一篇文章中，我们学习了mdx-deck的基本使用方法。在本文中，我们将借助mdx-code这一第三方插件，让mdx-deck幻灯片上的JS代码跑起来。

这一插件的使用方法非常简单，

Step01 安装

yarn add mdx-code 

Step02 使用

mdx-code属于自定义Layout，因此其使用方法与mdx-deck自带的Layouts基本一致。

引入

import Code from 'mdx-code'

使用

export default Code

```javascript Title of the code block
console.log('Hello World') // Code goes here
```

注意：在一张引入了Code的幻灯片中可以有多个JS代码段，前面的几个会默认执行，而只有最后一个会被显示。可以借助这一特性，预先定义一些变量，或者引入一些库文件。

Step03 效果

运行效果图