Markdown 编辑器

编辑 · 预览 · 导出 HTML,支持深色/浅色/护眼绿三主题。纯前端处理,安全可靠。

💡 功能说明:在左侧编辑区输入 Markdown 文本,右侧实时预览渲染效果。支持分屏/仅编辑/仅预览三种模式切换,内置深色、浅色、护眼绿三种主题。
📌 适用场景:写技术文档、编辑 README 文件、整理笔记、撰写博客文章。完成后可一键导出 HTML 文件或下载 .md 源文件。
🚀 使用步骤:① 在编辑区输入或粘贴 Markdown 文本(可点击"加载示例"快速体验) → ② 右侧实时预览显示渲染结果 → ③ 根据需求切换分屏/仅编辑/仅预览视图 → ④ 导出 HTML 或 MD 文件。
编辑器
预览
出现在 JS 源码中 window.exportHTML = function() { var ESC = function(s) { return s.replace(/&/g,'&').replace(//g,'>'); }; var closingStyleTag = '<' + '/style>'; var closingHeadTag = '<' + '/head>'; var closingBodyTag = '<' + '/body>'; var closingHtmlTag = '<' + '/html>'; var styleCSS = 'body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;max-width:800px;margin:40px auto;padding:20px;line-height:1.8;color:#333}' + 'h1,h2,h3,h4{color:#222;border-bottom:1px solid #eee;padding-bottom:0.3em}' + 'code{background:#f5f5f5;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:0.9em;color:#d63384}' + 'pre{background:#f5f5f5;padding:15px;border-radius:8px;overflow-x:auto}' + 'pre code{background:none;padding:0;color:#333}' + 'blockquote{border-left:4px solid #ddd;margin:1em 0;padding:0.5em 1em;color:#666;background:#fafafa}' + 'table{border-collapse:collapse;width:100%;margin:1em 0}' + 'th,td{border:1px solid #ddd;padding:8px 12px}' + 'th{background:#fafafa}' + 'a{color:#0066cc;text-decoration:none}' + 'a:hover{text-decoration:underline}' + 'img{max-width:100%;border-radius:6px}' + 'hr{border:none;border-top:1px solid #eee;margin:1.5em 0}' + 'ul,ol{margin:0.8em 0;padding-left:1.5em}' + 'li{margin:0.3em 0}'; var html = '\n' + '\n' + '\n' + '\n' + '\n' + '导出文档\n' + '