# Slidev Magic Move代码讲解

已安装并运行锁定的Slidev 53.0.0；素材是人工编写、实际渲染的教学工程，没有执行AI模型会话。

1. 运行函数测试
先运行独立JavaScript测试，核对空列表为0、两项合计540分。动画只是解释代码变化，正确性由实际测试承担。
node test-refactor.mjs

2. 启动Slidev工程
进入slidev-project，安装锁定依赖并启动。读取slides.md中的magic-move代码组，比较三段代码是否保持同一变量与金额单位。
cd slidev-project
npm install
npm run dev

3. 用四反引号包住步骤
magic-move外层使用四个反引号，内部是普通代码块。第一步明确priceCents，第二步展开reduce，第三步加入函数声明；不要把Markdown嵌套写坏。


4. 逐次点击观察差异
从演示第二页开始，点击时查看相同token如何移动。确保讲稿只解释本步变化，150、2、240在所有状态里一致，最终结果540分。


5. 控制行数与字幕
每步保留短代码，行号与高亮只帮助定位。若代码超出投影边缘，先删掉无关辅助行；不要缩小到课堂无法阅读。


6. 再次执行最终函数
回到工程根目录重新运行test-refactor.mjs，确认讲解最后一段和真实refactor.js一致。手工制作的动画不能说明AI已经重构代码。
node test-refactor.mjs

7. 交付源工程与讲稿
保存三种状态截图、slides.md、refactor.js与测试输出。PPTX或PDF只适合静态讲义；需要代码变形交互时使用网页工程。


官方来源：https://sli.dev/features/shiki-magic-move