📝 在线Markdown编辑器

实时渲染 · 语法高亮 · 快捷工具栏 · 导出HTML/Markdown

✏️ 编辑器
👁️ 实时预览

📖 使用说明

  • 左侧输入Markdown语法，右侧实时预览渲染结果。
  • 支持标准Markdown语法：标题、列表、链接、代码块、表格等。
  • 代码块自动语法高亮（支持常见编程语言）。
  • 工具栏按钮可快速插入Markdown标记（选中文本后点击生效）。
  • 可复制渲染后的HTML代码，或下载为.md/.html文件。
💡 提示：示例内容包含标题、列表、代码块等，可快速体验。
`; const blob = new Blob([htmlContent], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `export_${Date.now()}.html`; a.click(); URL.revokeObjectURL(url); } function clearContent() { if (confirm('确定清空所有内容吗？')) { textarea.value = ''; renderMarkdown(); } } // 示例初始内容 function setExample() { textarea.value = `# 欢迎使用 Markdown 编辑器 这是一个 **实时预览** 的 Markdown 编辑器，支持： - 标题 - 列表 - **加粗** 和 *斜体* - [链接](https://example.com) - 代码块 \`\`\`javascript function hello() { console.log("Hello Markdown!"); } \`\`\` > 引用块 | 表格 | 支持 | |------|------| | 单元格1 | 单元格2 | --- 尽情享受写作的乐趣吧！`; renderMarkdown(); } textarea.addEventListener('input', renderMarkdown); copyHtmlBtn.addEventListener('click', copyHtml); downloadMarkdownBtn.addEventListener('click', downloadMarkdown); downloadHtmlBtn.addEventListener('click', downloadHtml); clearBtn.addEventListener('click', clearContent); // 初始化示例 setExample();