注明备忘：这里使用的编辑器是vscode，下载的拓展包有三个，分别是：

  1. markdown all in one
  2. markdown preview Enhanced
  3. pasted Image //这个跟别的博主学的，用于方便copy网页图片。个人来说如果单纯本地预览确实超级方便，但是对于我来说有点鸡肋，然后放在本地并不是很好管理。

学到了新的我也会持续更新加在后面

一：标题：

markdown部分：

1
2
3
4
5
6
7
8
# 这篇文章用来学习markdown语法，这是一级标题。#H1

## 这篇文章用来学习markdown语法，这是二级标题。#H2

### 这篇文章用来学习markdown语法，这是三级标题。#H3

#### 其实切换起来多加几个#号就可以了，这里是四级标题。#H4

渲染效果：

这篇文章用来学习markdown语法，这是一级标题。#H1

这篇文章用来学习markdown语法，这是二级标题。#H2

这篇文章用来学习markdown语法，这是三级标题。#H3

其实切换起来多加几个#号就可以了，这里是四级标题。#H4

二：正文：

这样直接写就是正文。
末尾添加多余两个空格再回车，实现创建换行

换了一行
又换了一行

空一行，换了一段。（换行换段我这里自动识别了）

三：加粗，斜体，斜体加粗，删除线：

tips：（ctl+shift+home是选中当前行鼠标前内容，end当前行末，home当前行首）

加粗：

加粗前后各（** ）包住

markdown部分：

1
2
**我现在变粗体了**
**也可也ctl+b加粗**

渲染效果：
我现在变粗体了
也可也ctl+b加粗

斜体，斜体加粗：

斜体前后各（* )包住
斜体并加粗就是前后各(*** )包住

markdown部分：

1
2
*我现在歪了*   //斜体
***也可也ctl+i选中变成斜体，然后再ctl+b加粗*** //***这样三个是斜体加粗

渲染效果：
我现在歪了
也可也ctl+i选中变成斜体

删除线：

要加删除线的文字左右分别用两个~~号包起来

markdown部分：

1
~~我被杠掉了~~

渲染效果：
我被杠掉了

四：引用，分割线：

引用：在引用的文字前加>就行。引用也可以嵌套，只要不断>>>>>>就行。
分割线：分割线就是三个或以上的-或者*

markdown部分：

1
2
3
4
5
6
7
>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容
---                          //分割线
----
***                          //分割线
******************

渲染效果：

这是引用的内容

这是引用的内容

这是引用的内容

五：序号，段落小圆点：

markdown部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   1. 这样是有序，（1.+空格），换行会自动添加第二个序号
   2. 这样就有第二个序号
   3. - 第三行打个这样形式的
      1. tab，二级序号
      2. 二级序号第二个
      3. 二级序号第三个
      4. 第四
          如果直接换一行，换行是这样的。
如果这样加一些文字，即使没有缩进，渲染出来也还会是在二级序号的段落内
         1. 三级序号
         66. 如果乱打序号，渲染出来的序号其实还会是正确的。比如这一行打的66，渲染还会是2号
         - 这样打是个小圆点点（-加一个空格）
         - 换行会自动给你补全这个小圆点

渲染效果：

  1. 这样是有序，（1.+空格），换行会自动添加第二个序号
  2. 这样就有第二个序号
    • 第三行打个这样形式的
    1. tab，二级序号
    2. 二级序号第二个
    3. 二级序号第三个
    4. 第四
      如果直接换一行，换行是这样的。
      如果这样加一些文字，即使没有缩进，渲染出来也还会是在二级序号的段落内
      1. 三级序号
      2. 如果乱打序号，渲染出来的序号其实还会是正确的。比如这一行打的66，渲染还会是2号
      • 这样打是个小圆点点（-加一个空格）
      • 换行会自动给你补全这个小圆点

六：添加图片：

网络图片链接：
ctl+alt+v，粘贴从在线网页上复制的内容，使用了拓展包，所以默认会加载到正在编辑的markdown的文件夹下
网络图片可以直接使用它的链接（不过网络图片连接很可能不知道啥时候就挂了，我自己用的图床是阿里云OSS，先测试几个月看看效果）

markdown源码（此图片来自网络，如侵权，可联系删除）：

