Markdown 转干净 HTML —— 标题/列表/代码/链接/图片/表格 —— 实时双栏预览,浏览器本地
- 本地处理
- 分类 文本
- 适合 把日常写作和运营里的重复清理工作省掉。
Welcome
Write markdown in this box.
- Bullet one
- Bullet two
const hello = "world";这个工具能做什么
免费在线 Markdown 转 HTML 工具。左边写 Markdown,右边实时预览 HTML。 支持 CommonMark 主要语法:标题 (#-######)、加粗/斜体/删除线、行内 与代码块、有序/无序列表、链接、图片、引用、分割线、基础表格。输出 是纯语义 HTML —— 不带行内样式,不带任何框架。100% 浏览器本地。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 文本 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Markdown 转 HTML 适合怎么用
适合在文本进入文档、CMS、表格或提示词前,先清理、对比、整理或提取。
适合文本任务
- 把日常写作和运营里的重复清理工作省掉。
- 让文本更容易对比、粘贴、发布或交给下一个工具。
- 内容还没公开或比较私密时,先在本地处理。
文本检查项
- 留意多余空格、重复行和被误删的标点。
- 长文本先试前几行,再处理全文。
- 先看预览,确认没问题再复制结果。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
GitHub README 转 HTML 嵌产品落地页
你的 changelog 或功能介绍写在 `README.md` 里, 想直接挂 到官网上, 不想再用 JSX 重写一遍。粘 Markdown, 复制 HTML 输出, 塞进 `<div class="prose">` 就发。代码块保留 `<pre><code class="language-ts">` 的结构, 后面接 Prism 或 hljs 能正常上色; 标题的 slug 也稳定, 老链接里的 `#installation` 锚点照旧能跳。比为一个页面单独跑一套 Markdown 构建流水线轻多了。
飞书/钉钉笔记搬到 Notion 保留格式
飞书、钉钉、企微都允许往文档里粘 Markdown, 但你从文档里 复制出来时, 给的是 `**加粗**` 和 `#` 这种裸符号, 直接粘 到 Notion 就一堆星号。解法: 把 Markdown 贴进这个工具, 切到预览, Cmd+A / Cmd+C 复制渲染后的内容。剪贴板里此时 已经是富文本 HTML, 再粘到 Notion、Confluence、Quip 或 Gmail 写信窗口, 加粗、列表、链接、表格全保留。五秒钟, 不用装插件。
写一份能在 Outlook 里活下来的邮件 newsletter
内容你想用 Markdown 写, 不想去伺候 `<table>` 标签。先 在这里粘 Markdown 复制 HTML, 然后过一道 inline-CSS 工序 (Premailer / Maizzle / 在线 inlineformat 都行)。多数 邮件客户端 (包括 Outlook 2016) 会剥掉 `<style>` 块, 但 会保留 `style=""` 属性, 所以这套两步流水线才是让加粗和 链接成功送达收件箱的方式。比手写 HTML 邮件省心几个量级。
老 Hexo / Jekyll 站归档成纯静态 HTML
决定不再维护静态站生成器, 但 200 篇老文章想留个能看的 版本。每个 `.md` 文件挨个过一遍 (站点小就手动粘), 把 HTML 套进一个带单文件样式表的极简骨架, 直接上传 S3 或 GitHub Pages。不用再守 Ruby 工具链, 不用怕 Node 版本 漂移, 就是一堆 2036 年还能打开的 HTML。
给 LLM 看你 prompt 在它眼里长什么样
当你 prompt 里用三个反引号包代码块时, GPT-4 / Claude / Gemini 会识别这个围栏, 把里面的内容当成独立代码单元处理, 和正文分开。如果你在 debug 为什么模型把正文当代码看 (或 反过来), 把 prompt 粘到这里, HTML 预览会告诉你 `<pre><code>` 的边界究竟落在哪 —— 这跟模型的分块逻辑 是一致的。能抓到一些 "缩进多打了俩空格就被误判成代码块" 这种隐蔽问题。
常见踩坑
Markdown 表格转出来是裸 `<table>`, 默认没边框 —— 要么靠目标页面的 `.prose` 样式包住, 要么转完再过一道 inline-styles 才贴富文本编辑器。
`[text](url)` 默认不带 `target="_blank"` —— 嵌到别人网站里时, 自己后处理加上 `target="_blank" rel="noopener noreferrer"`, 不然用户点外链会从宿主页面跳走。
代码块用 ```` ```ts ```` 这种写法转出来是 `<pre><code class="language-ts">`, 但真正的语法着色得靠另一个库 (hljs / Prism / Shiki) —— 目标页没加载对应主题 CSS, 输出只是普通等宽字体。
隐私说明
Markdown 文本完全在你浏览器里解析, 不发任何外部服务, 不打 埋点。一件需要提一下的事: 这工具遵循 CommonMark 规范, 而 规范要求把裸 HTML (包括 `<script>` 和 `<iframe>`) 原样保留。 作为转换器这是正确的选择, 但也意味着如果你粘的是陌生人给的 Markdown, 转完直接上生产, 对方的 XSS 也会一起上。在有用户 会话的页面渲染前, 先用 DOMPurify 之类清一遍再用。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。