# Markdown编辑器  
工欲善其事，必先利其器，选择一个合适的编辑器对学习 Markdown 至关重要：  
## 1、专业代码编辑器  
Visual Studio Code：微软开发的免费编辑器，通过安装 Markdown 相关扩展，可以获得强大的编辑和预览功能。  

VScode 安装教程：https://www.runoob.com/vscode/vscode-tutorial.html  

VScode 支持 Markdown 的扩展包括：  

Markdown All in One：提供快捷键、目录生成、数学公式支持  
Markdown Preview Enhanced：增强的预览功能，支持图表和演示模式  
markdownlint：语法检查和格式规范  
Sublime Text：轻量级但功能强大的编辑器，通过包管理器可以安装 Markdown 相关插件。  

Atom：GitHub 开发的编辑器（已停止维护），但仍有丰富的 Markdown 插件生态。  


## 2、专门的 Markdown 编辑器  
Mark Text：开源的实时预览 Markdown 编辑器，界面简洁，功能完整。下载地址：https://github.com/marktext/marktext/

Zettlr：学术写作导向的 Markdown 编辑器，支持引用管理和论文写作功能。下载地址：https://github.com/Zettlr/Zettlr

Joplin：免费开源的支持 markdown 免费的笔记应用 -- https://joplinapp.org/


## 3、在线编辑器  
Markdown 在线编辑器：https://www.jyshare.com/front-end/712/。

Dillinger：https://dillinger.io/，功能齐全的在线 Markdown 编辑器，支持云同步和多种导出格式。

StackEdit：https://stackedit.io/，基于浏览器的编辑器，与 Google Drive、Dropbox 等云服务集成。

简书、语雀编辑器：国内平台提供的在线 Markdown 编辑环境。

### VS Code Markdown  
本教程将使用 VSCode 编辑器来讲解 Markdown 的语法，VSCode 支持 MacOS 、Windows、Linux 平台，且包含多种主题。  

VSCode 默认集成了 Markdown 文档编辑插件，原生就支持高亮 Markdown 的语法。  

VSCode（全称：Visual Studio Code）是一款由微软开发且跨平台的免费源代码编辑器。  

VScode 安装教程：https://www.runoob.com/vscode/vscode-install.html  
VScode 官网地址：https://code.visualstudio.com/
![](../images/Markdown编辑器使用手册/1.png)  

VSCode 实时预览还需要执行 Markdown: Open Preview to the Side 命令来实现。

在命令窗口输入 Markdown: Open Preview to the Side 命令：  
![](../images/Markdown编辑器使用手册/2.png)  
最终效果：  
![](../images/Markdown编辑器使用手册/3.png)  

如果你需要将 markdown 转为 PDF、图片、HTML 等格式也可以安装对应的插件来实现。

你也可以使用我们的在线编辑器来测试：https://www.jyshare.com/front-end/712。

MarkDown 思维导图工具：https://www.jyshare.com/front-end/9692/。  

### 测试实例  
接下来的测试中，我们先在 VSCode 下安装 Markdown Preview Enhanced 插件来实现更强大的功能。  

点击右侧栏扩展按钮，查找Markdown Preview Enhanced 插件，点击安装：  
![](../images/Markdown编辑器使用手册/4.png)  

安装完成后重启 VSCode。

在 RUNOOB.md 输入以下代码：  
```  
# RUNOOB Markdown Test  
## Hello World!  
```  
将该代码格式粘贴到文件 RUNOOB.md 上，效果如下：  
![](../images/Markdown编辑器使用手册/5.png)    
在预览框中右击鼠标还提供了各种导出功能：

![](../images/Markdown编辑器使用手册/6.png)  

### MarkText  
我们也可以使用 MarkText-- 一款简单而优雅的开源 Markdown 编辑器。

MarkText 下载地址 https://www.marktext.cc/，可以根据不同系统选择不同的安装包：  
![](../images/Markdown编辑器使用手册/7.png)  

下载安装后，我们可以在菜单的 View 选项切换源码模式，也可以显示菜单栏：  
![](../images/Markdown编辑器使用手册/8.png)  
通过菜单的 File 选项，可以导出不同格式的文件：  
![](../images/Markdown编辑器使用手册/9.png)  








# 创建第一个 Markdown 文件  
现在让我们创建第一个 Markdown 文件来开始实践： 

