正文

Markdown博客写作技巧从入门到精通轻松排版写出专业文章

/0 浏览量
0908

Markdown博客写作技巧从入门到精通轻松排版写出专业文章

你第一次打开Markdown编辑器时的懵圈，我懂

我刚接触Markdown的时候，整个人是崩溃的。写个标题加粗，不知道是**还是##，链接怎么写老是报错，图片上传之后死活显示不出来。花了半小时排版，预览一看，全乱了。

后来用了大概两周，我发现Markdown其实比想象中简单得多——它本质上就是把你要表达的东西，用很少的符号标记出来，让程序帮你渲染成漂亮的格式。你不需要记几十条语法规则，只要掌握常用的十几种就够了。

这篇文章就帮你把Markdown从”不会用”到”玩得溜”这条路走一遍。我尽量不说废话，直接给你能用的东西。

一、为什么博客作者都在用Markdown

先说几个真实的场景：

你正在写一篇技术博客，突然要调整标题层级。如果用Word，你得全选文字、改字体、调大小、改颜色，改完发现段落间距又乱了。

你在记笔记，想插入一段代码。Word里的代码格式很丑，缩进容易乱，语法高亮也没有。

你写好了文章，想同步到CSDN、掘金、知乎、公众号。不同的平台各有各的富文本编辑器，粘贴过去格式全炸。

Markdown解决的就是这些问题——一次输入，到处渲染。你的文章内容存在一个.md文件里，用什么平台发表，平台会自动把它转换成对应的格式。你只需要专注写作，不用跟格式搏斗。

二、Markdown的核心语法：够用且不多

我把它分成三类：最基础的（必会）、进阶的（推荐）、高级的（按需学）。

2.1 最基础的，十个符号搞定骨架

标题

# 后面加空格，再加文字，就是一个一级标题。几个#就是几级标题：

# 一级标题（最大）
## 二级标题
### 三级标题
#### 四级标题

渲染出来就是：

一级标题（最大）

二级标题

三级标题

四级标题

小技巧：一般博客用#当文章标题，##当大段落标题，###当小段落标题就够了。标题层级不要超过四级，不然读者会迷路。

段落与换行

Markdown里，空一行就是新的一段。直接按回车不换段，只在行尾加两个空格再加回车，才是强制换行。

这是第一段，写完空一行。

这是第二段，和第一段之间有间距。

这是同一行内的换行，前面加两个空格  然后回车。

效果：

这是第一段，写完空一行。

这是第二段，和第一段之间有间距。

这是同一行内的换行，前面加两个空格
然后回车。

坑点提醒：很多人直接按回车想换行，结果两段之间有大间距。记住：按回车是新段落，想在本段内换行，行尾加两个空格。

加粗与斜体

**这是加粗**
*这是斜体*
***这是加粗+斜体***

效果：

这是加粗 这是斜体 这是加粗+斜体

建议：正文里加粗用于强调关键词，不要整段加粗，那跟没加一样。斜体在中文里用得少，英语里更常见。

链接与图片

这两个是写博客最核心的功能。

链接的格式是 [显示文字](链接地址)：

