一级标题：Markdown 元素完整展示

本文档用于测试 Markdown 解析器、编辑器、博客主题和代码高亮样式。Markdown 存在 CommonMark、GitHub Flavored Markdown（GFM）以及各平台私有扩展，因此不存在一份能在所有解析器中完全一致渲染的“全部元素”清单。下文覆盖常用标准语法、GFM 扩展和常见 HTML/平台扩展。

二级标题：参考教程导航

本展示文件已按以下教程章节逐项对照。链接可用于查看语法说明或在在线编辑器中验证源码。

教程章节 本文对应内容
Markdown 教程 完整语法总览
Markdown 编辑器 在线输入、预览与导出
Markdown 第一个文件 最小文档示例
Markdown 标题 ATX 与 Setext 标题
Markdown 文本格式 段落、换行、强调、删除线、下划线和脚注
Markdown 列表 有序、无序、嵌套和任务列表
Markdown 引用块 多级引用与引用内嵌元素
Markdown 代码 行内、缩进式和围栏代码块
Markdown 链接 行内、引用式、自动和图片链接
Markdown 图片 图片、替代文本、尺寸和对齐
Markdown 表格 表格与列对齐
Markdown 高级技巧 HTML、转义、公式和扩展语法
Markdown 分割线 三种分隔线写法
Markdown 数学公式 LaTeX/TeX 公式与符号
Markdown 图表绘制 Mermaid 与其他图表扩展

三级标题：最小 Markdown 文件

Markdown 文件通常使用 .md 或 .markdown 扩展名。最小示例源码如下：

# 我的第一个 Markdown 文件