## 步骤1：创建文件
打开你选择的编辑器 
创建一个新文件  
将文件保存为 RUNOOB.md（注意扩展名是 .md）  
## 步骤2：编写内容(这里用代码块框起来用于展示，在写时不需要框起来)  
```
# 我的第一个 Markdown 文档

这是我学习 Markdown 的开始。

## 学习目标

- 掌握基本语法
- 了解应用场景
- 能够独立创作文档

## 今天的感受

学习 Markdown 比我想象的**简单**，我对接下来的学习充满*期待*！

---

> 学习是一个持续的过程，每一小步都是进步。
```

## 步骤3：预览效果
如果使用 VS Code 等编辑器，按 Ctrl+Shift+V 打开预览面板，也可以点击右上角的预览图标：  
![](../images/Markdown编辑器使用手册/10.png)  

如果使用支持实时预览的编辑器（如 MarkText），可以直接看到渲染效果：  
![](../images/Markdown编辑器使用手册/11.png)  

可以观察源码和渲染结果的对应关系。

## 步骤4：实验和探索
尝试修改文件内容：

改变标题级别（增加或减少 # 号）
添加更多的列表项
尝试不同的强调方式
通过这个简单的练习，你已经创建了第一个 Markdown 文档，并体验了基本的语法效果。

记住，学习 Markdown 最好的方法就是实践。在阅读教程的同时，不断地在编辑器中尝试各种语法，观察它们的渲染效果。随着实践的增加，你会发现 Markdown 的简洁和强大。








# Markdown 标题---Markdown 标题有两种格式。  

## 1、使用 = 和 - 标记一级和二级标题
= 和 - 标记语法格式如下：  
```
我展示的是一级标题
=================

我展示的是二级标题
-----------------
```

显示效果如下图：  
![](../images/Markdown编辑器使用手册/12.png)  

## 2、使用 # 号标记
Markdown 使用 # 号来创建标题，这是从 HTML 的 `<h1>` 到 `<h6>` 标签概念演化而来的。

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。  
```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```
显示效果如下图：  
![](../images/Markdown编辑器使用手册/md2.gif)  

重要注意事项：

符号与文字间的空格：# 号和标题文字之间必须有一个空格。这是标准的 Markdown 语法要求。
```
# 正确写法
#错误写法
```

行首位置：# 号必须在行首，前面不能有其他字符（空格或制表符）。

唯一的一级标题：在一个文档中，通常只使用一个一级标题作为文档的主标题，这符合良好的文档结构规范。

## 3、标题的嵌套结构
标题的层次结构应该遵循逻辑顺序，不应该跳级使用。良好的标题结构就像一本书的目录：

推荐的层次结构：
```
# 主题：人工智能概述

## 第一部分：基础概念
### 什么是人工智能
### 发展历史
#### 早期发展（1950-1980）
#### 现代发展（1980至今）

## 第二部分：应用领域
### 自然语言处理
### 计算机视觉
### 机器学习
#### 监督学习
#### 无监督学习
#### 强化学习
```

避免的错误结构：
```
# 主标题
### 直接跳到三级标题（不推荐）
## 然后才是二级标题
```

## 标题编号的最佳实践
自动编号 vs 手动编号：

许多 Markdown 处理器和编辑器支持自动生成标题编号，因此在源码中通常不需要手动添加编号：

```
# 引言
## 背景
## 目标
# 方法论
## 数据收集
## 分析方法
```

标题锚点：

大多数 Markdown 处理器会自动为标题创建锚点（anchor），便于页面内跳转：
```
[跳转到方法论部分](#方法论)
```

标题长度建议：

保持标题简洁明了，一般不超过 10 个汉字或 20 个英文字符  
使用描述性词语，避免模糊的标题如"其他"、"杂项"  
可以使用冒号来分隔主题和副主题  








#  Markdown 文本格式
Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。  
![](../images/Markdown编辑器使用手册/13.png)  

当然也可以在段落后面使用一个空行来表示重新开始一个段落。
![](../images/Markdown编辑器使用手册/14.png)  

## 字体
文本强调是写作中的重要技巧，Markdown 提供了简洁的方式来实现粗体和斜体效果。

Markdown 可以使用以下几种字体：粗体和斜体。

粗体语法：使用两个星号 ** 或两个下划线 __ 包围文字：

```
这是**粗体文字**使用星号
这是__粗体文字__使用下划线
````

斜体语法：使用一个星号 * 或一个下划线 _ 包围文字：

```
这是*斜体文字*使用星号
这是_斜体文字_使用下划线
```

```
粗斜体组合：使用三个星号 *** 或三个下划线 ___。:


```
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
```

显示效果如下所示：  

![](../images/Markdown编辑器使用手册/md3.gif)  


混合使用技巧：

```
这段文字包含**粗体**、*斜体*和***粗斜体***的组合效果。
```

渲染效果如下：

![](../images/Markdown编辑器使用手册/15.png)  

使用建议：

推荐使用星号 * 而不是下划线 _，因为星号在各种 Markdown 解析器中兼容性更好  
不要过度使用强调，重点突出才有效果  
在中英文混合时，建议在强调符号前后加空格以提高可读性  

## 分隔线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：  

```
***

* * *

*****

- - -

----------
```

显示效果如下所示：
![](../images/Markdown编辑器使用手册/16.png)    

## 删除线
如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线 ~~ 即可，实例如下：

```
RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~
```

显示效果如下所示：
![](../images/Markdown编辑器使用手册/17.png)  

## 下划线
下划线可以通过 HTML 的 <u> 标签来实现：  
```
<u>带下划线文本</u>
```

显示效果如下所示：

![](../images/Markdown编辑器使用手册/18.png)  

## 脚注  
脚注是对文本的补充说明。

Markdown 脚注的格式如下:  
```
[^要注明的文本]
```

以下实例演示了脚注的用法：  

```
创建脚注格式类似这样 [^RUNOOB]。

[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！
```



演示效果如下：  
![](../images/Markdown编辑器使用手册/md5.gif)  

## 行内代码标记
行内代码用于在正文中标记代码片段、命令、变量名等：

基本语法：
使用一个反引号 ` 包围代码：  
```
使用 `git commit` 命令提交代码
变量 `userName` 存储用户名
在终端中输入 `npm install` 安装依赖
```

渲染效果：
![](../images/Markdown编辑器使用手册/19.png)  

包含反引号的代码：当代码本身包含反引号时，使用两个反引号包围。
```
要显示反引号，使用 `` `code` `` 这样的格式
```
渲染效果：
![](../images/Markdown编辑器使用手册/20.png)  

应用场景：

技术文档中的 API 名称、函数名
配置文件中的参数名
命令行指令
键盘快捷键（如 Ctrl+C）

## 文本高亮（扩展语法）
文本高亮不是标准 Markdown 语法，但许多扩展支持：

常见语法（部分平台支持）：  
```
这是==高亮文本==
```
HTML 替代方案：
```
这是<mark>高亮文本</mark>
```
![](../images/Markdown编辑器使用手册/21.png)  

## 段落和换行
段落的创建方法
在 Markdown 中，段落是文本的基本单位，理解段落规则对于正确格式化文档至关重要。

段落基本规则：

段落由一个或多个连续的文本行组成
段落之间由一个或多个空行分隔
普通段落不应该用空格或制表符缩进
正确的段落写法：
```
这是第一个段落。它可以包含多个句子，内容可以很长，会自动换行显示。

这是第二个段落。注意上面有一个空行分隔。

这是第三个段落。
```
![](../images/Markdown编辑器使用手册/22.png)  
常见错误：  
```
这是第一段
这是第二段（错误：没有空行分隔）

    这是缩进段落（错误：不应该缩进）
```
![](../images/Markdown编辑器使用手册/23.png)  


### 强制换行技巧
有时需要在不创建新段落的情况下换行，Markdown 提供了几种方法：

#### 方法一：行尾两个空格
在行尾添加两个或更多空格，然后按回车：
```
第一行内容（这里有两个空格）  
第二行内容
```
#### 方法二：HTML 换行标签
```
第一行内容<br>
第二行内容
```
#### 方法三：反斜杠（部分解析器支持）
```
第一行内容\
第二行内容
```
实际应用示例：
```
地址：北京市朝阳区  
电话：010-12345678  
邮箱：admin@runoob.com

诗歌示例：
床前明月光，  
疑是地上霜。  
举头望明月，  
低头思故乡。
```
![](../images/Markdown编辑器使用手册/24.png)  

### 空行的作用
空行在 Markdown 中扮演重要角色：

分隔段落：
```
第一段内容

第二段内容
```
分隔不同元素：
```
# 标题

段落内容

- 列表项1
- 列表项2

