技术文档排版
开发者在写 API 接口文档时，需要同时展示代码块、表格、引用和嵌套列表。用纯文本编辑器写，频繁切换预览窗口，代码缩进和表格对齐经常错乱。本工具提供实时分屏预览，在左侧编辑区敲 Markdown 语法，右侧立即渲染出最终效果，代码块内的语法高亮和表格的列宽对齐一目了然，省去反复保存刷新的流程。
MARKDOWN
预览
第一节
关于本工具
About写技术文档或笔记时，最烦的是写完才发现标题层级没对齐、列表缩进乱掉。打开这个编辑器，左侧写 Markdown，右侧实时渲染出最终样式，工具栏能一键插入表格、代码块、加粗斜体，不用记任何语法。写完后点一下复制按钮，纯 Markdown 源码或渲染后的 HTML 都能带走。所有解析渲染都在当前浏览器完成，内容不会被上传到任何服务器。
使用场景
公众号排版转存
运营人员写好一篇包含标题分级、加粗、引用和图片说明的推文，需要从 Markdown 编辑器复制到公众号后台。直接粘贴时，公众号编辑器经常丢失格式。本工具支持一键复制为富文本格式，粘贴到公众号后台后，标题字号、加粗、引用样式和图片居中全部保留，无需二次调整样式，避免因格式错乱导致重新排版。
GitHub README 编写
开源项目维护者在编写 README.md 时，需要插入徽章、任务列表（- [x]）、表格和代码块。直接在 GitHub 上编辑，预览加载慢，且无法实时看到表格列宽是否对齐。用本工具离线编写，工具栏提供任务列表、表格和代码块的快捷插入按钮，实时预览确保表格和列表渲染正确，写完后一键复制，避免提交后才发现排版问题需要二次修改。
笔记整理与归档
学生或研究员在整理课堂笔记或文献摘要时，需要混合使用有序列表、引用、加粗和脚注。用普通文本记录，复习时难以快速定位重点。本工具在编辑时自动高亮 Markdown 语法，实时渲染出带层级标题和引用的最终样式，让笔记结构清晰。整理完成后，一键导出为 PDF 或 HTML，方便存档或打印。
团队协作 Wiki 更新
产品经理更新团队内部 Wiki 页面（如 Confluence 或 Notion），需要插入表格、代码示例和流程图。直接在线编辑，网络延迟会导致内容丢失。先用本工具离线编写，利用工具栏快速插入表格和代码块，实时预览确认表格对齐和代码高亮无误后，再一键复制到 Wiki 编辑器中，避免在线编辑时因网络问题导致内容丢失或格式错乱。
第二节
使用指南
Getting Started使用步骤
- 1在左侧编辑区输入 Markdown 文本，右侧预览区同步渲染出格式化后的文档（标题、列表、代码块等），无需手动刷新
- 2选中一段文字后，点击上方工具栏的「加粗」「斜体」「插入链接」等按钮，所选内容自动包裹对应 Markdown 语法标记
- 3点击工具栏的「插入图片」按钮，弹出文件选择框；选取本地图片后，编辑器自动插入图片链接并显示占位符
- 4完成编辑后，点击右上角「复制」按钮，整个 Markdown 源码被复制到剪贴板，页面提示「已复制」
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| # 一级标题 ## 二级标题 ### 三级标题 | <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3> | 常规：验证标题层级转换是否完整，从 h1 到 h3 均正确渲染 |
| - 无序列表项1 - 无序列表项2 - 嵌套列表项 | <ul><li>无序列表项1</li><li>无序列表项2<ul><li>嵌套列表项</li></ul></li></ul> | 常规：验证无序列表及嵌套缩进是否被正确解析为层级 ul |
| **粗体** *斜体* ~~删除线~~ `行内代码` | <strong>粗体</strong> <em>斜体</em> <del>删除线</del> <code>行内代码</code> | 常规：同时测试四种常用行内样式，确保每个标签正确对应 |
| 这是一个[链接](https://example.com)和一张图片： | 这是一个<a href="https://example.com">链接</a>和一张图片：<img src="https://example.com/img.png" alt="alt" /> | 边界：链接和图片同时出现，验证 href 和 src 属性正确转义，无遗漏 |
| > 引用第一行 > 引用第二行 >> 嵌套引用 | <blockquote><p>引用第一行<br />引用第二行</p><blockquote><p>嵌套引用</p></blockquote></blockquote> | 边界：多行引用 + 嵌套引用，验证 blockquote 层级和 br 换行是否正确 |
| ```python print("Hello, world!") ``` | <pre><code class="language-python">print("Hello, world!") </code></pre> | 易错：代码块中引号被转义为 HTML 实体，验证特殊字符处理是否一致 |
| --- *** ___ | <hr /><hr /><hr /> | 易错：三种水平线写法（---、***、___）应全部识别为 hr，防止遗漏 |
| | 列1 | 列2 | | --- | --- | | 数据 | 数据 | | <table><thead><tr><th>列1</th><th>列2</th></tr></thead><tbody><tr><td>数据</td><td>数据</td></tr></tbody></table> | 边界：表格语法，验证 thead/tbody 结构是否完整，分隔线 --- 被正确忽略 |
常见错误对照
1.列表嵌套缩进不一致导致渲染断裂
✗ 错误
- 一级列表
- 二级列表
- 三级列表（但三级前只有两个空格）✓ 修复
- 一级列表
- 二级列表
- 三级列表（每级缩进两个空格或一个 Tab）Markdown 列表嵌套依赖严格缩进（通常 2 空格或 1 Tab）。缩进不一致时，解析器会把三级列表当成新的一级列表，破坏层级结构。
2.代码块语言标识写错导致语法高亮失效
✗ 错误
```javascript
console.log('hello');
```✓ 修复
```javascript
console.log('hello');
```代码块的语言标识必须与高亮引擎支持的名称完全一致（如 'javascript' 而非 'js'）。写错或省略，编辑器不会应用对应语言的语法高亮。
3.表格单元格内使用竖线未转义
✗ 错误
| 名称 | 值 |
|------|-----|
| 管道 | a|b |✓ 修复
| 名称 | 值 |
|------|-----|
| 管道 | a\|b |Markdown 表格用竖线 | 分隔列。单元格内要显示竖线时，必须用反斜杠 \| 转义，否则解析器会把竖线当作列分隔符，导致表格结构错乱。
4.链接与图片语法混淆，图片不显示
✗ 错误
[图片](https://example.com/image.png)✓ 修复
Markdown 中图片语法是 ![]()，链接是 []()。漏掉感叹号 !，编辑器会渲染成链接而非图片，用户点击后才跳转，无法直接预览图片。
5.标题后未加空格导致标题无效
✗ 错误
#标题✓ 修复
# 标题ATX 标题要求 # 后紧跟一个空格。无空格时，多数解析器（如 CommonMark 规范）不识别为标题，而是当作普通文本的 # 字符。
6.有序列表序号不连续导致重新编号
✗ 错误
1. 第一项
3. 第二项
5. 第三项✓ 修复
1. 第一项
2. 第二项
3. 第三项Markdown 有序列表的序号虽然最终渲染时会自动递增，但源文件序号不连续会导致某些解析器（如 GitHub Flavored Markdown）重新从 1 开始编号，破坏预期顺序。
7.引用嵌套层级用错符号
✗ 错误
> 一级引用
>> 二级引用（实际是三级）✓ 修复
> 一级引用
>> 二级引用
>>> 三级引用引用嵌套每层增加一个 >。多写或少写 > 会改变引用层级，导致内容归属错误，影响阅读逻辑。
第三节
工作原理
How It Works核心公式
无核心公式（Markdown 编辑器不涉及数学计算）
示例
Markdown 编辑器不执行数值计算，核心功能为文本标记与实时渲染。例如输入 `# 标题` 自动转为 H1 标签，输入 `**加粗**` 实时显示为加粗文本，无需公式推导。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我在手机上用，排版能正常显示吗？＋
答
本工具是纯浏览器端运行，不依赖后端，手机浏览器打开 /kaifa/md-editor 就能用。实时预览区会按移动端屏幕宽度自动折行，工具栏图标也适配了小屏触控。不过如果你在电脑上编辑时用了固定宽度的表格或大段代码块，手机上看可能需要横向滚动。建议写完用手机预览模式（如果有的话）或直接用手机编辑。
问为什么我写了表格，预览里没显示边框？＋
答
Markdown 标准语法本身不定义表格边框样式，预览区默认只显示无边框的网格线（类似 GitHub 渲染效果）。如果你需要实线边框，可以在表格后面加一行 HTML 或 CSS，比如 `<style>table, th, td { border: 1px solid black; }</style>`，本工具预览区会执行内联样式。注意：这个样式只在当前预览生效，复制出去的纯 Markdown 文本不会带 CSS。
问一键复制是复制什么格式？能直接贴到公众号或知乎吗？＋
答
一键复制默认复制的是你编辑区里的原始 Markdown 源码（纯文本），不是渲染后的 HTML。如果你需要粘贴到支持 Markdown 的平台（如知乎、掘金、CSDN），直接粘贴源码即可。如果目标平台只接受富文本（如公众号编辑器），建议先用本工具预览区手动全选渲染后的内容再复制粘贴，或者使用浏览器自带的「复制为 HTML」功能（部分浏览器支持）。
问我写了一半不小心关掉了浏览器，内容能找回吗？＋
答
本工具是纯前端实现，数据只存在浏览器内存里，关闭页面或刷新后内容会丢失。如果你经常需要防丢失，建议养成随手点击「一键复制」保存到剪贴板的习惯，或者手动把内容存到本地文件。部分浏览器（如 Chrome）有自动恢复关闭标签页的功能，但不可靠。没有自动保存功能是纯前端工具的通病，因为不上传任何数据到服务器。
问支持插入图片吗？是上传到你们服务器还是外链？＋
答
本工具只支持 Markdown 图片语法 ``，图片必须来自外部 URL（如图床、OSS 或 CDN），不支持本地上传。预览区会直接加载该 URL 的图片，如果图片加载失败或跨域受限，预览区可能显示裂图。这是纯前端工具的特性：不上传任何文件到服务器，所有资源都由浏览器直接请求。如果你需要本地图片插入，可以先把图片上传到免费图床再复制链接。
问为什么我写的代码块在预览里没有语法高亮？＋
答
本工具的代码块语法高亮依赖于你在代码块开头的语言标识，比如 ` ```javascript `。如果漏写了语言名或写错了（比如 ````jsx` 写成 ````js` 但内容实际是 TS），高亮可能失效或显示异常。另外，本工具的高亮引擎是纯客户端渲染，不支持所有语言——常见语言（JS、Python、HTML、CSS、Java）都覆盖了，但冷门语言（如 Fortran、COBOL）可能没有高亮。建议检查语言标识是否拼写正确。
问这个工具和 Typora、VS Code 内置的 Markdown 预览有什么区别？＋
答
核心区别在于运行环境和定位。Typora 和 VS Code 是本地桌面应用，需要安装，适合长期、大量、复杂的文档写作。本工具是纯浏览器端，无需安装，打开即用，适合临时编辑、快速排版、跨设备场景（比如在网吧、公共电脑或手机上）。功能上，本工具只提供基础工具栏（加粗、斜体、列表、标题、链接、图片、代码块）和实时预览，没有 Typora 的专注模式、大纲、文件管理，也没有 VS Code 的插件生态。如果你只需要写一篇简单的 README 或笔记，本工具够用；如果你写一本书或大型文档，建议用桌面软件。
问工具栏里的「加粗」「斜体」点完没反应，是坏了吗？＋
答
工具栏按钮需要你在编辑区有选中的文字才能生效。如果你没有选中任何文字直接点击按钮，部分浏览器可能不会插入任何内容（取决于实现）。建议先选中要格式化的文字，再点按钮。如果还是没反应，检查浏览器是否禁用了 JavaScript，或者是否有广告拦截插件干扰了页面脚本。本工具是纯前端，所有交互都依赖 JS 执行，禁用 JS 后页面会完全不可用。
问最多能写多长的内容？会不会卡死？＋
答
本工具没有人为限制字数，但受限于浏览器内存和渲染性能。如果内容超过几万字（比如 5 万字以上），实时预览的渲染可能会开始卡顿，尤其是包含大量表格或代码块的场景。建议把超长文档拆分成多个文件分别编辑。如果遇到卡顿，可以暂时关闭预览区（如果有切换按钮），只保留编辑区继续输入。纯前端工具的性能完全取决于用户设备的 CPU 和内存，老旧设备上建议控制单次编辑内容在 1 万字以内。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。