这是第一段正文，其中包含 **粗体** 和 [链接](https://www.example.com/)。

- 第一项
- 第二项

对应的实际渲染元素可在本文后续章节中查看。

二级标题：标题层级

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5
六级标题 H6

一级标题（Setext 写法）

二级标题（Setext 写法）

二级标题：段落与换行

这是一个普通段落。它包含中文、English、数字 0123456789，以及常用标点：，。！？；：“”‘’（）【】《》……。

这是另一个段落。段落之间用一个空行分隔。

这一行末尾有两个空格，因此下一行是硬换行。
这是硬换行后的内容。

这一行使用 HTML 换行标签。

这是 <br> 后的内容。

很长的连续文本可用于测试换行和溢出：ThisIsAnExtremelyLongUnbrokenStringForTestingTextOverflowAndWordWrapping_0123456789_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz

二级标题：文字样式

普通文字、粗体文字、另一种粗体、斜体文字、另一种斜体、粗斜体文字、另一种粗斜体。

嵌套样式：粗体中包含 斜体 内容，以及 斜体中包含 粗体 内容。

GFM 删除线：这段文字已被删除。

HTML 样式：下划线、插入文字、删除文字、不再准确的文字、高亮文字、H2O、x2、小号文字。

行内代码：const answer = 42;，包含反引号的代码：使用 `code` 标记。

键盘按键：Ctrl + C、Ctrl + Shift + P、⌘ + K。

变量与示例输出：width × height，程序返回 200 OK。

缩写（部分解析器支持）：HTML 是 HyperText Markup Language 的缩写。

HTML、CSS。

二级标题：特殊字符与转义

反斜杠转义：*不是斜体*、# 不是标题、[不是链接]、`不是代码`、1. 不是有序列表。

Markdown 常用可转义字符源码：

\\  反斜杠       \`  反引号       \*  星号
\_  下划线       \{\} 花括号       \[\] 方括号
\(\) 小括号       \#  井号         \+  加号
\-  减号         \.  英文句点     \!  感叹号
\|  竖线         \>  大于号

实际显示：\ 反斜杠、` 反引号、* 星号、_ 下划线、{ 花括号、[ 方括号、( 小括号、# 井号、+ 加号、- 减号、. 英文句点、! 感叹号、| 竖线、> 大于号。

HTML 实体：&amp; → &，&lt; → <，&gt; → >，&copy; → ©，&nbsp; → 不换行空格 示例。

保留空格和换行：这段内容不会自动换行（需允许内联样式）。

二级标题：链接

三级标题：行内链接

访问 Emlog 官网

带标题的链接

自动链接：https://www.emlog.net/、support@example.com

GFM 自动识别链接（部分解析器支持）：https://www.example.com

页内锚点：跳转到“表格”

三级标题：引用式链接

Emlog、CommonMark 规范、简写引用。

三级标题：相对链接与下载

仓库 README

下载 README（HTML 属性支持情况取决于平台）

二级标题：图片

远程占位图片

可点击图片因为使用了放大图片功能导致失效。

引用式图片：引用式占位图片

HTML 图片（固定宽度、懒加载）：

HTML 图片示例

HTML 图片（百分比宽度并保持响应式）：

灰色响应式占位图片

居中图片：

绿色居中占位图片

并排图片（需解析器保留 HTML 和内联样式）：

蓝色示例图片一 橙色示例图片二 紫色示例图片三

图片替代文字应描述图片本身，而不是只写“图片”或“点击这里”；这也能在图片加载失败时保留有效信息。

图片加载失败时的替代文字：

这段替代文字应在图片加载失败时出现

二级标题：分隔线

分隔线可使用三个或更多星号、减号或下划线，符号之间可以插入空格。以下写法通常都会生成水平分隔线。

较长的分隔线源码示例（放在代码块中，避免重复占用页面高度）：

*****
----------
____________

二级标题：引用块

这是一级引用。

引用中可以包含多个段落。

  • 引用中的列表项
  • 另一个列表项

引用中也可以使用文字样式。

一级引用

二级嵌套引用

三级嵌套引用

[!NOTE]
这是 GitHub 风格的 Note 提示块，并非所有解析器都支持。

[!TIP]
这是 Tip 提示块。

[!IMPORTANT]
这是 Important 提示块。

[!WARNING]
这是 Warning 提示块。

[!CAUTION]
这是 Caution 提示块。

二级标题：无序列表

  • 使用连字符的列表项

  • 第二项

    • 二级列表项
    • 三级列表项
      • 四级列表项

  • 包含多段内容的列表项

    这是同一列表项内的第二个段落。

    这里是列表项内的引用。

    这里是列表项内的代码块。

  • 使用星号的列表项

  • 第二项

  • 使用加号的列表项

  • 第二项

二级标题：有序列表

  1. 第一项
  2. 第二项
    1. 二级有序项
    2. 二级有序项
      1. 三级有序项
  3. 第三项

从指定数字开始：

  1. 第五项
  2. 第六项
  3. 第七项

全部使用 1. 也会自动编号：

  1. 自动编号项
  2. 自动编号项
  3. 自动编号项

二级标题：混合列表

  1. 安装依赖
    • 检查运行环境
    • 安装软件包
  2. 修改配置
    • 开发环境
    • 生产环境
  3. 运行测试

二级标题：任务列表（GFM）

  • [x] 已完成任务
  • [X] 使用大写 X 的已完成任务
  • [ ] 未完成任务
    • [x] 已完成的子任务
    • [ ] 未完成的子任务
  • [ ] 包含 行内代码 和 链接 的任务

二级标题：定义列表（扩展语法）

Markdown
: 一种轻量级标记语言。

HTML
: 超文本标记语言。
: 同一个术语可以有多个定义。

复杂术语
: 定义中可以包含 强调、代码 和其他行内元素。

二级标题：表格

默认对齐 左对齐 居中对齐 右对齐
普通文本 左 中 右
粗体 code 链接 123.45
中文内容 很长的单元格内容，用来观察自动换行和表格响应式效果 ✅ ¥9,999.00
转义竖线 a \| b 空单元格

HTML 合并单元格表格：

HTML 表格标题
姓名 成绩
语文 数学
张三 92 95
李四 88 91
平均分 90 93

二级标题：行内代码与代码块

行内代码示例：npm install、<section>、background: #fff;、路径 C:\Users\demo。

缩进式代码块（四个空格）：

function hello(name) {
  return `Hello, ${name}!`;
}

无语言标识的围栏代码块：

plain text
第二行内容
特殊字符：<>&"'

三级标题：常见语言代码高亮

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>示例页面</title>
  </head>
  <body>
    <button type="button">提交</button>
  </body>
</html>
:root {
  color-scheme: light dark;
}

.button:hover {
  transform: translateY(-1px);
}
const users = [{ id: 1, name: 'Alice' }];

async function loadUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
interface User {
  id: number;
  name: string;
  active?: boolean;
}

const formatUser = (user: User): string => `${user.id}: ${user.name}`;
<?php
declare(strict_types=1);

function greet(string $name): string
{
    return "Hello, {$name}!";
}

echo greet('Emlog');
from dataclasses import dataclass

@dataclass
class User:
    name: str
    active: bool = True

print(User(name="Alice"))
public final class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, Markdown!");
    }
}
#include <stdio.h>

int main(void) {
    printf("Hello, Markdown!\n");
    return 0;
}
#include <iostream>

int main() {
    std::cout << "Hello, Markdown!" << std::endl;
    return 0;
}
var message = "Hello, Markdown!";
Console.WriteLine(message);
package main

import "fmt"

func main() {
    fmt.Println("Hello, Markdown!")
}
fn main() {
    let message = "Hello, Markdown!";
    println!("{message}");
}
SELECT id, title, created_at
FROM posts
WHERE status = 'published'
ORDER BY created_at DESC
LIMIT 10;
{
  "name": "markdown-showcase",
  "version": "1.0.0",
  "private": true
}
services:
  web:
    image: nginx:alpine
    ports:
      - "8080:80"
<?xml version="1.0" encoding="UTF-8"?>
<note priority="high">
  <message>Hello, Markdown!</message>
</note>
#!/usr/bin/env bash
set -euo pipefail
echo "Hello, Markdown!"
$ErrorActionPreference = 'Stop'
Get-ChildItem -Path . -Filter '*.md' -Recurse
- const enabled = false;
+ const enabled = true;
  console.log(enabled);
[database]
host = localhost
port = 3306

三级标题：代码围栏与行号扩展

以下属性写法只在部分解析器中有效：

const first = 1;
const second = 2;
const total = first + second;
console.log(total);

使用四个反引号包裹含三个反引号的内容：

console.log('嵌套代码围栏');

二级标题：脚注（扩展语法）

这句话包含一个普通脚注。^1 这里还有一个命名脚注。^note 同一脚注可以再次引用。^1

脚注可以包含多个段落，也可以包含缩进代码块。

二级标题：数学公式（扩展语法）

数学公式通常由 MathJax 或 KaTeX 渲染，并非 CommonMark 标准语法。

三级标题：行内公式与块级公式

行内公式：$E = mc^2$，函数：$f(x) = x^2 + 2x + 1$，勾股定理：$a^2 + b^2 = c^2$。

块级公式：

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

高斯积分：

$$
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
$$

三级标题：上下标、分数与根式

$$
x_1 + x_2 + \cdots + x_n, \qquad
a^{m+n} = a^m a^n, \qquad
\frac{a+b}{c+d}, \qquad
\sqrt{x}, \qquad
\sqrt[n]{x}
$$

三级标题：基本运算与比较符号

$$
a + b,\quad a - b,\quad a \times b,\quad
a \div b,\quad a \cdot b,\quad a \pm b
$$

$$
a = b,\quad a \ne b,\quad a < b,\quad a > b,\quad
a \le b,\quad a \ge b,\quad a \approx b,\quad a \equiv b
$$

三级标题：集合与逻辑符号

$$
x \in A,\quad x \notin A,\quad A \subset B,\quad
A \subseteq B,\quad A \cup B,\quad A \cap B,\quad
\varnothing,\quad \forall x,\quad \exists y,\quad P \Rightarrow Q
$$

三级标题：希腊字母

$$
\alpha,\ \beta,\ \gamma,\ \delta,\ \epsilon,\ \theta,\ \lambda,\ \mu,\ \pi,\ \rho,\ \sigma,\ \phi,\ \omega
$$

$$
\Gamma,\ \Delta,\ \Theta,\ \Lambda,\ \Xi,\ \Pi,\ \Sigma,\ \Phi,\ \Psi,\ \Omega
$$

三级标题：求和、乘积、极限与积分

$$
\sum{i=1}^{n} i = \frac{n(n+1)}{2}, \qquad
\prod{i=1}^{n} i = n!
$$

$$
\lim_{x \to 0}\frac{\sin x}{x} = 1, \qquad
\int_a^b f(x)\,dx, \qquad
\oint_C \vec{F}\cdot d\vec{r}
$$

三级标题：函数与装饰符号

$$
\sin x,\ \cos x,\ \tan x,\ \log x,\ \ln x,\ \exp x,
\quad \vec{v},\ \hat{x},\ \bar{x},\ \overline{AB}
$$

三级标题：多行对齐公式

$$
\begin{aligned}
f(x) &= ax^2 + bx + c \
f'(x) &= 2ax + b \
f''(x) &= 2a
\end{aligned}
$$

三级标题：分段函数

$$
f(x) =
\begin{cases}
x^2, & x \ge 0 \
-x, & x < 0
\end{cases}
$$

三级标题：矩阵与行列式

圆括号矩阵：

$$
\begin{pmatrix}
a & b \
c & d
\end{pmatrix}
$$

方括号矩阵：

$$
\begin{bmatrix}
1 & 2 \
3 & 4
\end{bmatrix}
$$

行列式：

$$
\begin{vmatrix}
a & b \
c & d
\end{vmatrix} = ad - bc
$$

大括号矩阵（部分渲染器支持）：

$$
\begin{Bmatrix}
a & b \
c & d
\end{Bmatrix}
$$

二级标题：Emoji 与 Unicode

直接使用 Emoji：😀 🎉 ✅ ❌ ⚠️ 🚀 ❤️ 👍

Emoji 短代码（需平台支持）：:smile: :tada: :white_check_mark: :warning: :rocket:

Unicode 字符：© ® ™ € ¥ £ → ← ↑ ↓ ↔ ✓ ✗ ★ ☆ α β γ 中文 日本語 한국어 العربية。

二级标题：HTML 折叠内容

点击展开或收起 这里是折叠区域内的内容。 - 可以包含列表 - 可以包含 **Markdown**（是否解析取决于平台） ```js console.log('details'); ```
默认展开的区域

通过 open 属性保持默认展开。

二级标题：更多 HTML 文本元素

这是一个 HTML 段落，其中有 strong、em、b、i、短引用 和 作品名称。

这是带 cite 属性的 HTML 长引用。

联系人：Example
邮箱：support@example.com 
预格式化文本会保留
    空格
        与换行。

进度：72%

磁盘使用量：65%

二级标题：HTML 列表

术语一
术语一的定义。
术语二
术语二的定义。
  1. 反向编号项目
  2. 另一个项目

二级标题：媒体元素（平台可能过滤）

figure 示例
图 1：带图注的图片

说明：example.mp3 和 example.mp4 是故意设置的示例相对路径，用于检查媒体缺失状态。

二级标题：嵌入内容（平台可能过滤）

内联框架通常会被安全过滤器移除，取消下面的 HTML 注释后可用于受信任环境测试：

二级标题：Mermaid 图表（扩展语法）

Mermaid 代码块需要编辑器或页面额外加载 Mermaid。常用流程图方向为 TB/TD（从上到下）、BT（从下到上）、LR（从左到右）和 RL（从右到左）。

三级标题：流程图

flowchart LR
    A([开始]) --> B[普通处理]
    B --> C{条件成立?}
    C -- 是 --> D[/输入或输出/]
    C -. 否 .-> E[[子流程]]
    D ==> F((结束))
    E --> F

三级标题：时序图

sequenceDiagram
    participant U as 用户
    participant W as Web 应用
    participant D as 数据库
    U->>W: 提交请求
    W->>D: 查询数据
    D-->>W: 返回结果
    W-->>U: 响应页面

三级标题：甘特图

gantt
    title 示例项目计划
    dateFormat YYYY-MM-DD
    axisFormat %m-%d
    section 设计
    需求分析 :done, requirements, 2026-08-01, 5d
    界面设计 :active, design, after requirements, 7d
    section 开发
    功能开发 :development, after design, 10d
    自动测试 :testing, after development, 4d

三级标题：饼图

pie showData
    title 示例数据占比
    "桌面端" : 52
    "移动端" : 38
    "其他" : 10

三级标题：类图

classDiagram
    class User {
        +int id
        +string name
        +login()
    }
    class Post {
        +int id
        +string title
        +publish()
    }
    User "1" --> "0..*" Post : authors

三级标题：状态图

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中 : 提交
    审核中 --> 已发布 : 通过
    审核中 --> 草稿 : 退回
    已发布 --> [*]

三级标题：实体关系图

erDiagram
    USER ||--o{ POST : writes
    USER {
        int id PK
        string name
    }
    POST {
        int id PK
        int user_id FK
        string title
    }

三级标题：Mermaid 主题初始化与交互

主题配置与点击事件可能被平台的安全策略禁用。

%%{init: {"theme": "forest"}}%%
flowchart TD
    A[点击访问教程] --> B[结束]
    click A "https://www.runoob.com/markdown/md-draw.html" "打开图表教程"

三级标题：旧式流程图扩展（非 Mermaid）

部分编辑器支持 flow 围栏：

start=>start: 开始
input=>inputoutput: 输入数据
check=>condition: 数据有效?
process=>operation: 处理数据
finish=>end: 结束
start->input->check
check(yes)->process->finish
check(no)->input

部分编辑器支持 sequence 围栏：

用户->系统: 提交登录请求
系统->数据库: 查询用户
数据库-->系统: 返回结果
系统-->用户: 返回登录状态

二级标题：图表与流程图的纯文本降级

[用户] -> [Web 应用] -> [数据库]
   ^            |
   +------------+

二级标题：平台专用语法示例

以下内容仅展示源码形态，能否渲染取决于平台。

三级标题：目录

[TOC]

三级标题：Wiki 链接

[[页面名称]]、[[页面名称|显示文字]]

三级标题：高亮与上下标的非标准写法

==高亮文字==、H~2~O、x^2^

三级标题：标签、提及与议题

@username、#123、GH-123（通常需要托管平台提供自动链接能力）。

三级标题：引用文献

[@citation-key]（常见于 Pandoc）。

三级标题：属性列表

## 带属性的标题 {#custom-id .custom-class}（常见于 Pandoc、Markdown Extra 等）。

二级标题：边界情况

空链接：

空图片替代文本：

链接中包含格式：粗体链接

代码中包含 Markdown 标记：**不会变粗**、[不会成为链接](https://example.com)。

中英文混排：Markdown 可以让 content creation 更加 高效，版本号为 v1.2.3。

连续强调符号：粗斜体、粗体删除线、粗体代码。

URL 参数转义：带查询参数的链接。

二级标题：排版压力测试

三级标题：短文本

短。

三级标题：长段落

这是一段用于观察正文宽度、行高、字体、段落间距和响应式换行效果的长文本。一个合格的 Markdown 页面主题应当在桌面端保持舒适的阅读宽度，在移动端避免横向滚动，并正确处理中文标点、英文单词、行内代码、链接以及不同字重之间的视觉关系。This sentence adds English content to test mixed-language line breaking, font fallback, punctuation spacing, and the rendering of a reasonably long paragraph across different viewport widths.

三级标题：字符组合

数字：0 1 2 3 4 5 6 7 8 9

大写字母：A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

小写字母：a b c d e f g h i j k l m n o p q r s t u v w x y z

符号：! @ # $ % ^ & * ( ) - _ = + [ ] { } \ | ; : ' " , . < > / ? ` ~

二级标题：结束

以上内容可用于检查标题、正文、列表、引用、表格、代码高亮、链接、图片、脚注、公式、图表、HTML 元素及移动端溢出等渲染效果。

最后更新：