Markdown有序列表渲染异常修复实战：从问题诊断到最小化修复的完整过程

记录MermaidFlow项目中右侧Mermaid预览区域高度不匹配的完整调试过程。从使用Playwright进行页面检查、错误的初始判断，到最终精确定位iframe固定高度问题并实施修复的技术实战经验。

记录博客系统中代码块内容错位显示的完整排查和修复过程，从Playwright自动化测试发现问题，到采用分阶段内容块处理方案彻底解决，包含根因分析、市场调研和最佳实践总结。

详细记录将博客系统中自定义正则表达式解析器重构为基于remark的成熟方案的完整过程，包含技术选型分析、实现细节、问题排查和Playwright验证，为同类项目提供实战参考。

深度记录一个困扰一周的技术难题：Next.js项目中集成Mermaid图表缩放功能时，React虚拟DOM与svg-pan-zoom命令式DOM操作产生根本冲突。通过Playwright MCP自动化调试工具最终发现问题根源，并采用iframe沙箱方案彻底解决。本文详细分析踩坑过程、技术选型思考，以及浏览器自动化工具在复杂前端问题调试中的价值。