MDX 插件体系

1. 项目结构与基础环境

假设你的项目结构如下：

├─ index.html
├─ vite.config.js
└─ src/
   ├─ main.jsx
   ├─ App.jsx
   └─ content.mdx

已通过 Vite + React + @mdx-js/rollup 实现 MDX 文件的直接导入和渲染。

2. 安装常用 remark/rehype 插件

以支持 GitHub 风格 Markdown（表格、任务列表）和代码高亮为例：

npm install remark-gfm rehype-highlight highlight.js

3. 配置 Vite 支持 MDX 插件

编辑 source/vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mdx from '@mdx-js/rollup'
import remarkGfm from 'remark-gfm'
import rehypeHighlight from 'rehype-highlight'

export default defineConfig({
  plugins: [
    react(),
    mdx({
      remarkPlugins: [remarkGfm],
      rehypePlugins: [rehypeHighlight],
    }),
  ],
})

4. 编写 MDX 文件，体验插件效果

• source/src/content.mdx

  # MDX 插件演示
  
  | 表头1 | 表头2 |
  |-------|-------|
  | 单元格1 | 单元格2 |
  | 单元格3 | 单元格4 |
  
  - [x] 任务已完成
  - [ ] 任务未完成
  
  ```js
  // 代码高亮演示
  console.log('Hello, MDX!');
  

5. 在 React 中渲染 MDX 内容

• src/App.jsx

  import React from 'react';
  import Content from './content.mdx';
  import './style.css';
  function App() {
    return <Content />;
  }
  export default App;
  

• src/main.jsx

  import { StrictMode } from 'react';
  import { createRoot } from 'react-dom/client';
  import App from './App.jsx';
  import 'highlight.js/styles/github.css';
  createRoot(document.getElementById('root')).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
  

• src\style.css

  table {
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 1em;
    min-width: 200px;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: left;
  }
  
  th {
    background: #f5f5f5;
    font-weight: bold;
  }
  

6. 启动开发服务器并查看效果

npm run dev

浏览器访问 http://localhost:5173，可以看到：

• 表格、任务列表等 GitHub 风格 Markdown 正常渲染
• 代码块带有高亮效果

7. 常见问题与注意事项

• 插件需单独安装，且需与 MDX 版本兼容
• 插件顺序会影响最终渲染效果，建议先 remark 后 rehype
• 某些插件可能与其它插件或主题样式冲突，遇到问题可查阅官方文档
• 代码高亮样式可通过引入 rehype-highlight 的 CSS 主题文件自定义