Markdown 预览工具 - 在线预览、转换 HTML 和纯文本

在线预览 Markdown 内容，并支持转换为 HTML 或纯文本，适合 README、接口文档、发布说明和技术文章整理。

功能特点

  • 实时预览 Markdown 标题、列表、代码块和链接等常见语法
  • 支持 Markdown 转 HTML，便于粘贴到 CMS、邮件或页面片段
  • 支持转换为纯文本，适合提取文档内容或清理格式
  • 按目标渲染器检查 GFM、CommonMark、表格、任务列表和原始 HTML 的兼容差异
  • 适合在提交 README、文档和发布说明前快速检查排版

使用方法

  1. 粘贴 Markdown 文档、README 或发布说明内容
  2. 先确认目标平台的 Markdown 方言，再查看预览并按需转换为 HTML 或纯文本
  3. 检查相对链接、图片、原始 HTML 和代码块后，再复制到代码仓库、文档系统或博客

示例输入

  • README 标题与代码块

    # API Client

## Install

```bash
npm install example-sdk
```

    适合检查标题层级、代码语言标记和文档目录结构。

  • 任务列表

    - [x] Add API key
- [ ] Add retry logic
- [ ] Write integration tests

    适合整理发布清单、Issue 说明和项目协作文档。

  • 链接与表格

    | Status | Meaning |
| --- | --- |
| 200 | OK |

[API docs](https://example.com/docs)

    适合预览表格、链接和 Markdown 渲染结果，提前发现格式错位。

  • 相对链接与图片

    [安装指南](./docs/install.md)

![架构图](../images/architecture.png)

    适合检查文档发布目录、相对路径、图片替代文本和目标平台的资源基准路径。

  • HTML 转义与链接协议

    # Title

<script>alert(1)</script>

[docs](javascript:alert(1))

    当前辅助函数会转义原始 HTML，只把 http/https 链接转成 a 标签；javascript: 链接不会按链接语法转换。正式发布仍需完整净化流程。

示例输出

  • README 标题与代码块

    渲染：一级标题 API Client、二级标题 Install，以及内容为 npm install example-sdk 的 Bash 代码块

  • 任务列表

    渲染：1 个已完成任务和 2 个未完成任务

  • 链接与表格

    渲染：Status/Meaning 两列表格，以及指向 https://example.com/docs 的 API docs 链接

  • 相对链接与图片

    链接检查：./docs/install.md 和 ../images/architecture.png 会按发布文件位置解析，不能只在当前预览地址验证

  • HTML 转义与链接协议

    <script> 被转义为 &lt;script&gt;；javascript: 链接不会转换为 <a>

常见错误

  • Markdown 标题层级影响目录和可访问性，不应只用加粗文本代替 h1/h2。
  • 列表、引用、代码块和表格依赖空行与缩进，不同渲染器对边界语法可能有差异。
  • Markdown 转 HTML 后仍需处理外部链接、原始 HTML 和用户输入的安全过滤。
  • GFM、CommonMark 和各平台扩展语法并不完全一致。
  • 把用户输入的 Markdown 直接渲染成 HTML 可能放大 javascript: 链接、原始 HTML 或不可信图片的风险。

适用场景

  • README 编写预览
  • API 文档排版
  • 发布说明整理
  • 任务清单和技术笔记

实操检查

  • 核对 Markdown 基础渲染

    固定输入：# Title Hello **world** - one - two；步骤：粘贴输入，点击“转换 HTML”，同时观察右侧预览；预期结果：输出包含 <h1>Title</h1>、<strong>world</strong>、<ul> 以及两个 <li>；失败判断：标题被当作普通段落、粗体标记未转换，或两个列表项没有被同一个 ul 包住。

  • 核对纯文本和原始 HTML 转义

    固定输入：# Title Hello **world**；步骤：点击“纯文本”，记录结果；再输入 <script>alert(1)</script> 并点击“转换 HTML”；预期结果：纯文本为 Title Hello world，脚本输入输出为 <p>&lt;script&gt;alert(1)&lt;/script&gt;</p>；失败判断：纯文本残留 Markdown 标记，或脚本字符串出现在未转义的标签中。

页面专属核验

使用前与操作中

  • 当前本地渲染器支持 1–3 级标题、段落、`-` 无序列表、粗体、斜体、行内代码和 `https://` 链接，不是完整 CommonMark/GFM 解析器。
  • HTML 输出会先转义原始 HTML，预览使用生成结果；表格、任务列表、围栏代码块、图片和非 HTTPS 链接等目标平台语法必须按实际渲染器另行检查。
  • 纯文本转换只移除当前实现识别的标题、强调、行内代码、链接和列表标记；转换/预览是排版结果，不会验证链接可达性、文档事实或发布平台业务规则。

结果出来后

  • `# Title Hello **world**` 转 HTML 是否包含 `<h1>Title</h1>` 和 `<strong>world</strong>`，转纯文本是否得到 `Title Hello world`？
  • 文档使用表格、任务列表、代码围栏、图片或原始 HTML 时，输出是否与目标仓库、CMS 或博客的 Markdown 方言一致，而不是只看本页预览？
  • 链接、代码块和 HTML 内容是否已经检查目标 URL、复制后的上下文与安全策略，并确认原始标签不会被当作可执行 HTML？

相关工具

  • 代码格式化：统一格式化和轻量压缩 HTML、CSS、JavaScript 代码
  • 文本对比：按行对比文本、配置、日志和接口响应差异
  • JSON 工具：统一处理 JSON 格式化、校验、树形查看、Schema、CSV 转换、AI 响应分析和 JSON 修复
  • URL 编码与解析：统一处理 URL Encode/Decode、Percent Encoding、URL 解析构建、Query String 和 Punycode

工具边界

  • 预览结果取决于当前渲染器，不保证与 GitHub、GitLab、静态站点生成器完全一致。
  • Markdown 不是安全过滤器，输出 HTML 前仍需做 XSS 和链接策略检查。
  • 超长文档和复杂表格可能受浏览器渲染性能影响。

与相似工具的区别

  • 代码格式化：Markdown 面向文档语义与预览；代码格式化器面向编程语言语法，不能保证 Markdown 渲染兼容性。

安全与兼容性

  • 编辑和预览在浏览器执行；粘贴的远程图片链接仍可能在渲染时向第三方暴露访问请求。
  • 发布用户提供的 Markdown 前必须净化生成的 HTML，并限制 javascript: 链接、内联 HTML 与不可信媒体。

下一步排查

  1. 先确认目标平台的 Markdown 方言，再检查标题、列表、代码块、相对链接和图片。
  2. 需要发布 HTML 时，用代码格式化和安全过滤流程复核输出。
  3. 文档多人协作时用文本对比工具检查版本差异。

常见问题

为什么本地 Markdown 和 GitHub 显示不同？

平台使用的解析器和扩展不同，尤其是表格、任务列表、脚注、HTML 和代码高亮语法。

Markdown 转 HTML 后可以直接发布吗？

还应过滤不可信 HTML、检查链接和图片来源，并根据目标站点的 CSS 和安全策略验证。

相对链接为什么在预览中失效？

预览页、仓库目录和最终站点的基准路径可能不同；检查链接相对的文件位置、部署根路径和目标平台是否重写资源地址。