Markdown 编辑器
实时预览 Markdown 内容,并可将渲染结果一键复制为 HTML。
在左侧输入 Markdown 后,预览内容将显示在此处。
💡 Markdown 编辑器使用技巧
博客文章预览
在撰写博客文章时用作实时预览。
自动保存支持
自动保存到本地存储,刷新也不会丢失数据。
GitHub README 创作
非常适合编写 GitHub README.md 文件。
立即复制 HTML
完成后,点击'复制 HTML'按钮即可直接粘贴到您的网站。
⚙ 技术原理:Markdown解析器与CommonMark AST渲染
Markdown由John Gruber和Aaron Swartz于2004年设计,目标是创建一种"易于阅读、易于书写"的标记语言。核心理念是将电子邮件中自然使用的文本表达习惯(星号强调、连字符列表)规范化。Markdown解析器读取文本,构建 抽象语法树(AST),并序列化为HTML。
早期Markdown缺乏明确规范,导致不同解析器行为各异。为解决这个问题,2014年以John MacFarlane为中心制定了CommonMark标准。GitHub Flavored Markdown(GFM)、GitLab、Reddit等均基于CommonMark添加了各自的扩展。HeeyaTools Markdown Editor使用marked.js 库实现CommonMark兼容渲染。
渲染流程:①输入Markdown文本→②分词器分解文本→③解析器构建AST→④渲染器转换为HTML→⑤ DOMPurify 清除XSS威胁→⑥将安全HTML插入预览区域。第⑤步是安全核心。
🔒 隐私架构:DOMPurify与XSS攻击防御
将Markdown生成的HTML直接插入浏览器容易遭受
XSS(跨站脚本)攻击。例如
[点击](javascript:alert('XSS'))
这样的Markdown若未经验证渲染,可能执行恶意脚本。
HeeyaTools Markdown Editor使用DOMPurify
库,自动从渲染的HTML中去除所有事件处理器(
onclick
、
onerror
等)、
javascript:
URL及
<script>
标签。
所有渲染和转换工作都在浏览器内的零服务器环境 中进行,文档内容不会传输到外部服务器,可放心用于撰写企业内部文件和未发布的技术文档。
📚 行业洞察:Markdown的普及与现代文档生态系统
随着GitHub README.md文化的扩散,Markdown成为开源世界的官方文档格式, Notion、Obsidian、Confluence、Dropbox Paper 等主要协作工具均将Markdown作为核心编辑界面。
Pandoc 是将Markdown转换为PDF、EPUB、DOCX、LaTeX等多种格式的通用文档转换器,专业作家和研究者用Markdown写草稿,用Pandoc导出为出版格式已成为常见工作流。
VS Code的Jupyter Notebook单元格、AI模型API的响应格式、ChatGPT/Claude的输出格式都使用Markdown。熟练运用Markdown是现代技术专业人员的核心素养。