Markdown: Markdown 快速开始与编辑器选择

你不需要安装任何复杂软件——任何文本编辑器都能写 Markdown，但一个好用的编辑器能让效率翻倍。

1. 你将学到

• 如何选择适合自己的 Markdown 编辑器
• 创建和保存第一个 .md 文件
• 使用实时预览功能
• Markdown 的基本工作流程
• 常见编辑器的优缺点对比

2. 一个初学者的真实故事

(1) 痛点：不知道该用什么软件写

Marie 想学 Markdown，下载了三个编辑器试用，每个界面都不一样：一个显示纯文本，一个显示实时排版效果，还有一个看起来像代码编辑器。她花了两天比较这些工具，还没开始写内容。

(2) 解法：选一个编辑器，先写起来

同事建议 Marie："先选 VS Code，装上 Markdown 插件，一边写一边预览。"Marie 花了 10 分钟安装配置，然后打开一个 .md 文件开始写。当她看到左侧打字、右侧实时渲染出漂亮格式的效果时，立刻明白了 Markdown 的魅力。第一天她就写了 3 篇技术笔记。

3. Markdown 编辑器分类

Markdown 编辑器可以分为三类，每类适合不同人群：

graph TB
    A[Markdown 编辑器] --> B[纯文本编辑器]
    A --> C[专用编辑器]
    A --> D[在线编辑器]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / 简书]

graph TB
    A[Markdown 编辑器] --> B[纯文本编辑器]
    A --> C[专用编辑器]
    A --> D[在线编辑器]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / 简书]

(1) VS Code —— 开发者的首选

VS Code 是当前最流行的代码编辑器，通过扩展可以成为强大的 Markdown 编辑器：

推荐扩展：
- Markdown All in One（快捷键、目录、自动格式化）
- Markdown Preview Enhanced（增强预览）
- Paste Image（粘贴图片自动保存）

▶ 示例：三种编辑器打开同一 Markdown 文件的对比

VS Code 显示：左侧源码 + 右侧实时预览（分栏）
Typora 显示：所见即所得，无分栏（源码隐藏）
记事本显示：纯文本，无格式（只显示源码）

了解不同编辑器的工作方式，帮助你选择最适合自己的写作工具。

(2) Typora —— 所见即所得的优雅之选

Typora 的独特之处在于它没有分栏——你直接在一个界面上写，格式实时渲染，# 标题会直接变大加粗，* 斜体文字会直接变斜。

# 在 Typora 中
你输入 # 标题 → 标题立即变大加粗
你输入 **加粗** → 文字立即变粗
你输入 --- → 立即出现分隔线

4. 创建你的第一个 Markdown 文件

(1) 新建文件

创建一个 .md 文件最简单的方式：

# 在终端中创建
touch my-first-doc.md

# 或者在 VS Code 中：
# 文件 → 新建文件 → 保存为 .md 后缀

▶ 示例：在 Markdown 中嵌入 Python 代码块

## 我的第一个代码块

\`\`\`python
print("Hello, Markdown!")
\`\`\`

▶ 示例：在 VS Code 中预览 Markdown

按 `Ctrl+K V` 打开侧边预览
按 `Ctrl+Shift+V` 打开全屏预览

左侧编辑区写 Markdown 源码
右侧预览区实时显示渲染效果

5. Markdown 工作流程

(1) 本地工作流

graph LR
    A[创建 .md 文件] --> B[用编辑器写作]
    B --> C[实时预览检查]
    C --> D{内容满意？}
    D -->|是| E[保存/提交 Git]
    D -->|否| B
    E --> F[转换/发布]

graph LR
    A[创建 .md 文件] --> B[用编辑器写作]
    B --> C[实时预览检查]
    C --> D{内容满意？}
    D -->|是| E[保存/提交 Git]
    D -->|否| B
    E --> F[转换/发布]

(2) 常见工作场景

▶ 示例：用 VS Code 完成一次完整的写作流程

1. 打开 VS Code，创建 `note.md`
2. 写入标题和正文
3. 按 Ctrl+Shift+V 打开预览
4. 修改内容直到满意
5. Ctrl+S 保存文件
6. 用 git 提交到 GitHub

6. 完整示例：从零到发布一篇 Markdown 笔记

笔记标题：【笔记】CSS Flexbox 布局

核心概念：Flexbox 是一维布局模型

常用属性表格：
  display → flex
  justify-content → center, space-between
  align-items → center, stretch

示例代码：
  .container { display: flex; justify-content: center; }

参考资料：MDN Flexbox Guide

预期效果：一篇结构清晰的技术笔记，包含概念、属性速查表、代码示例和参考资料链接。

❓ 常见问题

📖 小节

• 选择编辑器：开发者用 VS Code，写作用 Typora，知识管理用 Obsidian
• 创建 .md 文件：本质是纯文本文件，扩展名为 .md 或 .markdown
• 实时预览：VS Code 按 Ctrl+Shift+V，Typora 自动渲染
• 基本工作流：写作 → 预览 → 保存 → 发布
• 命名规范：小写字母 + 连字符，避免空格和中文

📝 作业

1. 基础题：在 VS Code 中创建一个 hello-markdown.md 文件，写入一级标题、二级标题、一段文字和一个代码块，然后用 Ctrl+Shift+V 预览效果。

2. 进阶题：对比 VS Code + Markdown Preview Enhanced 和 Obsidian 两种写作方式，分别写一小段笔记，说说你更偏好哪种工具和理由。

3. 挑战题：安装 Typora 试用版或使用 StackEdit（在线版），写一篇包含图片和链接的 Markdown 文章，然后导出为 PDF 和 HTML，验证格式是否一致。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

关于我们