MDX Deck 项目教程

项目介绍

MDX Deck 是一个基于 React 和 MDX（Markdown + JSX）的演示文稿工具。它允许用户使用 Markdown 语法编写演示文稿，并支持在 Markdown 中嵌入 React 组件，从而实现高度定制化的演示效果。MDX Deck 提供了丰富的内置组件和主题，支持零配置启动，并且具有演讲者模式和演讲者备注功能，非常适合用于创建现代化的演示文稿。

项目快速启动

安装

首先，你需要在你的项目中安装 mdx-deck：

npm install -D mdx-deck

创建演示文稿

创建一个 .mdx 文件，例如 deck.mdx，并在文件中编写你的演示文稿内容。每个幻灯片使用 --- 分隔：

# 欢迎使用 MDX Deck

---

## 这是我的演示文稿

---

## 结束

配置启动脚本

在 package.json 中添加启动脚本，指向你创建的 .mdx 文件：

{
  "scripts": {
    "start": "mdx-deck deck.mdx"
  }
}

启动开发服务器

运行以下命令启动开发服务器：

npm start

现在，你可以通过浏览器访问演示文稿，并使用左右箭头键导航幻灯片。

应用案例和最佳实践

应用案例

MDX Deck 已经被广泛应用于各种技术会议、研讨会和培训课程中。例如：

• 技术会议：开发者可以使用 MDX Deck 创建技术分享的演示文稿，展示代码示例和交互式组件。
• 培训课程：讲师可以使用 MDX Deck 创建培训材料，结合 React 组件展示动态内容。
• 产品演示：产品经理可以使用 MDX Deck 创建产品演示文稿，展示产品的功能和设计。

最佳实践

• 使用主题：MDX Deck 提供了多个内置主题，你可以根据需要选择合适的主题，或者自定义主题。
• 嵌入 React 组件：在 Markdown 中嵌入 React 组件，可以实现更丰富的演示效果。
• 演讲者模式：使用演讲者模式（按 Option + P 切换），可以在演示时查看下一页的预览、计时器和演讲者备注。

典型生态项目

MDX Deck 作为一个基于 React 的演示文稿工具，与许多其他 React 生态项目兼容，以下是一些典型的生态项目：

• CodeSurfer：一个用于滚动、缩放和突出显示代码的 React 组件，非常适合在演示文稿中展示代码。
• mdx-code：一个用于在 MDX Deck 中创建可运行的代码演示的库。
• mdx-deck-live-code：一个用于在演示文稿中实时编写和运行 React 和 JavaScript 代码的库。

这些生态项目可以与 MDX Deck 结合使用，进一步提升演示文稿的交互性和视觉效果。