什么是markdwon？
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md, .markdown。
Markdown 应用
Markdown 能被使用来撰写电子书，如：Gitbook。 当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。
语法
标题
在想要设置为标题的文字前面加 # 来表示
标题和html的标题类似，一共有6个标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
他们用markdwon的语法为:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
字体
- 加粗
要加粗的文字左右分别用两个*号包起来
- 斜体
要倾斜的文字左右分别用一个*号包起来
- 斜体加粗
要倾斜和加粗的文字左右分别用三个*号包起来
- 删除线
要加删除线的文字左右分别用两个~~号包起来 示例:
**加粗的文字**
*倾斜的文字*`
***斜体加粗的文字***
~~加删除线的文字~~
效果:
加粗的文字
倾斜的文字`
斜体加粗的文字
加删除线的文字
分割线
用三个或者三个以上的 - 或者 *
示例:
---
----
***
*****
效果:
列表
有序列表
语法: 用 - + * 任何一种都可以,符号跟内容之间要有空格。
示例:
- 无序列表内容
+ 无序列表内容
* 无序列表内容
效果:
- 无序列表内容
- 无序列表内容
- 无序列表内容
无序列表
语法: 数字加点 序号跟内容之间要有空格
示例:
1. 列表1的内容
2. 列表2的内容
3. 列表3的内容
效果:
- 列表1的内容
- 列表2的内容
- 列表3的内容
列表嵌套
语法: 和html嵌套类似，这里 上一级和下一级之间三个空格即可
文字引用
语法:在引用的文字前加 >;引用也可以嵌套
示例:
>引用的内容
>>引用的内容2
>>>这是引用的内容3
//这里的>可以有n个一直的嵌套下去
效果:
引用的内容
引用的内容2
这是引用的内容3
超链接
语法:
[超链接名的名称](超链接的地址 "超链接的title")
title就是鼠标移动到超链接上面的提示的内容，可加可不加
示例:
[程序思维](http://www.lucklnk.com "前端干货多多")
[DataV](http://datav.jiaminghi.com/ "Vue炫酷大屏数据展示组件库")
效果:
图片
语法:
//图片的alt:就是显示在图片下面的文字，对图片内容的进行解释。
//图片的title:就是是图片的标题，当鼠移动到图片上时显示的内容，title可加可不加，和上面超链接的用法一样
//
示例:
效果:
图片设置宽和高
以上方的形式设置的宽度和高度图片的宽和高是不受限制的 ，给生成的图片限制宽度和高度，可以使用 img 标签
写法如下:
<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e273ac8ed0e94498a24c80734213d1a2~tplv-k3u1fbpfcp-zoom-1.image' width=300px height=200px />
// 写法二，自动缩放
<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6974134e0e5840dab98ac9999e1cb57d~tplv-k3u1fbpfcp-zoom-1.image' width=40%/>
![]() 转化成 html 后就会变成 img 标签，所以直接在 Markdown 中写 img 标签并且加上宽高就可以实现设置图片的宽和高。
// 原始 markdown 语法
// 转化成 html 后语法
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/10/9/16daf5380e685d64~tplv-t2oaga2asx-image.image" alt="图片描述">
表格
语法:
|表头|表头|表头|
|---|:---:|---:|
|内容|内容|内容|
|内容|内容|内容|
// 第二行用于分割表头和内容。
// - 有一个即可，通常为了对齐，可以多加几个
对齐方式:
文字默认居左
两边加`:`表示文字居中
左边加`:`表示文字居右
示例:
|商品名称|商品数量|商品单价|
|---|:---:|---:|
|手机|1|1580元|
|笔记本|3|5800元|
效果:
| 商品名称 | 商品数量 | 商品单价 |
|---|---|---|
| 手机 | 1 | 1580元 |
| 笔记本 | 3 | 5800元 |
代码
单行代码
语法: 代码之间分别用一个反引号包裹 示例:
`单行代码的内容`
效果:
单行代码的内容
多行代码(代码块)
语法: 代码前后分别用三个反引号包起来，并且两边的反引号单独要占一行 示例:
[```]
module.exports = function() {
let hello = document.createElement('div');
hello.innerHTML = "欢迎大家来到程序思维学习";
return hello;
};
[```]
注:上面的[]是为了转义加上去的，用于演示
效果:
module.exports = function() {
let hello = document.createElement('div');
hello.innerHTML = "欢迎大家来到程序思维学习";
return hello;
};
代码的diff
语法：和多行代码块类似 ，参考下方的示例； diff 通常用来做diam的增删的对比效果
示例:
```diff
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
```
效果:
// 数组去重
const unique = (arr)=>{
- return Array.from(new Set(arr))
+ return [...new Set(arr)]
}
折叠 效果
直接使用 <details>和 <summary> 标签
点我查看隐藏的内容
我是隐藏的内容<details><summary>点我查看隐藏的内容</summary>我是隐藏的内容</details>
工具推荐
大家可以到 Typroa 的官网去下载，文章末尾送上设置主题的传送门
