做一个 Markdown 编辑器，完整 Prompt 模板直接用

Markdown 编辑器是练手实时渲染和本地存储的经典项目。它看起来就是左边写字、右边出效果，但背后的数据流、防抖、安全过滤和持久化组合在一起，恰好覆盖了前端开发最核心的几项能力。这篇文章从第一性原理出发，拆解 Markdown 编辑器的本质，附完整 Prompt 模板，复制就能用。

Markdown 编辑器的本质是什么

回到第一性原理。Markdown 编辑器解决的问题只有一个——让人用简单的纯文本写出格式丰富的文档，而且写的时候就能看到最终效果。

你用 Markdown 编辑器时，做的事情其实就两步：

• 在左边输入带格式的纯文本（比如 **加粗**、# 标题）
• 右边立刻看到渲染后的效果（加粗的文字、大号标题）

听起来跟 Word 没什么区别。但 Markdown 编辑器比 Word 强在一个地方——所见即所得的纯文本。你写的每一个字符都是可读的纯文本，不依赖任何特定软件打开，不会被格式绑架，可以版本对比，可以搜索替换。这种「格式和内容分离」的设计，是 Markdown 编辑器存在的根本理由。

理解了这一点，你就知道为什么写 Prompt 时要特别强调两件事。第一是实时渲染——输入要立刻反映到预览区，不能等用户点按钮。第二是安全过滤——Markdown 可以嵌入 HTML，如果不过滤恶意脚本，编辑器就变成了攻击载体。这两点是 Markdown 编辑器区别于普通文本框的核心。

编辑器拆开看，五个部分

把 Markdown 编辑器拆到最底层，一共五个组成部分。每个部分解决一个明确的问题。