Markdown快速入门
Markdown是一种类似于HTML又兼容HTML标签的标记语言。通常用作记录学习笔记和api文档，它在程序员中的工作中用途广泛，如果你现在还不会，赶紧学起来吧，学完了再去鄙视其他不会写markdown的程序员(反正我就是这么干的- - )。
经常上GitHub的程序员应该知道，在GitHub上浏览别人的代码仓库时，代码仓库下面会显示一些文本内容，项目根目录下有个README.md文件，这个文件主要是作为代码仓库的功能介绍和文件结构。
比如spring项目的代码仓库介绍如下：
image
Markdown为什么适合做学习基本和文档呢？除了TXT文件之外，我们最常用的文档格式如微软的word文档，但是word文档要排版，而且在Windows系统之外兼容性不好，其他的如PDF文档我们喜欢打开浏览，但是有几个愿意自己动手制作PDF文件呢？太复杂了对吧。HTML文件应该是最适合做文档的，浏览起来很方便。但是它同样跟PDF文件一样，制作成本太高，我们制作一个HTML文件，需要熟悉CSS样式，除了样式需要精心调整之外，可能还需要适配不同浏览器和操作系统。
Markdown相比Word/PDF/HTML文件最方便的地方是它让我们不用专注于样式代码，它会帮我们自动处理文本内容的排版问题。
这里我采用微软公司的vscode来编辑markdown文件，用其他工具的同学请自动忽略。
vscode安装markdown插件
在插件搜索框输入Markdown Preview Enhanced，点击install，安装完成重启vscode。
image
当然你也可以按照Markdown All in One，这个插件下载最多可能功能更强大，不过我就不折腾了，你们喜欢可以随便玩哈。
上面提到markdown类似于HTML标签语言，所以我们先来熟悉一下markdown的标签与语法。
首先，我们新建一个文件保存为md格式，先命名为test.md文件。然后点击vscode右上角的图标就可以打开md文件预览功能。如下图：
image0.png
接着进入正题，开始编辑文件内容，慢慢熟悉语法规则：
1.标题
在HTML文件中，如果要显示不同层次的标题可以采用h1, h2,h3...等等标签来实现，在markdown中我们可以采用#来表示标题，一级标题用#，二级标题用##，三级标题用###...再往后面大家都那么聪明肯定懂了吧。
标题的使用方法
在md文件中编辑内容如下:
# Markdown快速入门(文档标题)
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
效果如下：
Markdown快速入门(文档标题)
二级标题
三级标题
四级标题
五级标题
我们上面安装的插件还提供了很多功能，比如在浏览器打开或者保存为图片PDF文件等等，同学们可以自行研究。
2.列表
无序列表
用+，-， *来表示列表选项。
注意用空格来间隔，不然没有效果。
用-来表示
- cpp
- java
- javascript
显示效果：
- cpp
- java
- javascript
也可以用+来表示：
+ cpp
+ java
+ javascript
- cpp
- java
- javascript
也可以用*来表示：
* cpp
* java
* javascript
- cpp
- java
- javascript
有序列表
用数字编号开头，请注意这里必须用.加空格连接。
1. cpp
2. java
3. javascript
效果如下：
- cpp
- java
- javascript
3.文本样式
显示粗体文字
**这一段是粗体字**
显示效果如下：
这一段是粗体字
显示斜体文字
*这一段是斜体字*
显示效果如下：
这一段是斜体字
4.引用
我们在写文档时可能引用其他人的语句，或者突出一段文本内容。
比如在上一节里我们书写标题时，需要主要到以下要点：
#，##，###表示不同的标题层次，如果需要显示预期的效果，我们需要在#后面加上空格，多几个空格不要紧，至少要一个。
以上的文字样式叫做引用，在markdown里面用>来表示，当然>后面有个空格字符，需要注意。
文件中编辑内容如下：
# Markdown快速入门(文档标题)
## 如何引用一段文本内容
鲁迅先生有句话大家应该都记得：
> 这世上本没有路，走的人多了也就有了路。
预览效果如下：
这世上本没有路，走的人多了也就有了路。
注意：
>是可以嵌套的，有兴趣可以自己嵌套玩。
5.插入代码块
假设大家都是程序员，写博客干巴巴地讲理论肯定没意思，肯定要贴代码才行，怎么显示一段代码呢？了解HTML的同学肯定知道在HTML中引用代码使用<code>这里贴代码</code>来显示一段代码。在markdown中如何贴代码呢？
采用```引用代码（不是引号也不是逗号，而是键盘上ESC和Table中间的那个键）
具体用法是在一段代码的前面和后面插入```符号，比如想在markdown中显示以下一段javascript代码：
console.log('hello world')
支持关键字高亮
以上的效果很简陋，如果我们希望根据代码对各自的关键字进行高亮显示，该如何做呢？
方法就是在```符号之后加上语言类别关键字，如果是js代码加上javascript, 如果是Python代码加上python，如果是java代码加上java，如果是C/C++代码加上cpp，根据不同语法显示不同关键字的效果如下图：
image6.png
6.插入图片
有时看技术博客，都是一坨坨的代码和文字看着也很累的，这时候我们需要放几张图片缓解一下
美女李沁
- 在线加载网络图片
这种方式能显示比如http/https站点的图片，加载图片的速度依赖于当前的网络环境。
加载网络图片的语法如下：
比如以上的的图片链接地址是https://img.haomeiwen.com/i20553365/e4649e27e312cee1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240，那么我们再markdown中如何显示这种图片呢？
image7.png
- 显示本地图片
我们都希望图片加载的速度能快一点，或者有时候会放一些简单的图片放在本地目录，这时候图片的加载速度肯定快许多。
加载本地图片的语法如下：
- 如果你当前md文件的同目录下有个image.png图片，那么显示这种图片应该这么写：
也可以是
./表示当前路径的意思。
- 如果你当前md文件的上级目录叫做images，image.png图片放在那个目录，那么应该是以下这种写法:
7.插入网站链接
有时候我们需要在markdown中贴上一些网站的链接，这样会显得自己很专业是吧。
比如在文档中我们就这样写：
想了解这方面的更多信息，请自行百度。
大家都知道百度是个网站，希望点击百度两个字可以直接打开网站，这时候我们怎么把链接地址关联上去呢？
插入网站链接的用法如下
[显示的文字](链接地址)
要想实现上面的功能很简单，编辑md文件内容如下：
想了解这方面的更多信息，请自行[百度](www.baidu.com)。
image8.png
简单吧？
8.显示表格
markdown中支持用table标签来显示表格，不过通常情况下我们可以采用更加简洁的表达方式来显示表格。
显示简单表格
输入以下内容：
| 第一列 | 第二列| 第三列 |
| ------ | ------ | ------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列1 | 第二列2 | 第三列3 |
| 第一列2 | 第二列2 | 第三列3 |
表格对齐方式
在第二行中冒号的位置来表示对齐方式，比如左对齐为:---，右对齐---:，居中对齐则是:---:
- 文本左对齐方式:
| 第一列 | 第二列| 第三列 |
| :------ | :------ | :------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列1 | 第二列2 | 第三列3 |
| 第一列2 | 第二列2 | 第三列3 |
- 文本右对齐方式:
| 第一列 | 第二列| 第三列 |
| ------: | ------: | ------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列1 | 第二列2 | 第三列3 |
| 第一列2 | 第二列2 | 第三列3 |
- 文本居中方式:
| 第一列 | 第二列| 第三列 |
| :------: | :------: | :------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列1 | 第二列2 | 第三列3 |
| 第一列2 | 第二列2 | 第三列3 |
如果需要更加丰富的表格，建议使用table来表示
9.支持HTML标签
前面我们提到，markdown本身支持HTML标签的，如果需要采用复杂的样式，可以使用HTML标签来实现，比如复杂表格用table能实现更加丰富的样式。
我们看看简单的HTML标签在markdown中的应用。
image9.png