另一段内容
```

最佳实践建议：

在标题和内容之间留空行
在列表前后留空行
在代码块前后留空行
保持一致的空行使用习惯









# Markdown 列表---Markdown 支持有序列表和无序列表。  

## 无序列表
无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：
```
* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


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

显示结果如下：  
![](../images/Markdown编辑器使用手册/25.png)  

选择建议：

建议统一使用减号 -，因为它在视觉上更清晰
在同一文档中保持一致的标记方式
标记符号后必须有一个空格


## 有序列表
有序列表用于展示有顺序要求的步骤或项目。

有序列表使用数字并加上 . 号来表示，如：
```
1. 第一项
2. 第二项
3. 第三项
```
显示结果如下：
![](../images/Markdown编辑器使用手册/26.png)  

## 数字可以不连续
Markdown 会自动修正数字顺序：
```
1. 第一项
3. 第二项（实际显示为2）
7. 第三项（实际显示为3）
```
![](../images/Markdown编辑器使用手册/27.png)  

从指定数字开始：
```
5. 第五项
6. 第六项
7. 第七项
```
![](../images/Markdown编辑器使用手册/28.png)  

## 列表嵌套
列表嵌套技巧
列表可以嵌套使用，创建多层次的结构：

无序列表嵌套：  
```
- 水果
  - 苹果
    - 红苹果
    - 绿苹果
  - 香蕉
  - 橙子
- 蔬菜
  - 胡萝卜
  - 白菜
```

有序列表嵌套：  
```
1. 准备阶段
   1. 收集资料
   2. 制定计划
2. 执行阶段
   1. 开始实施
   2. 监控进度
3. 总结阶段
```

混合嵌套：  
```
1. 主要任务
   - 子任务A
   - 子任务B
     1. 详细步骤1
     2. 详细步骤2
   - 子任务C
2. 次要任务
```

列表混合嵌套只需在子列表中的选项前面添加两个或四个空格即可：
```
1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
```
![](../images/Markdown编辑器使用手册/29.png)  

嵌套规则：

子列表需要缩进 2-4 个空格（推荐 2 个）
保持一致的缩进长度
可以无限层嵌套，但实际使用中建议不超过 3 层

## 任务列表（复选框列表）---任务列表是 GitHub 风格 Markdown 的扩展功能，现在被广泛支持：

基本语法：
```
- [ ] 未完成的任务
- [x] 已完成的任务
- [ ] 另一个未完成的任务
```
![](../images/Markdown编辑器使用手册/30.png)  

实际应用示例：
```
## 项目待办清单

### 设计阶段
- [x] 需求分析
- [x] 原型设计
- [ ] UI 设计

### 开发阶段
- [ ] 前端开发
  - [x] 页面布局
  - [ ] 交互功能
  - [ ] 响应式适配
- [ ] 后端开发
  - [ ] 数据库设计
  - [ ] API 开发
  - [ ] 性能优化

### 测试阶段
- [ ] 单元测试
- [ ] 集成测试
- [ ] 用户验收测试
```
![](../images/Markdown编辑器使用手册/31.png)  

使用技巧：

方括号内的空格和 x 很重要：[ ] 和 [x]
可以与嵌套列表结合使用
在项目管理、学习计划、生活清单中特别有用
某些编辑器支持点击复选框来切换状态
高级列表技巧：

列表项中包含多段内容：
```
1. 第一项

   这是第一项的详细说明，需要与列表项对齐缩进。
   
   还可以包含第二段内容。

2. 第二项

   > 可以在列表项中使用引用
```
![](../images/Markdown编辑器使用手册/32.png)  

列表项中的换行：
```
- 这是一个很长的列表项，
  需要换行显示，注意第二行需要与第一行对齐
- 另一个列表项
```
![](../images/Markdown编辑器使用手册/33.png)  


# Markdown 引用块
引用块用于突出显示重要信息、引用他人观点或创建视觉层次。

## 单级引用的使用
基本语法：

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号：
```
> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想
```
![](../images/Markdown编辑器使用手册/34.png)  

## 多行引用：
```
> 这是引用的第一行。
> 这是引用的第二行。
> 
> 这是引用的第二段。
```

简化写法：

只在第一行使用 > ，其余行会自动包含在引用中：
```
> 这是一个长引用，
包含多行内容，
只需要在第一行使用 > 符号。
```
![](../images/Markdown编辑器使用手册/35.png)  


## 多级嵌套引用
另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：
```
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
```
![](../images/Markdown编辑器使用手册/36.png)