← 返回项目列表
工具

实时 Markdown 编辑器

左侧编写、右侧即时渲染。支持标题、列表、代码块、表格与引用,零依赖纯前端实现。

可交互演示 · 直接在下方操作 本页阅读

技术说明

JavaScript正则解析DOM 渲染

实现思路

  • 一个极简 Markdown 解析器:按行切分,先用正则识别标题、引用、代码块、列表等『块级』结构,再对块内文本做行内规则(加粗、斜体、行内代码、链接)替换。
  • 为避免 XSS,渲染前对所有用户输入做 HTML 转义,链接只放行 http/https 协议。
  • 实时性通过监听 input 事件 + 轻量防抖实现,配合滚动同步让左右两栏始终对应。