把 Markdown 变成能直接用的 React JSX:一次粘贴,从 README 到真组件,class 自动转 className、代码块完整保留。浏览器本地完成。
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
完全在浏览器里跑:Markdown 先解析为 HTML,再用原生 DOMParser 遍历(只读 —— 不执行、不上传)。你的输入会同步进 URL,分享链接可复现;含密钥的 Markdown 请手动复制输出。
这个工具能做什么
免费在线 Markdown 转 JSX 工具。粘贴任意 Markdown(README、更新日志、 文档页、想塞进应用里的 LLM 回答),立刻得到能直接放进 React(或 Preact 等)组件、不会被编译器报错的 JSX。内部跑的是两段成熟流程:先把 Markdown 解析成 HTML(标题、有序和无序列表、引用、围栏代码块、表格,以及行内的 加粗 / 斜体 / 行内代码 / 链接 / 图片),再用浏览器原生 DOMParser 遍历这段 HTML 并重建为 JSX。第二段做的是 React 专属转换:`class` 变 `className`、 `for` 变 `htmlFor`、围栏代码块的 `language-js` 类名正确改写、`img` `br` 这类 void 元素补自闭合、HTML 注释转成 JSX 注释。你可以把结果包成函数组件 (`export default function Content() { return (...) }`)、强制套一层 Fragment 让多个块成为一个合法表达式,并在 2 空格、4 空格、Tab 之间挑缩进。 因为 Markdown 几乎总会产出多个顶层块,包组件时默认套 Fragment,让你的代码 一次就能编译通过。解析是只读的,你的 Markdown 永远不会被注入当前页面, 即使输入里夹了一段行内 HTML `<script>` 也不会在这里执行。100% 浏览器本地 完成,不上传、不记录。
工具细节
- 输入
- 文本 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 20 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
Markdown 转 JSX 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
把 README 的一段搬进 React 文档页
你组件库的 README 有一段干净的"快速开始"(标题、一段说明、一个 安装代码块、一个要点列表),你想把同样的内容作为真正的 React 页面 放到文档站上。流程:复制那段 Markdown,粘到这里,勾上"包成组件", 选 2 空格缩进,复制结果。你得到 `export default function Content() { return (<>…</>) }`,代码块已经 带上了给高亮器用的 `className="language-bash"`。把它改名成 `GettingStarted`,塞进 `src/docs/`,你就省掉了通常吃掉前十分钟的 逐行 `class`→`className` 和"什么都套进一个 div"的收尾工作。
不引入运行时 Markdown 解析器也能渲染更新日志
你的发布说明用 Markdown 写,但不想为了展示一个静态的更新日志块就把 react-markdown 打进包里。粘进来转一下,你就有了纯 JSX,包里没有 解析器,也没有每次渲染的解析开销。加粗的版本号还是 `<strong>`, 修复项的要点列表还是 `<ul><li>`,行内的 `--watch` 参数还是 `<code>`。 只要内容是固定的而非用户产生的,构建时转换就是对的选择。
把 LLM 给的 Markdown 回答塞进应用
助手给了你一段工整的 Markdown 说明(标题、编号的步骤列表、一段 围栏代码示例),你想把它做成 React 应用里的静态帮助面板。粘进来转 一下,编号步骤变成 `<ol>`,代码示例变成 `<pre><code className="language-…">`。你拿到的是可审阅的 JSX,可以 用你的设计系统上样式,而不是把不可信的 Markdown 灌进运行时渲染器。
把 Markdown 表格转成 JSX 表格组件
你用 Markdown 写了一张功能对比表,因为写起来更快,但你需要它成为 一个有样式的 React 表格。粘进表格转一下,你得到一个真正的 `<table>`,带 `<thead>`/`<tbody>`、`<th>` 和 `<td>` 单元格,随时 能接你自己的 className 工具类。比逐行手写表格标记省心多了,而且改 起来也容易:改 Markdown、重转、重新粘。
讲解 Markdown → HTML → JSX 这条流水线
带一个刚接触 React 文档工具链的同事?粘一小段 Markdown 给他看输出: `# 标题` 怎么变成 `<h1>`、围栏块的语言标记怎么变成 `className`、 为什么包装层需要一个 Fragment。把 URL 分享给他(输入就在链接里), 他能自己重放、改 Markdown、看着 JSX 跟着更新。
常见踩坑
粘了原始 HTML 还指望按 Markdown 规则处理。这个工具先把输入当 Markdown 读;输入里字面的 `<div class="x">` 会被当作行内 HTML 原样透传,不会被重新解析。如果你手上已经是 HTML,改用 HTML 转 JSX 工具。它正是这条流水线专门的后半段。
以为代码块里的花括号会保持裸花括号。在 JSX 输出里,`{` 和 `}` 会被转义成 JSX 安全的实体,以免被当成表达式。要展示字面花括号这是对的,但如果你复制的代码里本该有一个真正的 JSX 表达式,就得手工把它解转义回来。
忘了包成的多块组件需要单一根节点。Markdown 几乎总会产出多个顶层块,所以包组件时会自动套一层 Fragment `<>…</>`。如果你关掉包装又忘了开 Fragment 开关,把多个块直接粘进 `return (...)` 是编译不过的。把"用 Fragment 包裹"打开即可。
隐私说明
转换是纯 JavaScript,完全在你的浏览器标签页里跑。你的 Markdown 先解析为 HTML,再用原生 DOMParser 在一个惰性文档里遍历,没有网络请求、不上传、 不记录你粘了什么。唯一会"出门"的东西:你的输入会同步到页面 URL 的 query string 里,这样"分享链接"能复现同一份转换。这对协作很方便,但也意味着 输入里的任何内容都会进浏览器历史和接收方的服务器日志。如果 Markdown 里 含密钥、令牌或不想被记录的内部备注,请手动复制输出,而不是分享 URL。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。