Markdown 排版样式总览

本文展示博客所支持的全部 Markdown 渲染样式，也可作为排版速查表使用。

标题层级

以下是各级标题的渲染效果。H1 用于文章标题（自动渲染），正文中一般从 H2 开始使用。

三级标题 — 左侧竖条

四级标题 — 圆点标记

五级标题 — 空心圆点

六级标题 — 辅色

正文排版

普通段落文本。Markdown 的核心价值在于让写作者专注内容而非排版。一段好的正文应该有适当的行高和字间距，阅读时眼睛不会疲劳。中英文混排时，标点符号和空格的处理也需要注意。

这是第二个段落，用来展示段落间距。段落之间应有清晰的视觉分隔，但又不至于过大。The quick brown fox jumps over the lazy dog.

行内格式

组合效果：这段话包含 代码、斜体、删除线和高亮。

链接

• 行内链接：百度
• 裸链接：https://www.baidu.com
• 文章内链接会有底部荧光笔 hover 效果

引用

单层引用。引用块使用圆角背景和左侧色条，hover 时轻微放大。适合用来标注重点说明或引用他人话语。

多段落引用：

第一段内容。引用块内的段落间距会自动收窄。

第二段内容。引用块也支持加粗、斜体和 代码 等行内格式。

嵌套引用：

外层引用 > 内层引用。Markdown 支持多层嵌套的引用块。

GFM Alerts

GitHub 风格的提示框（Alerts），在引用块首行使用 [!TYPE] 标记：

[!NOTE] 这是一条 Note 提示，用于补充说明信息。

[!TIP] 这是一条 Tip 提示，用于给出实用建议。

[!IMPORTANT] 这是一条 Important 提示，用于强调关键信息。

[!WARNING] 这是一条 Warning 提示，用于提醒注意事项。

[!CAUTION] 这是一条 Caution 提示，用于标记危险或风险操作。

列表

无序列表

• 第一项
• 第二项
  • 嵌套项 A（circle 标记）
  • 嵌套项 B
    • 深层嵌套（square 标记）
• 第三项

有序列表

1. 第一步
2. 第二步
   1. 子步骤 a（lower-alpha）
   2. 子步骤 b
      1. 更深层级（lower-roman）
3. 第三步

任务列表

• 搭建博客框架
• 设计主题样式
• 适配移动端
• 部署上线
  • 购买域名
  • 配置 CDN

代码

行内代码：使用 console.log('hello') 打印输出。

Python

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import numpy as np
from typing import List, Optional

def fibonacci(n: int) -> List[int]:
    """生成斐波那契数列"""
    if n <= 0:
        return []
    seq = [0, 1]
    for i in range(2, n):
        seq.append(seq[-1] + seq[-2])
    return seq[:n]

# 使用 numpy 计算统计量
data = np.array(fibonacci(20))
print(f"前 20 项均值: {data.mean():.2f}")
print(f"前 20 项标准差: {data.std():.2f}")

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 防抖函数
function debounce(fn, delay = 300) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 使用示例
const search = debounce((query) => {
  fetch(`/api/search?q=${encodeURIComponent(query)}`)
    .then(res => res.json())
    .then(data => console.log(data));
}, 500);

CSS

1
2
3
4
5
6
7
8

/* 渐变色带标题 */
.post-md h2 {
    background: linear-gradient(to right, var(--md-accent-shallow), var(--accent));
    color: #fff;
    padding: 5px 14px;
    border-radius: 8px;
    width: fit-content;
}

Bash

1
2
3
4
5
6

#!/bin/bash
# 批量重命名文件
for f in *.jpg; do
    mv "$f" "photo_$(date +%Y%m%d)_${f}"
done
echo "重命名完成，共处理 $(ls photo_*.jpg | wc -l) 个文件"

表格

基础表格

对齐方式

图片

图片自带圆角和微阴影，hover 时轻微放大：

分隔线

上方和下方各有一条渐变分隔线（---）：

数学公式

行内公式 E = mc²，以及块级公式：

脚注

这是一个带脚注的句子¹，可以在文末查看脚注内容²。

后记

本文覆盖了博客支持的全部 Markdown 渲染样式。所有色彩均通过 CSS Design Token 管理——只需修改 _config.yml 中的主色，全站排版将自动跟随切换。