博客写作新手用Markdown快速排版图文加代码零基础入门教程

嘿，朋友！你是不是也经历过这样的时刻——兴冲冲地写了一篇博客，结果一粘贴到WordPress或者Typecho，所有的排版全乱了，代码像天书一样糊在一起，图片要么显示不出来，要么位置跑偏，最后只能对着屏幕叹气？

别慌，今天我就来手把手教你一个神器——Markdown。用好了，你写博客的速度能翻几倍，排版还他妈的漂亮。

一、Markdown是个啥玩意儿？

说白了，Markdown就是一种“用纯文本写富文本”的语法。你不用鼠标点来点去，不用管什么字体大小、颜色深浅，只要敲几键盘符号，系统自动给你变成漂亮的排版。

想象一下，你想写一个一级标题，在Word里你得选”标题1”，点加粗，选字号；但在Markdown里，你只需要：

# 这是一个一级标题

就完事儿了。是不是简单到令人发指？

我认识一个做程序员的朋友，以前写技术博客用Word，每次导出成HTML都要折腾半天，后来换了Markdown，现在他边敲键盘边喝茶，5分钟搞定一篇排版精美的文章。他的原话是：“Markdown治好了我的排版焦虑症。”

二、为什么你一定要学Markdown？

先说几个让你心动的理由：

1. 写速度起飞 你想想，左手键盘右手鼠标，切换来切换去有多累？Markdown让你全程留在键盘上，思路不断，效率直接拉满。

2. 跨平台通用 不管你是用WordPress、Hexo、Hugo、Jekyll，还是发在知乎、掘金、SegmentFault，Markdown都能用。学会一次，到处通用。

3. 代码块天生适配 写技术博客的都知道，代码高亮有多重要。Markdown对代码块的支持堪称完美，你自己看就知道有多香。

4. 纯文本，永不过时 你想想，十年后你的.doc文件还能打开吗？但.txt文件永远能打开。Markdown就是纯文本，你换任何编辑器都能读，不怕格式丢失。

三、Markdown基础语法，看这一篇就够了

3.1 标题——六段式层级结构

Markdown的标题用#来表示，从一到六级：

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

实际效果：

一级标题

二级标题

三级标题

小技巧：大部分博客平台，一级和二级标题就够了。三级以上用多了反而显得啰嗦。

3.2 段落与换行

写段落的时候，两个回车就是一个新段落：

这是第一段。

这是第二段。

这是第三段。

注意看，Markdown里不需要你手动加<p>标签，它自动识别。

那你想在同一个段落里换行怎么办？在行尾加两个空格再加回车：

这是第一行  
这是第二行

效果：

这是第一行
这是第二行

3.3 粗体和斜体——强调的艺术

**这是粗体**
*这是斜体*
***这是粗斜体***

显示效果：

这是粗体 这是斜体 这是粗斜体

我一般用粗体来强调关键词，斜体用在英语短语或者表示书名、文件名。比如：注意这个细节、italic text、《书名》。

3.4 链接——让你的文章活起来

Markdown写链接的语法其实很直观：

