Python 入门教程（Web 版）

一个基于 Vite + TypeScript 的静态交互式 Python 教程网站。前端使用 CodeMirror 6 提供代码编辑体验，通过 Pyodide（WebAssembly 版 Python）在浏览器内直接运行代码，无需后端服务器。

功能特性

• 📚 Markdown 课程内容：每门课程一个 Markdown 文件，支持 frontmatter 配置
• 🐍 浏览器内运行 Python：基于 Pyodide，无需安装 Python
• ✍️ CodeMirror 6 编辑器：Python 语法高亮、行号、括号匹配、自动缩进
• ✅ 代码块一键尝试：正文中的每个代码块右上角有「✏️ 尝试」按钮，点击即将代码发送到右侧编辑器，修改后运行查看输出
• 🖥️ 双栏可拖拽布局：正文与编辑器/输出区之间可拖拽调整宽度；输出区高度可调
• 📱 响应式设计：桌面双栏、平板上下堆叠、移动端抽屉式侧栏
• 🌙 深色/浅色主题：跟随系统，可手动切换并持久化
• 📝 随堂练习：单选 / 多选 / 判断题，实时判分
• 📊 学习进度：进度自动保存到 localStorage，含进度条与完成标记

技术栈

类别	技术
构建	Vite 8 + TypeScript 6
编辑器	CodeMirror 6（@codemirror/lang-python）
运行时	Pyodide 314（CDN 加载，不打包）
Markdown	marked 18 + gray-matter 4
代码质量	ESLint 10 + Prettier 3

快速开始

# 安装依赖
pnpm install

# 启动开发服务器（默认 http://127.0.0.1:5173）
pnpm dev

# 类型检查 + 生产构建
pnpm build

# 本地预览构建产物
pnpm preview

# 代码检查
pnpm lint

# 代码格式化
pnpm format

项目结构

web-python/
├── index.html                  # 页面骨架（侧栏 / 顶栏 / 正文 / 编辑器 / 输出区）
├── vite.config.ts              # Vite 配置
├── eslint.config.js            # ESLint flat config
├── .prettierrc.json            # Prettier 配置
├── tsconfig.json               # TypeScript 配置
└── src/
    ├── main.ts                 # 入口：初始化、导航、拖拽、运行逻辑
    ├── style.css               # 全局样式与设计令牌（双主题）
    ├── types.ts                # 共享类型定义
    ├── polyfills.ts            # Buffer polyfill（gray-matter 依赖）
    ├── render.ts               # Markdown 渲染 + 随堂练习绑定
    ├── quiz.ts                 # 判题逻辑
    ├── progress.ts             # 进度持久化（localStorage）
    ├── editor/
    │   └── codemirror.ts       # CodeMirror 编辑器封装（主题/代码/只读）
    ├── pyodide/
    │   └── loader.ts           # Pyodide 加载与 Python 执行封装
    └── lessons/
        ├── index.ts            # 课程数据入口
        ├── load.ts             # 加载 Markdown、按章节分组排序
        └── content/            # 课程 Markdown 文件（含 README.md 模板说明）

添加新课程

1. 在 src/lessons/content/ 下新建一个 Markdown 文件（文件名即课程 ID）
2. 参考 src/lessons/content/README.md 填写 frontmatter（标题、章节、排序、初始代码、随堂练习）与正文
3. 刷新页面即可看到新课程

关于 Pyodide

Pyodide 通过 CDN 加载（https://cdn.jsdelivr.net/pyodide/v314.0.3/full/），不参与打包，因此首次加载需要网络与一点时间。页面进入即预加载，首次运行无需等待。

说明

• 学习进度保存在浏览器 localStorage（键：python-tutorial-progress），清空浏览器数据会重置进度。
• 主题偏好保存在 localStorage（键：theme）。