1
![beishangwa](https://img.zcool.cn/community/0121c859e056fea80121ae0c405fd6.jpg@1280w_1l_2o_100sh.jpg)

下面的图就是网页上copy下来的悲伤蛙渲染效果。使用 ![]() 来链接图片。

beishangwa

本地图片链接方式：

1
![](./beishangwa.png)

如果这样的话就可以使用本地的悲伤蛙（找不到路径需要./一下，vs可以识别路径里的图，这里估计会挂，我本地应该不在这个路径，建议放在相应的md文件夹内方便定义路径）

七：转义字符：

markdown部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
| character | name     |
| --------- | -------- |
| \\        | 反斜杠   |
| \`        | 反引号   |
| \*        | 星号     |
| \_        | 下划线   |
| \{\}      | 大括号   |
| \[\]      | 中括号   |
| \(\)      | 小括号   |
| \#        | 井号     |
| \+        | 加号     |
| \-        | 减号     |
| \.        | 英文句号 |
| \!        | 感叹号   |

渲染效果：

character name
\ 反斜杠
` 反引号
* 星号
_ 下划线
{} 大括号
[] 中括号
() 小括号
# 井号
+ 加号
- 减号
. 英文句号
! 感叹号

八：表格

(源码在vs显示的格式化修改：alt+shift+f)
表格中均默认左对齐，右对齐使用—后加：，或者居中对齐使用—前后各：：

markdown部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
##### 左对齐：
| 姓名   | 颜色 | 种族类型 |
| ------ | ---- | -------- |
| 悲伤蛙 | 绿   | 蛙子     |
| 哈士奇 | 黑白 | 狗子     |

##### 右对齐：
| 姓名   | 颜色 | 种族类型 |
| ------ | ---: | -------: |
| 悲伤蛙 |   绿 |     蛙子 |
| 哈士奇 |   黑 |     狗子 |

##### 居中对齐：
| 姓名   | 颜色  | 种族类型 |
| ------ | :---: | :------: |
| 悲伤蛙 |  绿   |   蛙子   |
| 哈士奇 |  黑   |   狗子   |

渲染效果：

左对齐：
姓名 颜色 种族类型
悲伤蛙 绿 蛙子
哈士奇 黑白 狗子
右对齐：
姓名 颜色 种族类型
悲伤蛙 绿 蛙子
哈士奇 黑 狗子
居中对齐：
姓名 颜色 种族类型
悲伤蛙 绿 蛙子
哈士奇 黑 狗子

九：正文对齐方式：

markdown我查了一下好像是没有对齐的，但是它基本支持html的语法，所以我们可以写成：

1
2
3
4
5
6
7
8
9
10
11
**居中对齐：**

<center>帅哥美女一键三连</center>

**左对齐：**

<p align="left">帅哥美女一键三连</p>

**右对齐：**

<p align="right">帅哥美女一键三连</p>

渲染效果：

居中对齐：

帅哥美女一键三连

左对齐：

帅哥美女一键三连

右对齐：

帅哥美女一键三连

十：插入链接

还是ctl + C 然后选中需要添加链接的文字ctl + V
这是一个markdown语法链接

十一：代码框

代码前后使用```包裹,并指定一种语言

1
2
3
\  ```markdown
      中间是内容
\  ```

渲染效果：

1
2

中间是内容

十二: hexo内插入网页视频

目前是使用raw的方式：（markdown应该不可以直接渲染预览，但是hexo是支持的，自适应方面还阔以）

markdown部分：

1
2
3
4
5
6
7
8
9
{% raw %}

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe 
src="//player.bilibili.com/player.html?aid=939470868&bvid=BV1VT4y1B7QL&cid=731375438&page=1" scrolling="no" border="0" 
frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; 
height: 100%; left: 0; top: 0;"> </iframe></div>

{% endraw %}

渲染效果：

十三: emoji

推荐网站emojipedia
直接复制粘贴就好，可以正确渲染
示例：
🍇
🐗
🙃
🗻

当然，也可以使用 full emoji list
格式：&#x +unicode + ;

范例：
&#x1F601;
&#x1F602;

渲染效果：
&#x1F601;
&#x1F602;

十四: 图床

我配置的是阿里云OSS + PicGo + vscode的方案
由于我的编辑器是vscode，所以在vscode上传图片的快捷键如下：

上传截图：ctl+alt+u

待续，学到后再加