[链接文字](https://example.com "链接标题")

效果：

链接文字

如果不想显示标题tooltip，可以简化成：

[我的博客](https://example.com)

效果：

我的博客

还有一个技巧，引用式链接，适合文章里链接太多的时候：

你看[这里][1]可以参考官方文档，或者[那个地方][2]也很棒。

[1]: https://example.com/docs "官方文档"
[2]: https://example.com/wiki "维基百科"

这样文章末尾的链接定义不会打乱阅读节奏。

3.5 图片——图文并茂不是梦

图片的语法和链接长得很像：

![图片描述文字](https://example.com/image.jpg "图片标题")

效果（如果有图的话）：

图片描述文字

⚠️ 注意：!不能少，少了就变成链接了。图片描述文字在图片加载失败时会显示，也是SEO友好的。

如果你的图片存在本地，很多博客工具支持：

![截图](./images/screenshot.png)

3.6 列表——清晰表达你的观点

无序列表用-、+或*都可以：

- 第一项
- 第二项
- 第三项

效果：

第一项
第二项
第三项

有序列表用数字加.：

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

效果：

第一步
第二步
第三步

嵌套列表也很容易：

- 水果
  - 苹果
  - 香蕉
  - 葡萄
- 蔬菜
  - 白菜
  - 萝卜

效果：

水果
- 苹果
- 香蕉
- 葡萄
蔬菜
- 白菜
- 萝卜

3.7 引用——让经典句子发光

用>来写引用：

> 这是一段引用文字。
> 可以跨多行。

> 著名的话：
> "编程不是关于电脑，而是关于思维。" —— 高德纳

效果：

这是一段引用文字。可以跨多行。

著名的话： “编程不是关于电脑，而是关于思维。” —— 高德纳

3.8 分隔线——视觉上的喘息

三个或更多的-、*或_：

---

效果：

***

效果：

四、代码块——程序员的博客灵魂

这部分是重头戏。Markdown对代码的支持非常强大，而且大多数博客平台都自带语法高亮。

4.1 行内代码

用反引号`包裹：

请用`git commit -m "fix bug"`来提交代码。

效果：请用git commit -m "fix bug"来提交代码。

4.2 代码块——三反引号大法

```javascript
function hello() {
    console.log("Hello, Markdown!");
}
hello();


效果（带语法高亮）：

```javascript
function hello() {
    console.log("Hello, Markdown!");
}
hello();

注意看，”后面跟的javascript不是随便写的，它告诉渲染器用JavaScript语法来高亮。常用的语言标识有：python、java、cpp、html、css、bash、sql、json、yaml`等等。

4.3 更多代码块示例

Python示例：
def bubble_sort(arr):
    n = len(arr)
    for i in range(n):
        for j in range(0, n - i - 1):
            if arr[j] > arr[j + 1]:
                arr[j], arr[j + 1] = arr[j + 1], arr[j]
    return arr

numbers = [64, 34, 25, 12, 22, 11, 90]
print(f"排序结果: {bubble_sort(numbers)}")

HTML示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是用Markdown写的博客。</p>
</body>
</html>

Bash示例：

# 创建项目目录
mkdir my-blog && cd my-blog

# 初始化Git
git init

# 安装依赖
npm install hexo --save

# 启动本地服务器
hexo server

五、实战：用Markdown写一篇博客

光说不练假把式。现在我来演示一篇完整的博客长什么样。

假设你要写一篇《Python列表推导式入门教程》：

# Python列表推导式入门教程

> 列表推导式是Python中最优雅的特性之一，学会了能让你写出更简洁、更Pythonic的代码。

## 什么是列表推导式？

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

### 传统写法 vs 推导式写法

先看一个例子：把1到10的每个数都平方。

**传统写法：**

```python
squares = []
for x in range(1, 11):
    squares.append(x ** 2)
print(squares)
# 输出: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

列表推导式写法：

squares = [x ** 2 for x in range(1, 11)]
print(squares)
# 输出: [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

看到了吗？代码从4行变成了1行，而且含义一目了然。

带条件的列表推导式

有时候我们只需要符合条件的元素：

# 找出1到20之间的偶数
evens = [x for x in range(1, 21) if x % 2 == 0]
print(evens)
# 输出: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

嵌套列表推导式

高阶玩法来了——处理二维列表：

matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
]

# 展平为一级列表
flat = [num for row in matrix for num in row]
print(flat)
# 输出: [1, 2, 3, 4, 5, 6, 7, 8, 9]

💡 记住：嵌套推导式的顺序和嵌套循环的顺序是一致的，先写外层循环，再写内层。

总结

列表推导式让你的代码更简洁、更可读、更Pythonic。记住这三个要点：

基础语法：[表达式 for 变量 in 可迭代对象]
加条件：[表达式 for 变量 in 可迭代对象 if 条件]
嵌套：先外层循环，再内层循环

好了，今天就到这里。去试试吧，写几行代码，感受一下列表推导式的魅力！

如果你还有问题，欢迎在评论区留言～


怎么样？这篇博客的结构清晰吗？标题、引用、代码块、列表、加粗、斜体全用上了，但读起来一点都不累。

---

## 六、推荐工具——写Markdown不头疼

光知道语法不够，你得有趁手的工具。

### 6.1 纯编辑器（专注写作）

| 工具 | 平台 | 特点 |
|------|------|------|
| **Typora** | Mac/Win/Linux | 所见即所得，写的时候就能看见排版效果，强烈推荐 |
| **MarkText** | Mac/Win/Linux | 开源免费，功能类似Typora |
| **Obsidian** | 全平台 | 支持双向链接，适合写知识库 |

### 6.2 在线编辑器（懒得装软件）

- **StackEdit**（stackedit.io）—— 浏览器里直接写，还能同步到GitHub
- **Dillinger**（dillinger.io）—— 简洁好用
- **语雀**、**飞书文档**—— 国内访问友好

### 6.3 VS Code + 插件（程序员首选）

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

1. **Markdown All in One** —— 快捷键、自动补全、表格编辑
2. **Markdown Preview Enhanced** —— 强大的预览功能

装完之后，按`Ctrl+Shift+V`就能实时预览渲染效果，左边写Markdown，右边看排版，爽得不行。

---

## 七、避坑指南——新手常犯的错误

### 7.1 忘记空格

```markdown
**这里是错误的**   ← 没有空格
**这里是正确的**    ← 左右都要有空格

7.2 图片链接失效

永远用绝对路径或者确认相对路径正确。写博客最尴尬的就是图片裂了。

7.3 代码块语言写错

```js
console.log("这其实是JavaScript，不是JS");


虽然很多渲染器能识别`js`，但规范写法应该是`javascript`。保险起见，用全称。

### 7.4 中文标点混入英文符号

这是中国新手最常见的错误：

```markdown
你好，[链接](https://example.com)   ← 中文括号！
你好，[链接](https://example.com)   ← 正确！英文括号

写的时候注意切换输入法，链接、图片的括号一定要用英文半角。

八、最后的话

学Markdown，就像学骑自行车——刚开始觉得别扭，骑上两次就停不下来了。

你现在可能觉得：”不就是加几个符号吗，至于吗？”

但相信我，当你第一次用Markdown写出排版精美的技术博客，当你在不同平台之间无缝迁移文章，当你发现写代码注释也能用Markdown让文档更清晰的时候，你会回来感谢今天的自己。

现在就去下载一个Typora或者装个VS Code插件，写一篇你自己的第一篇Markdown博客吧。

遇到问题随时回来翻这篇教程，我在这里等你。加油，朋友！🚀