Markdown 格式展示

发表于 更新于 分类于 阅读次数： 本文字数： 2.8k 阅读时长 ≈ 10 分钟

这是一个 Markdown 格式展示文件，包含各种常用的 Markdown 语法示例。

1. 标题层级

一级标题 H1

二级标题 H2

三级标题 H3

四级标题 H4

五级标题 H5
六级标题 H6

2. 文本样式

效果展示

这是粗体文本

这是斜体文本

这是粗斜体文本

这是删除线文本

这是行内代码

这是下划线文本

这是上标：X2

这是下标：H2O

源码

1
2
3
4
5
6
7
8
这是**粗体文本**
这是*斜体文本*
这是***粗斜体文本***
这是~~删除线文本~~
这是`行内代码`
这是<u>下划线文本</u>
这是上标：X<sup>2</sup>
这是下标：H<sub>2</sub>O

3. 列表

无序列表

效果展示

  • 第一项
  • 第二项
    • 嵌套项 2.1
    • 嵌套项 2.2
      • 深层嵌套 2.2.1
  • 第三项

源码

1
2
3
4
5
6
- 第一项
- 第二项
  - 嵌套项 2.1
  - 嵌套项 2.2
    - 深层嵌套 2.2.1
- 第三项

有序列表

效果展示

  1. 第一步
  2. 第二步
    1. 子步骤 2.1
    2. 子步骤 2.2
  3. 第三步

源码

1
2
3
4
5
1. 第一步
2. 第二步
   1. 子步骤 2.1
   2. 子步骤 2.2
3. 第三步

任务列表

效果展示

  • 已完成任务
  • 未完成任务
  • 待办事项

源码

1
2
3
- [x] 已完成任务
- [ ] 未完成任务
- [ ] 待办事项

4. 链接和引用

链接

效果展示

这是一个普通链接

这是一个带标题的链接

这是一个自动链接：https://www.example.com

源码

