Markdown 预览
将 Markdown 文本实时渲染为 HTML 进行预览
加载示例
Markdown
预览
本地运行 · 粘贴密钥安全无忧
预览将显示在此处……
本地运行 · 粘贴密钥安全无忧
预览将显示在此处……
什么是 Markdown？
Markdown 是 John Gruber 于 2004 年创建的一种轻量级标记语言。它使用星号、井号、短横线等纯文本格式符号来表示文档结构：标题、加粗、斜体、列表、链接和代码块。Markdown 预览工具将这些纯文本解析并渲染为格式化的 HTML，让您在发布前就能准确预览文档的最终呈现效果。原始 Markdown 规范记录在 Gruber 的 Daring Fireball 文档中，此后该格式已被正式标准化为 CommonMark。
Markdown 已成为开发者文档、README 文件、静态站点生成器（Jekyll、Hugo、Astro）、Wiki 和知识库的默认写作格式。GitHub、GitLab、Bitbucket、Stack Overflow、Reddit 和 Notion 均原生支持 Markdown。由于源文件是纯文本，Markdown 文件可以轻松通过 Git 进行版本控制，跨分支比对差异，并在文件不重叠的部分无冲突地合并。
Markdown 预览工具会实时解析您的输入并转换为 HTML。这样您就能在提交文件或发布页面前及时发现格式错误、失效链接和意外的嵌套问题。本预览工具完全在浏览器中运行，无需服务器往返，因此您可以处理私密或敏感文档而无需将内容通过网络传输。
为什么使用在线 Markdown 预览工具？
在没有预览功能的纯文本编辑器中编写 Markdown，意味着您只能凭猜测判断输出结果。实时预览工具能即时消除这种信息盲区。
⚡
实时渲染
边输入边查看格式化效果。每个标题、列表、代码块和链接都会即时渲染，让您在错误发生的第一时间就能发现。
🔒
隐私优先处理
所有解析均在您的浏览器中进行。您的 Markdown 文本不会上传到服务器，因此处理内部文档、示例中的 API 密钥或草稿博客文章都是安全的。
📝
无需注册或安装
打开页面即可开始输入。无需注册表单，无需下载桌面应用，也无需配置 VS Code 扩展。任何带浏览器的设备均可使用。
🌐
完整 CommonMark 支持
标题、加粗、斜体、删除线、行内代码、围栏代码块、有序和无序列表、链接、引用块以及水平分割线，全部支持。
Markdown 预览使用场景
前端开发者编写组件文档
在推送到 GitHub 之前预览 README 文件和组件文档。验证代码示例在围栏代码块中是否正确渲染，以及相对链接是否指向正确的文件。
后端工程师起草 API 文档
用 Markdown 编写接口描述、请求/响应示例和认证指南。预览渲染效果，确认 JSON 代码块、表格和嵌套列表的显示符合预期。
DevOps 工程师维护运维手册
存储在 Git 仓库中的运维手册和故障响应手册需要准确的格式。在合并前预览包含编号列表和代码片段的分步操作说明。
QA 工程师编写测试计划
用 Markdown 记录测试场景、验收标准和缺陷报告。使用预览工具确保核对清单、标题和交叉引用能够清晰渲染。
数据工程师记录数据管道
数据管道的 README 描述了数据模型、DAG 依赖关系和配置信息。预览这些文档，确保行内代码、围栏 SQL 代码块和编号安装步骤格式正确。
学生学习 Markdown 语法
在左侧输入 Markdown，在右侧查看 HTML 渲染结果。通过实验标题、列表、加粗、斜体和代码块，熟练掌握语法。
Markdown 语法参考
下表列出了常用 Markdown 语法对应的渲染效果及 HTML 标签。涵盖了几乎所有 Markdown 解析器都支持的 CommonMark 基础语法。
| Markdown | 渲染效果 | HTML 标签 |
|---|---|---|
| # Heading | Heading 1 | <h1> |
| ## Heading | Heading 2 | <h2> |
| **bold** | Bold text | <strong> |
| *italic* | Italic text | <em> |
| ~~strike~~ | Strikethrough | <del> |
| `code` | Inline code | <code> |
| ```lang\n...\n``` | Fenced code block | <pre><code> |
| - item | Unordered list | <ul><li> |
| 1. item | Ordered list | <ol><li> |
| [text](url) | Hyperlink | <a href> |
| > quote | Blockquote | <blockquote> |
| --- | Horizontal rule | <hr> |
Markdown 变体对比
不同平台在原始 Markdown 规范的基础上添加了额外功能。了解您所针对的变体，有助于避免在其他渲染器中无声失效的语法。
GitHub Flavored Markdown (GFM)
新增了任务列表（- [ ] / - [x]）、管道语法表格、删除线（~~text~~）以及 URL 自动链接。这是 GitHub Issues、Pull Request 和 README 文件所使用的变体，基于 CommonMark 之上由 GitHub Flavored Markdown Spec 规范定义。
CommonMark
对原始 Markdown 语法的严格、无歧义规范。CommonMark 为嵌套列表、惰性续行和块引用内空行等边界情况定义了精确规则。大多数现代解析器（marked、markdown-it、goldmark）默认遵循 CommonMark。
MultiMarkdown (MMD)
在 Markdown 基础上扩展了脚注、引文键、数学公式（LaTeX）、定义列表和文档元数据。主要用于学术写作以及导出为 PDF 或 LaTeX 的长篇文档。
MDX
可在 Markdown 文件中直接嵌入 JSX 组件。被 Docusaurus、Nextra 和 Astro 内容集合等文档框架所使用。MDX 文件在构建时被编译为 React 组件。
代码示例：以编程方式渲染 Markdown
当您需要在应用程序中而非浏览器工具中渲染 Markdown 时，可使用以下库。每个示例均将 Markdown 字符串转换为 HTML 字符串。
JavaScript (marked)
import { marked } from 'marked'
const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"
// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"Python (markdown)
import markdown
md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'
# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])
# Convert a file
with open('README.md') as f:
html = markdown.markdown(f.read(), extensions=['extra'])Go (goldmark)
package main
import (
"bytes"
"fmt"
"github.com/yuin/goldmark"
)
func main() {
source := []byte("# Hello\n\nThis is **Markdown**.")
var buf bytes.Buffer
if err := goldmark.Convert(source, &buf); err != nil {
panic(err)
}
fmt.Println(buf.String())
// → <h1>Hello</h1>
// → <p>This is <strong>Markdown</strong>.</p>
}CLI (pandoc)
# Convert Markdown file to HTML pandoc README.md -f markdown -t html -o output.html # Convert with GitHub Flavored Markdown pandoc README.md -f gfm -t html --standalone -o output.html # Pipe from stdin echo '# Hello **world**' | pandoc -f markdown -t html # → <h1>Hello <strong>world</strong></h1>
常见问题
Markdown 和 HTML 有什么区别？
Markdown 是一种可转换为 HTML 的纯文本简写格式。您写 # Heading 而非 <h1>Heading</h1>。Markdown 书写更快，源文件可读性更强，但 HTML 可以完全控制每个元素和属性。大多数 Markdown 渲染器输出标准 HTML。
Markdown 和 GitHub Flavored Markdown 一样吗？
不一样。GitHub Flavored Markdown（GFM）是 CommonMark 的超集，增加了表格、任务列表、删除线和自动链接。普通 Markdown（CommonMark）不包含这些功能。如果您的 Markdown 将在 GitHub 上展示，请使用 GFM 语法。如果目标是其他渲染器，请检查该渲染器支持哪些扩展。
Markdown 可以插入图片吗？
可以。语法为 。替代文字放在方括号内，图片 URL 放在圆括号内。还可以添加可选标题：。大多数渲染器会将其转换为带有 src、alt 和 title 属性的 <img> 标签。
如何在 Markdown 中创建表格？
表格不在原始 Markdown 规范中，但 GFM 和大多数现代解析器均支持。使用管道符（|）分隔列，短横线（---）作为表头行：| 姓名 | 年龄 |\n|---|---|\n| 张伟 | 30 |。对齐方式通过分隔行中的冒号控制：:--- 左对齐，:---: 居中，---: 右对齐。
使用此预览工具时，我的文本会被发送到服务器吗？
不会。Markdown 解析器完全在您的浏览器中通过 JavaScript 运行。您的文本保存在本地设备上，不会通过网络传输。您可以在使用工具时打开浏览器的「网络」面板来验证这一点。
此预览工具支持哪些 Markdown 元素？
本预览工具支持标题（h1 至 h6）、加粗、斜体、删除线、行内代码、带语言提示的围栏代码块、有序和无序列表、链接、引用块以及水平分割线。对这些元素遵循 CommonMark 解析规则。
如何预览带有数学公式或图表的 Markdown？
数学公式（LaTeX）和图表（Mermaid）是 CommonMark 和 GFM 中未包含的扩展功能。要渲染它们，您需要支持这些扩展的解析器，例如使用 markdown-it-katex 插件的 markdown-it（用于数学公式），或支持原生渲染 Mermaid 代码块的 GitHub 平台。本预览工具专注于标准 Markdown 元素。