[点击访问Google](https://www.google.com)

效果：点击访问Google

如果链接要在新窗口打开，Markdown本身不支持，需要用HTML：

<a href="https://www.google.com" target="_blank">点击访问Google</a>

图片的格式跟链接很像，前面多一个!：

![图片描述文字](图片地址)

效果示意：图片描述文字

图片地址：可以是本地路径（如果编辑器支持），也可以是网络URL。推荐用图床服务，比如 SM.MS、Imgur，上传图片拿到链接再粘贴。别把图片上传到博客平台本身，不然搬家的时候就全丢了。

引用

> 开头就是引用，可以嵌套：

> 这是一段引用文字。
> 
> > 这是嵌套引用。

效果：

这是一段引用文字。

这是嵌套引用。

分隔线

三个*或三个-，单独一行：

***

效果：

2.2 进阶语法，让文章更有料

代码块：程序员写博客的命根子

单个代码片段用反引号 `：

这是一个变量：`var x = 10;`

效果：这是一个变量：var x = 10;

多行代码块用三个反引号，后面可以加语言名实现语法高亮：

```python
def hello_world():
    print("Hello, World!")
    return True
```

```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

渲染出来：

def hello_world():
    print("Hello, World!")
    return True

const greeting = "Hello, World!";
console.log(greeting);

语法高亮支持的语言：几乎所有平台都支持的主流语言（Python、JavaScript、Java、Go、Rust、C++、Bash、JSON、XML、HTML、SQL 等）。不知道怎么写？直接写语言名的英文，大多数都认。

表格：数据展示的神器

| 功能 | 语法 | 示例 |
|------|------|------|
| 加粗 | **文字** | **重点** |
| 斜体 | *文字* | *强调* |
| 链接 | [文字](url) | [链接](https://example.com) |

效果：

功能 语法 示例
加粗 文字 重点
斜体 文字 强调
链接 文字 链接

对齐控制：在分隔行里加冒号可以控制对齐方式。:--- 左对齐，:---: 居中，---: 右对齐。

> | 左对齐 | 居中对齐 | 右对齐 |
> |:-------|:--------:|-------:|
> | 内容   |   内容   |   内容 |
> ```

#### 任务列表：适合做教程和清单

```markdown
- [x] 安装编辑器
- [x] 学习基础语法
- [ ] 开始写第一篇博客
- [ ] 坚持每周更新

效果：

  • [x] 安装编辑器
  • [x] 学习基础语法
  • [ ] 开始写第一篇博客
  • [ ] 坚持每周更新

x 是大写的，表示已完成。很多博客平台（GitHub、掘金等）都支持这个。

有序与无序列表

无序列表（减号或星号都可以）：
- 第一项
- 第二项
  - 嵌套子项

有序列表（数字加点）：
1. 第一步
2. 第二步
3. 第三步

效果：

无序列表（减号或星号都可以）：

  • 第一项
  • 第二项
    • 嵌套子项

有序列表（数字加点）：

  1. 第一步
  2. 第二步
  3. 第三步

列表嵌套：子列表前面加4个空格（或一个Tab）。

2.3 高级语法，按需掌握

删除线

两个~包裹文字：

~~这段文字被删除了~~

效果：这段文字被删除了

适合做版本更新日志，标注已经过时但不想删掉的内容。

脚注

Markdown是一种轻量级标记语言[^1]。

[^1]: 由John Gruber在2004年创建。

效果：

Markdown是一种轻量级标记语言[^1]。

[^1]: 由John Gruber在2004年创建。

脚注在文章末尾统一显示，适合放补充说明或参考资料，不打断正文阅读。

HTML混排：当Markdown不够用时

Markdown的设计哲学是”能不用HTML就不用”，但有些场景确实需要HTML：

<div style="background:#fff3cd;padding:15px;border-left:4px solid #ffc107;">
  <strong>⚠️ 提示：</strong>这是用HTML实现的警告框样式。
</div>

效果：

⚠️ 提示：这是用HTML实现的警告框样式。 
<details>
<summary>点击展开更多内容</summary>

这里是折叠的内容，可以放长篇的补充说明。
</details>

效果：

点击展开更多内容 这里是折叠的内容，可以放长篇的补充说明。

实用场景：<details>标签非常适合做FAQ（常见问题），读者点开才看，不干扰主线阅读。

数学公式（LaTeX）

如果你的博客平台支持MathJax或KaTeX，可以写数学公式：

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

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

三、编辑器怎么选

工欲善其事，必先利其器。好的编辑器能大幅提升写作效率。

3.1 新手推荐：Typora

Typora 是最适合入门的编辑器，所见即所得——你输入**文字**立刻变成加粗，不用切换到预览模式。界面干净，快捷键友好，支持导出HTML、PDF、Word。

缺点：收费软件（免费版功能也够用）。

3.2 程序员最爱：VS Code + 插件

如果你已经用VS Code写代码，装两个插件就够了：

  • Markdown All in One：提供快捷键、自动列表、表格生成、TOC目录等功能
  • Markdown Preview Enhanced：预览更强大，支持导出PDF、HTML，还能展示Mermaid图表

装完之后，按 Ctrl+Shift+V 打开预览面板，左边写，右边看，效率拉满。

3.3 命令行党：Obsidian

Obsidian 是一款笔记+博客写作工具，基于本地Markdown文件，双向链接功能强大。适合写系列文章、建立知识网络的人。

3.4 在线编辑器（不想装软件）

  • StackEdit：浏览器里直接用，支持同步到Google Drive、GitHub
  • Dillinger：极简，粘贴→编辑→导出

四、写博客时的实战技巧

掌握了语法，接下来是怎么用的问题。这里分享一些真实写作中的经验。

4.1 文章结构模板

一个专业的博客文章结构，一般是这样的：

# 文章标题

> 简短摘要（1-2句话概括文章核心内容，放在标题下面）

## 背景介绍（为什么写这篇文章）

## 核心内容一
### 小点
### 小点

## 核心内容二
（同上）

## 代码示例
```language
代码...

常见问题 / 注意事项

总结

参考资料


> **关键原则**：标题层级保持逻辑清晰，不要为了排版而跳级（比如直接从`##`跳到`####`）。搜索引擎和阅读工具都靠标题层级来理解文章结构。

### 4.2 图片处理的最佳实践

写技术博客，图片是少不了的。几个要点：

**1. 用图床，别存本地**

本地图片路径：截图 图床图片路径：截图


本地图片在别人电脑上看不到，迁移平台也麻烦。推荐用 [SM.MS](https://sm.ms) 或 [ImgBB](https://imgbb.com)，免费，上传完直接复制URL。

**2. 图片加描述（alt文字）**

```markdown
![这是一个柱状图，展示了2023年各季度销售额](https://example.com/chart.png)

alt文字有两个作用：图片加载失败时显示提示文字；搜索引擎读不到图片内容时，alt文字是唯一的线索。

3. 图片尺寸控制

![图片](https://example.com/image.png =300x200)

部分平台支持=宽x高的方式控制尺寸，但不通用。更稳妥的方式是用HTML：

<img src="https://example.com/image.png" alt="描述" width="600" />

4.3 代码块的高级用法

行号显示：大多数平台默认显示行号，不需要额外设置。

高亮特定行：

```python
def calculate(a, b):
    result = a + b  # 第一行
    return result   # 第二行
```

部分平台支持highlight语法：

```python
def calculate(a, b):
    result = a + b  # highlight-line
    return result   # highlight-line
```

行内代码 vs 代码块：

场景 用什么
文中提到一个变量名或函数名 行内代码 `var`
展示完整的代码片段 代码块 “`
命令行操作 代码块 + bash 语言标识 
# 这是bash代码块，终端提示符$不用写进代码里
pip install requests

4.4 让文章可读性翻倍的排版技巧

1. 控制段落长度

每个段落2-4句话，不超过150字。大段文字会让人不想看。

2. 关键信息用引用框突出

> 💡 **要点**：Markdown的链接语法是 `[文字](URL)`，注意括号要在圆括号外面。

3. 用分隔线区分大模块

文章太长时，在模块之间加***，视觉上给读者喘口气的空间。

4. 列表代替长句

把一个长句子拆成3-4条列表，比一段话更容易理解。

五、各博客平台的Markdown支持情况

不同平台对Markdown的支持程度不一样，写之前先了解清楚：

平台 Markdown支持 特殊说明
CSDN ✅ 良好 编辑器自带Markdown模式，图片上传方便
掘金 ✅ 良好 支持代码高亮，图片需外链
知乎 ⚠️ 部分支持 不支持代码块语法高亮，表格有限制
公众号 ❌ 不支持 需要借助工具转换，如 Md2All
GitHub ✅ 完全支持 原生Markdown，仓库README必备
语雀 ✅ 良好 支持Mermaid图表、LaTeX公式

公众号Markdown转换技巧：公众号不支持Markdown，但可以用 Md2All 或 Markdown Nice 先把Markdown转成富文本，再粘贴到公众号编辑器。Markdown Nice还能自定义主题颜色，导出效果不错。

六、从入门到精通：一个完整的写作流程示例

下面用一个具体的例子，走一遍从新建文件到发布的全过程。

步骤一：新建文件

# 在项目目录下创建文章文件
mkdir blog-posts
cd blog-posts
touch getting-started-with-markdown.md

步骤二：用Typora或VS Code打开编辑

假设你要写一篇”Python列表推导式”的技术博客，结构如下：

# Python列表推导式：从入门到实战

> 列表推导式是Python最优雅的语法之一，一行代码代替多行循环，
> 既简洁又高效。本文从基础语法讲到实战技巧，附带常见坑点。

## 什么是列表推导式？

简单来说，列表推导式就是**用一行代码生成列表**。

普通写法：
```python
squares = []
for x in range(10):
    squares.append(x ** 2)

列表推导式写法：

squares = [x ** 2 for x in range(10)]

效果一样，但后者少写三行。

基础语法

[表达式 for 变量 in 迭代对象]

几个实例：

# 生成1到5的平方
squares = [x**2 for x in range(1, 6)]
print(squares)  # [1, 4, 9, 16, 25]

# 过滤偶数
evens = [x for x in range(20) if x % 2 == 0]
print(evens)  # [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

# 字符串处理
words = ["hello", "world", "python"]
upper_words = [w.upper() for w in words]
print(upper_words)  # ['HELLO', 'WORLD', 'PYTHON']

嵌套列表推导式

# 生成坐标点列表
points = [(x, y) for x in range(3) for y in range(3)]
print(points)
# [(0, 0), (0, 1), (0, 2), (1, 0), ...]

⚠️ 注意：嵌套推导式可读性会下降，超过两层建议拆成普通循环。

常见坑点

坑点 错误写法 正确写法
变量名冲突 [x for x in x] [item for item in items]
在推导式里写复杂逻辑 [func(a, b, c, d) for ...] 拆成普通循环
修改原列表 推导式返回新列表 明确知道这一点

什么时候不该用列表推导式？

  • 逻辑超过两行时
  • 需要break或continue时
  • 可读性明显下降时

💡 原则：列表推导式的目的是让简单的列表生成更简洁，不是把所有循环都塞进一行。

总结

列表推导式是Python的利器，掌握它能让代码更Pythonic。记住：简洁不等于晦涩，在可读性和简洁之间找到平衡。

参考资料


### 步骤三：预览与检查

在Typora里直接预览，检查：
- 代码块语言标识是否正确（`python`而非`py`）
- 图片链接是否能打开
- 链接是否有效
- 标题层级是否合理

### 步骤四：导出与发布

- 导出HTML → 手动部署到自己的网站
- 复制内容 → 粘贴到CSDN/掘金（注意代码块可能需要调整）
- 用Markdown Nice → 导出富文本 → 粘贴到公众号

---

## 七、进阶：让Markdown文章更有"博客感"

### 7.1 添加目录（TOC）

很多编辑器支持自动生成目录：

- Typora：`Ctrl+T` 插入TOC
- VS Code：Markdown All in One插件 `Ctrl+Shift+P` → "Insert Table of Contents"
- GitHub：自动在README顶部生成

手动写TOC：

```markdown
## 目录

- [什么是列表推导式](#什么是列表推导式)
- [基础语法](#基础语法)
- [常见坑点](#常见坑点)
- [总结](#总结)

技巧：用## 目录作为二级标题，链接指向文章内的## 基础语法等锚点。

7.2 文章标签与元数据

在文章开头加front matter（YAML格式），方便分类和搜索：

---
title: Python列表推导式详解
date: 2024-01-15
tags: [Python, 编程入门, 列表]
category: 技术教程
description: 从零掌握Python列表推导式，含实战示例和常见坑点
---

# Python列表推导式：从入门到实战
...

支持front matter的平台：Hexo、Hugo、VuePress、Docsify等静态网站生成器。

7.3 插入Mermaid流程图

如果你的平台支持Mermaid，可以用纯文本画流程图：

```mermaid
graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E
```

效果（在支持Mermaid的平台）：

graph TD
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作]
    B -->|否| D[跳过]
    C --> E[结束]
    D --> E

支持Mermaid的平台：语雀、Notion、Obsidian、GitHub（部分场景）、Typora（需安装插件）。

7.4 嵌入视频

Markdown本身不支持视频，但可以用HTML：

<iframe width="560" height="315" 
  src="https://www.bilibili.com/video/BV1xx411c7mD" 
  frameborder="0" allowfullscreen></iframe>

八、避坑指南：新手常犯的十个错误

# 错误 正确做法
1 标题不加分隔空行 # 标题下面空一行再写正文
2 代码块没标语言 ```python 而不是 ```
3 图片用本地路径 用图床URL，确保跨平台可访问
4 链接文字和URL相同 简短描述更好：[Python官方文档](url)
5 表格列数不一致 每行冒号数量要和表头一致
6 嵌套层级过深 列表嵌套不超过3层，否则乱
7 忽略alt文字 图片一定要加描述性alt文字
8 全篇使用加粗 加粗只用于真正重要的词
9 标题层级跳跃 从##直接到####不推荐
10 发布前不预览 一定在目标平台预览后再发布

九、最后的话：多写比多学重要

语法看了十几遍，不如亲手写一篇文章。

我的建议是：先挑一个你最熟悉的主题，用Markdown写一篇500字以上的文章。遇到不会的语法，边写边查。写完后发给朋友看，让他们反馈哪里看不懂、哪里排版不舒服。

改两版之后，你就有了”语感”——知道什么时候用列表、什么时候用代码块、什么时候该换段落。这种语感是看多少教程都学不来的，只能靠写出来。

Markdown的本质是让写作回归写作本身。当你不再为格式烦恼，文字和思想才能自由流动。

祝你写出第一篇漂亮的Markdown博客文章 🚀

如果你这篇文章对你有帮助，欢迎收藏或转发给同样在学Markdown的朋友。有什么Markdown相关问题，也欢迎在评论区交流。

-- 展开阅读全文 --