---
title: Markdown 风格实验室：把博客能用的样式都点亮
author: 朱奕樟
date: 2026-03-19
summary: 一篇集中演示 blog.sysu-sam.com 常见 Markdown 能力的样例文章，包含标题层级、引用、表格、代码、数学公式与图片。
canonical: https://blog.sysu-sam.com/@zhuyizhang/markdown-style-lab-2026-03-19
---

# Markdown 风格实验室：把博客能用的样式都点亮

这篇文章的目标很直接：用一篇内容，把 `blog.sysu-sam.com` 当前常见的 Markdown 能力尽量完整地展示出来。你会在这里看到标题层级、强调、引用、列表、任务清单、表格、代码块、数学公式，以及图片排版。

![Markdown Style Lab Cover](https://blog.sysu-sam.com/images/zhuyizhang/blog-style-showcase-cover.svg)

_上面这张图是这篇文章配套的封面图。_

> 好的排版不是装饰，而是让读者更快抵达重点的路线图。

## 1. 文字与排版

### 1.1 基础强调

这是一段普通正文，其中包含 **粗体**、*斜体*、~~删除线~~，以及 `inline code`。  
当信息进入正文后，最重要的是层级感，而不是把所有句子写得一样重。

### 1.2 链接与语义

- 作者主页：[朱奕樟的博客](https://blog.sysu-sam.com/@zhuyizhang)
- 一个常见的内容字段示例：`title`、`summary`、`slug`、`date`
- 如果一篇文章需要长期维护，建议固定 `slug`，这样更新内容时不会换链接

#### 1.2.1 一段短说明

博客文章不是把笔记搬上来就结束了。  
排版、结构、示例和图示，都会决定读者是否愿意继续往下看。

## 2. 列表与组织

### 2.1 无序列表

- 用列表拆分密集信息
- 用短句保持节奏
- 用一致结构帮助扫读
- 用留白让页面更有呼吸感

### 2.2 有序列表

1. 先给文章一个明确标题
2. 再写一个能出现在列表页的摘要
3. 然后安排正文结构与示例
4. 最后补上图片、代码和公式

### 2.3 任务清单

- [x] 标题层级
- [x] 引用区块
- [x] 表格
- [x] 代码块
- [x] 数学公式
- [x] 图片

## 3. 表格

| 模块 | 适合展示什么 | 为什么有用 |
| :-- | :-- | :-- |
| 标题 | 信息结构 | 方便读者快速定位 |
| 引用 | 观点、提醒、摘录 | 让重点有视觉停顿 |
| 表格 | 对比、参数、摘要 | 信息密度高，适合横向阅读 |
| 代码块 | 可复制示例 | 技术文章的核心载体 |
| 图片 | 视觉解释 | 适合建立第一印象 |

## 4. 代码块

### 4.1 TypeScript

```ts
type Block = {
  kind: "text" | "code" | "image";
  content: string;
};

export function summarize(blocks: Block[]): string {
  return blocks
    .map((block, index) => `${index + 1}. ${block.kind}: ${block.content}`)
    .join("\n");
}
```

### 4.2 Bash

```bash
curl -X POST \
  -H "Content-Type: application/json" \
  -d @post.json \
  https://example.com/api/publish
```

### 4.3 JSON

```json
{
  "title": "Markdown 风格实验室",
  "summary": "一篇集中演示 Markdown 常见能力的示例文章",
  "features": ["headings", "tables", "code", "math", "images"]
}
```

## 5. 数学公式

### 5.1 行内公式

如果想在正文里轻量表达公式，可以写成这样：$f(x)=x^2+2x+1$。

### 5.2 独立公式

当内容需要更强的展示效果时，独立公式会更清晰：

$$
\text{readability\_score} = \sum_{i=1}^{n} w_i \cdot s_i
$$

也可以写一个更常见的形式：

$$
\frac{d}{dx}\left(x^3\right) = 3x^2
$$

## 6. 图片与图示

除了封面图，这里再放一张结构图，演示正文里的插图效果。

![Markdown Style Map](https://blog.sysu-sam.com/images/zhuyizhang/blog-style-showcase-map.svg)

_这张图把文章中的主要样式模块组织成了一个简单的视觉地图。_

### 6.1 图文混排的小建议

> 如果图片只是装饰，它会拖慢阅读。  
> 如果图片能解释结构，它会增强记忆。

## 7. 组合示例

下面是一段把多种元素混在一起的内容：

1. 用 **一句粗体结论** 先交代结论。
2. 再用表格或列表承接结构化信息。
3. 遇到可执行内容，就放进代码块。
4. 遇到抽象关系，就交给公式或图示。

配套建议如下：

- 面向读者的页面，优先考虑易读性
- 面向技术同学的页面，优先保证代码可复制
- 面向长期维护的页面，优先保证结构稳定

## 8. 结尾

这篇文章本身也是一次发布流程验证。  
如果你现在正在看它，说明这套博客已经能很好地承载图文、代码与数学表达。

---

如果你想继续扩展，我建议下一篇可以尝试：

- 做一篇更偏教程型的技术文章
- 加入更多真实截图或流程图
- 用固定 `slug` 维护一篇长期更新的索引页