编码解码哈希加密格式化时间转换开发生成文本处理网络工具其他工具
首页 / 其他工具 / Markdown预览

Markdown预览

实时预览 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”,说的都是这个。

常见使用场景

使用方法

  1. 把内容粘贴到输入框(生成类工具直接设置选项)。
  2. 按需要选择选项,点操作按钮。
  3. 结果出现在下方,点「复制结果」即可带走。

常见问题

支持表格、任务列表、脚注这些扩展语法吗?
本工具渲染的是标题、加粗、斜体、行内代码、代码块、有序无序列表、引用、分隔线、链接和图片等常用语法。表格、任务列表、删除线、脚注等属于 GFM 或平台自定义的扩展语法,不一定在这里生效,需要这些语法时以目标平台的实际渲染为准。
这里的预览效果和 GitHub、其他平台上显示的一定一样吗?
不保证完全一致。不同平台采用的 Markdown 方言和 CSS 样式各有差异,常用语法的结构基本相同,但高亮主题、间距、扩展语法的处理可能不同。它适合快速校对结构和层级,最终样式请以发布平台为准。
我写的内容会上传到服务器吗?隐私安全吗?
不会上传。解析和渲染全部由浏览器里的 JavaScript 完成,内容始终留在你本地的浏览器中,不经过服务器,因此写内部文档或未公开内容也可以放心使用。
为什么我写的代码块或列表没有正确渲染?
多半是语法写法问题。代码块需要用三个反引号成对包裹并独占一行;列表项的层级依赖缩进(通常按空格数),前后一般还要有空行分隔。检查缩进是否统一、符号后是否有空格,通常就能恢复正常渲染。
图片怎么才能显示,支持本地图片吗?
图片用 ![描述](图片地址) 语法引用,地址需要是浏览器能直接访问的 URL,比如 http/https 链接或 data URI。指向本机磁盘的相对路径或 file 路径一般无法加载,工具本身也不负责上传或托管图片。

相关工具

查看全部「其他工具」工具 →

相关名词解释