MDX Dynamic Content Preview

一个基于 Vite + React 的 MDX 动态内容预览器，支持实时编译和热重载。

功能特性

• ✅ 实时 MDX 编译 - 使用 @mdx-js/mdx 进行编译
• ✅ 热重载 - MDX 文件修改后自动刷新预览
• ✅ TypeScript 支持 - 完整的类型安全
• ✅ 组件自定义 - 支持自定义 React 组件样式
• ✅ 开发体验 - Vite 提供的快速 HMR 和构建
• ✅ 错误处理 - 友好的错误显示和加载状态

快速开始

安装依赖

pnpm install

启动开发服务器

pnpm dev

访问 http://localhost:3000 查看预览效果。

构建生产版本

pnpm build

项目结构

test-mdx/
├── public/
│   └── example.mdx          # 示例 MDX 文件
├── src/
│   ├── app.tsx              # 主应用组件
│   └── main.tsx             # 应用入口
├── index.html               # HTML 模板
├── package.json             # 项目配置
├── tsconfig.json            # TypeScript 配置
├── tsconfig.node.json       # Node.js TypeScript 配置
└── vite.config.ts           # Vite 构建配置

使用方法

1. 将你的 MDX 文件放在 public/ 目录下
2. 修改 src/app.tsx 中的文件路径：

   const response = await fetch('/your-file.mdx?t=' + Date.now());
   

3. 运行开发服务器即可看到预览效果

自定义组件样式

在 src/app.tsx 中的 components 对象中自定义各种 Markdown 元素的样式：

const components = {
  h1: (props) => <h1 style={{ color: 'blue' }} {...props} />,
  p: (props) => <p style={{ fontSize: '16px' }} {...props} />,
  // 添加更多组件...
};

热重载机制

• 开发模式下每 2 秒自动检查 MDX 文件变化
• 使用时间戳参数避免缓存问题
• 显示重载状态指示器
• 修改后即时更新预览

技术栈

• Vite - 构建工具和开发服务器
• React - UI 框架
• TypeScript - 类型安全
• @mdx-js/mdx - MDX 编译器
• @mdx-js/react - React 集成
• vite-plugin-static-copy - 静态文件复制

开发脚本

• pnpm dev - 启动开发服务器
• pnpm build - 构建生产版本
• pnpm preview - 预览构建结果

许可证

MIT License