不用框架，做Markdown预览器

写博客的人应该都经历过这个阶段：用 Markdown 写好了文章，想在本地预览一下效果，下意识就去搜「Markdown 预览器」然后装个 npm 包。其实一个纯前端页面就能搞定，不需要任何框架，甚至不需要 Node.js。

核心依赖只有两个：marked（解析 Markdown 为 HTML）和 highlight.js（代码高亮）。不夸张地说，打开 CodePen 十分钟就能搭一个出来。关键代码也就三四十行：一个 textarea 绑定 input 事件，每次输入把内容传给 marked.parse()，输出渲染到右侧的预览区。

但真正干活的时候坑不少。比如 marked 默认不处理 XSS——用户要是写了 <script>alert(1)</script>，预览区直接弹窗。得用 DOMPurify 过滤一下，或者开启 marked 的 sanitize 配置。还有代码块的换行问题、表格对齐、任务列表的 checkbox 尺寸，这些细节调起来比想象中花时间。

另一个容易被忽视的点是滚动同步。写长文章的时候，左侧编辑区滚动到底了，右侧预览还停在半截，体验很割裂。原理也不难：监听 scroll 事件，按比例同步两侧的 scrollTop。用 requestAnimationFrame 节流一下，流畅度和性能都能兼顾。

说实话，市面上大部分在线 Markdown 编辑器也就是在这个基础上加了个保存到云端的按钮。真正核心的实时预览能力，一个 HTML 文件就能搞定。有时候走得太远，反而忘了最开始的起点有多简单。