1
2
3
这是一个[普通链接](https://www.example.com)
这是一个[带标题的链接](https://www.example.com "链接标题")
这是一个自动链接：<https://www.example.com>

引用

效果展示

这是一级引用

这是二级引用

这是三级引用

注意：这是带有格式的引用

  • 列表项 1
  • 列表项 2

源码

1
2
3
4
5
6
7
8
9
> 这是一级引用
> 
> > 这是二级引用
> > 
> > > 这是三级引用

> **注意**：这是带有格式的引用
> - 列表项 1
> - 列表项 2

5. 表格展示

普通表格

效果展示

姓名 年龄 职业
张三 25 工程师
李四 30 设计师
王五 28 产品经理

源码

1
2
3
4
5
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
| 王五 | 28 | 产品经理 |

对齐方式表格

效果展示

左对齐 居中对齐 右对齐
内容1 内容2 内容3
A B C
长内容测试 中等内容 短

源码

1
2
3
4
5
| 左对齐 | 居中对齐 | 右对齐 |
|:-------|:--------:|-------:|
| 内容1 | 内容2 | 内容3 |
| A | B | C |
| 长内容测试 | 中等内容 | 短 |

复杂表格

效果展示

功能 描述 状态 优先级
用户登录 支持邮箱和手机号登录 ✅ 已完成 高
数据导出 支持 Excel 和 CSV 格式 🚧 进行中 中
消息推送 实时通知功能 📝 计划中 低
API 接口 RESTful API 设计 ✅ 已完成 高

源码

1
2
3
4
5
6
| 功能 | 描述 | 状态 | 优先级 |
|------|------|------|--------|
| 用户登录 | 支持邮箱和手机号登录 | ✅ 已完成 | 高 |
| 数据导出 | 支持 Excel 和 CSV 格式 | 🚧 进行中 | 中 |
| 消息推送 | 实时通知功能 | 📝 计划中 | 低 |
| API 接口 | RESTful API 设计 | ✅ 已完成 | 高 |

包含代码的表格

效果展示

语言 代码示例 说明
JavaScript console.log('Hello') 控制台输出
Python print("Hello") 打印输出
Java System.out.println("Hello"); 标准输出

源码

1
2
3
4
5
| 语言 | 代码示例 | 说明 |
|------|----------|------|
| JavaScript | `console.log('Hello')` | 控制台输出 |
| Python | `print("Hello")` | 打印输出 |
| Java | `System.out.println("Hello");` | 标准输出 |

6. 代码块

行内代码

效果展示

这是 inline code 示例，可以在文本中使用。

源码

1
这是 `inline code` 示例，可以在文本中使用。

代码块（无语言标识）

效果展示

1
2
3
这是一个无语言标识的代码块
可以包含任意文本
没有语法高亮

源码

1
2
3
4
5
```
这是一个无语言标识的代码块
可以包含任意文本
没有语法高亮
```

JavaScript 代码块

效果展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// JavaScript 示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

// ES6 箭头函数
const add = (a, b) => a + b;

// Promise 示例
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

源码

1
2
3
4
5
6
7
8
9
10
```javascript
// JavaScript 示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);
```

Python 代码块

效果展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Python 示例
def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)

# 列表推导式
squares = [x**2 for x in range(10)]

# 装饰器
def timer(func):
    def wrapper(*args, **kwargs):
        import time
        start = time.time()
        result = func(*args, **kwargs)
        print(f"耗时: {time.time() - start}秒")
        return result
    return wrapper

源码

1
2
3
4
5
6
7
8
9
10
11
```python
# Python 示例
def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)
```

HTML 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 示例</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <p>这是主要内容区域。</p>
    </main>
</body>
</html>

CSS 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* CSS 样式示例 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

SQL 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
-- SQL 查询示例
SELECT 
    u.id,
    u.name,
    u.email,
    COUNT(o.id) as order_count,
    SUM(o.total_amount) as total_spent
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name, u.email
HAVING COUNT(o.id) > 5
ORDER BY total_spent DESC
LIMIT 10;

-- 创建表
CREATE TABLE products (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(255) NOT NULL,
    price DECIMAL(10, 2),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Bash 代码块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#!/bin/bash

# Bash 脚本示例
echo "开始部署..."

# 变量定义
APP_NAME="my-app"
VERSION="1.0.0"

# 函数定义
deploy() {
    echo "部署 $APP_NAME v$VERSION"
    git pull origin main
    npm install
    npm run build
    pm2 restart $APP_NAME
}

# 条件判断
if [ -d "dist" ]; then
    echo "清理旧的构建文件..."
    rm -rf dist
fi

# 执行部署
deploy

echo "部署完成！"

7. 图片

普通图片

示例图片

带链接的图片

点击跳转

图片说明

带说明的图片
图片说明文字

8. 分隔线

默认分隔线（渐变带符号）

普通的 Markdown 分隔线会显示渐变样式：

虚线型

使用 HTML 自定义类名实现不同样式：

星星装饰型

点状型

双线型

渐变波浪型

粗线型

阴影型

源码说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 默认分隔线 -->
---

<!-- 虚线型 -->
<hr class="dashed">

<!-- 星星装饰型 -->
<hr class="stars">

<!-- 点状型 -->
<hr class="dots">

<!-- 双线型 -->
<hr class="double">

<!-- 渐变波浪型 -->
<hr class="wave">

<!-- 粗线型 -->
<hr class="thick">

<!-- 阴影型 -->
<hr class="shadow">

9. 数学公式

行内公式

这是行内公式：(E = mc^2)，爱因斯坦的质能方程。

勾股定理：(a^2 + b^2 = c^2)

块级公式

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

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

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

10. Mermaid 图表

流程图

效果展示

graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]

源码

1
2
3
4
5
6
7
8
9
10
11
12
```mermaid
graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    D --> E[输入账号密码]
    E --> F{验证成功?}
    F -->|是| C
    F -->|否| G[显示错误信息]
    G --> E
    C --> H[结束]
```

序列图

效果展示

sequenceDiagram
    participant U as 用户
    participant C as 客户端
    participant S as 服务器
    participant D as 数据库
    
    U->>C: 发起登录请求
    C->>S: 发送认证信息
    S->>D: 查询用户信息
    D-->>S: 返回用户数据
    S-->>C: 返回认证令牌
    C-->>U: 登录成功

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```mermaid
sequenceDiagram
    participant U as 用户
    participant C as 客户端
    participant S as 服务器
    participant D as 数据库
    
    U->>C: 发起登录请求
    C->>S: 发送认证信息
    S->>D: 查询用户信息
    D-->>S: 返回用户数据
    S-->>C: 返回认证令牌
    C-->>U: 登录成功
```

甘特图

gantt
    title 项目开发计划
    dateFormat YYYY-MM-DD
    section 需求分析
    需求收集           :a1, 2024-01-01, 7d
    需求评审           :a2, after a1, 3d
    section 设计阶段
    系统设计           :b1, after a2, 10d
    UI设计             :b2, after a2, 8d
    section 开发阶段
    前端开发           :c1, after b1, 20d
    后端开发           :c2, after b1, 20d
    section 测试阶段
    功能测试           :d1, after c1, 7d
    性能测试           :d2, after c1, 5d

11. 特殊块

提示框

效果展示

提示

这是一个信息提示框，用于显示重要信息。

成功

这是一个成功提示框，用于显示成功消息。

警告

这是一个警告提示框，用于显示警告信息。

危险

这是一个危险警告框，用于显示危险或错误信息。

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="note info">
  <p><strong>提示</strong></p>
  <p>这是一个信息提示框。</p>
</div>

<div class="note warning">
  <p><strong>警告</strong></p>
  <p>这是一个警告提示框。</p>
</div>

<div class="note danger">
  <p><strong>危险</strong></p>
  <p>这是一个危险警告框。</p>
</div>

HTML 块

自定义 HTML 块

这是使用 HTML 自定义的内容块，可以添加任意样式。

12. 脚注

这里有一个脚注引用^1。

这里有另一个脚注引用^note。

13. 缩写

HTML 表示超文本标记语言。

*[HTML]: Hyper Text Markup Language

14. 定义列表

第一个术语
这是第一个术语的定义
第二个术语
: 这是第二个术语的第一个定义
这是第二个术语的第二个定义

15. Emoji 表情

:smile: :heart: :thumbsup: :rocket: :fire: :star:

😀 😃 😄 😁 😆 😅 😂 🤣

✅ ❌ ⚠️ 📝 🔧 🎉 🚀 💡

16. 键盘按键

按 Ctrl + C 复制

按 Ctrl + V 粘贴

按 Ctrl + Shift + Esc 打开任务管理器

17. 高亮文本

这是 ==高亮文本== 示例（需要插件支持）

18. 嵌套列表和代码

  1. 第一项

    1
    console.log('第一项的代码');

  2. 第二项

    • 嵌套无序列表
    • 另一个项目
      1
      print("嵌套代码块")

  3. 第三项

    引用块也可以嵌套

    继续引用

总结

这个文件展示了 Markdown 的各种常用格式，包括：

✅ 标题层级
✅ 文本样式（粗体、斜体、删除线等）
✅ 列表（有序、无序、任务列表）
✅ 链接和引用
✅ 表格（多种样式）
✅ 代码块（多种语言）
✅ 图片
✅ 分隔线
✅ 数学公式
✅ Mermaid 图表
✅ 特殊块和 HTML
✅ 其他特殊格式

现在可以通过这个文件来测试你的博客样式是否正常显示！🎨