Markdown预览
实时预览 Markdown 渲染效果。
这个工具能做什么
Markdown预览把你在左侧输入框写的 Markdown 文本实时转换成右侧的网页渲染效果,边写边看排版结果。它解决的痛点很直接:Markdown 本质是纯文本标记语法,源码里的 #、*、> 这些符号在没渲染的情况下很难判断最终排版对不对,尤其是嵌套列表、引用块、代码块这类容易写错缩进和空行的结构。过去想看效果,往往得把内容粘到 GitHub、编辑器插件或某个平台后台里才能确认,来回切换很费时。这个 md 预览工具支持标题、加粗、斜体、行内代码、代码块、有序和无序列表、引用、分隔线、链接和图片等常用语法,随手写随手校对。
从原理上说,markdown 转 html 的过程分两步:先把文本按语法规则解析成一棵抽象的文档结构,区分块级元素(段落、标题、列表、代码块)和行内元素(加粗、链接、行内代码),再把这棵结构映射成对应的 HTML 标签,比如 # 标题 生成 h1,**粗体** 生成 strong,三个反引号包起来的内容生成 pre 加 code。整个 md 转 html 的解析和渲染都在浏览器里用 JavaScript 完成,输入一变化就重新解析并更新右侧 DOM,所以能做到实时。因为不经过服务器,内容全程留在本地、不上传,写还没公开的文档也不必顾虑。
写 README 或项目文档时这个工具最实用:README 在 GitHub 上是按 Markdown 渲染的,本地光盯着源码不容易发现哪一级列表缩进错了、哪张图片链接写漏了,边写边在 markdown 在线预览里核对,能省掉反复 push 再刷新页面确认的循环。记技术笔记、整理接口说明也一样,比如把一组请求参数用有序列表列出、把示例请求用代码块贴上,在右侧确认层级和代码块的范围都没问题,再把内容复制到目标平台,避免发布后才发现排版乱掉。
需要留意的是,Markdown 并非单一标准,CommonMark、GFM(GitHub Flavored Markdown)等不同方言在细节上存在差异,本工具渲染的是上面列出的这套常用语法子集,像表格、任务列表、删除线、脚注这类扩展或平台自定义语法不一定在这里生效,最终排版应以你要发布的平台实际渲染为准。此外图片是按链接地址引用显示,工具本身不托管或上传图片,指向你电脑本地磁盘的路径通常加载不出来;代码块这里只做基础呈现,其语法高亮主题也可能和目标平台不完全一致。
Markdown预览是一个免费的在线工具,打开网页就能用,不用下载也不用注册。平时大家搜的“markdown预览”、“md预览”、“markdown转html”,说的都是这个。
常见使用场景
- 写 GitHub 项目 README 时边写边核对排版
- 整理技术笔记时确认列表和代码块层级
- 发布接口文档前检查参数列表缩进对不对
- 快速验证一段 Markdown 语法的渲染效果
- 写博客草稿时预览标题和引用块的样式
使用方法
- 把内容粘贴到输入框(生成类工具直接设置选项)。
- 按需要选择选项,点操作按钮。
- 结果出现在下方,点「复制结果」即可带走。