正在加载,请稍候…

Markdown 转 HTML:开发者和写作者的实用指南

学习如何将 Markdown 快速转换为干净的 HTML。涵盖 Markdown 语法、CommonMark 和 GFM 等流行方言,以及编写和发布的最佳实践。

Markdown 转 HTML:开发者和写作者的实用指南

什么是 Markdown?

Markdown 是一种轻量级标记语言,由 John Gruber 于 2004 年创建,旨在以纯文本形式易于阅读和编写,同时能干净地转换为 HTML。它广泛应用于网络文档、README 文件、博客文章、论坛帖子(Reddit、Stack Overflow)以及内容管理系统。

Markdown 的关键理念:纯文本源应该看起来像人们在电子邮件和文本文档中已经使用的自然文本格式约定。

Markdown 转 HTML:开发者和写作者的实用指南 插图

核心 Markdown 语法

标题

# H1 标题
## H2 标题
### H3 标题
#### H4 标题

强调和内联代码

*斜体* 或 _斜体_
**粗体** 或 __粗体__
***粗斜体***
~~删除线~~
`内联代码`

链接和图片

[链接文本](https://example.com "可选标题")
[引用链接][reference-id]
[reference-id]: https://example.com

列表

- 无序项
- 另一项
  - 嵌套项

1. 有序项
2. 第二项
   1. 嵌套有序

Markdown 转 HTML:开发者和写作者的实用指南 插图

代码块

带可选语法高亮的围栏代码块:

    ```javascript
    function hello() {
      console.log("Hello, World!");
    }
    ```

块引用

> 这是一个块引用。
> 它可以跨越多行。
>
> 以及多个段落。

表格(扩展 Markdown)

| 列 1 | 列 2 | 列 3 |
|----------|----------|----------|
| 单元格 A | 单元格 B | 单元格 C |
| 单元格 D | 单元格 E | 单元格 F |

CommonMark:标准

原始 Markdown 规范存在歧义。CommonMark(commonmark.org)是一个严格、无歧义的规范,被 GitHub、GitLab、Stack Overflow 等众多平台采用。GitHub Flavored Markdown(GFM)扩展了 CommonMark,增加了任务列表、表格和自动链接 URL。

Markdown 处理库

JavaScript

  • marked:快速、紧凑、广泛使用
  • markdown-it:功能齐全,拥有插件生态
  • remark:统一生态,基于 AST 处理
  • micromark:最小的 CommonMark 兼容解析器

Python

  • Python-Markdown:标准库
  • mistune:快速且可扩展渲染
  • marko:CommonMark 兼容

Markdown 转 HTML:开发者和写作者的实用指南 插图

服务端渲染 vs. 客户端渲染

为了性能和 SEO,推荐使用服务端 Markdown 渲染。客户端渲染需要将解析器发送到浏览器,并延迟首次有意义绘制。

安全性:Markdown 转 HTML 中的 XSS

Markdown 可以包含原始 HTML,默认情况下会原样渲染。这在处理用户生成的 Markdown 时会产生 XSS 漏洞:

恶意输入:

[点击我](javascript:alert('xss'))
<script>steal(document.cookie)</script>
<img src="x" onerror="maliciousCode()">

始终对 Markdown 转换器输出的 HTML 进行消毒,尤其是在显示用户内容时。在将 Markdown 转换为 HTML 后,使用 DOMPurify(浏览器)或 sanitize-html(Node.js)。

不同场景下的 Markdown

README 文件(GitHub/GitLab)

项目文档使用广泛的 Markdown 功能:徽章、可折叠部分、mermaid 图表和代码语法高亮。

静态站点生成器

Jekyll、Hugo、Gatsby、Next.js、Astro 等将 Markdown 文件处理为 HTML 页面。文件顶部的 Frontmatter YAML 提供元数据: ```markdown

title: 我的博客文章 date: 2024-01-15 tags: [webdev, javascript]

文章内容在此


### 文档工具
Docusaurus、MkDocs、GitBook 和 Notion 都使用 Markdown 作为主要编写格式。

## 使用 Markdown 转 HTML 转换器

我们的工具:
1. **编写或粘贴 Markdown** 到输入面板
2. **查看实时 HTML 输出**,实时预览渲染效果
3. **查看渲染后的 HTML**——了解它在浏览器中的显示效果
4. **复制 HTML 源码**——获取原始 HTML 用于你的应用程序
5. **GitHub Flavored Markdown**——支持表格、任务列表和自动链接

用于预览 Markdown 格式、从文档生成 HTML,以及测试你的 Markdown 源码在不同平台上的渲染效果。