什么是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# 一级标题
2## 二级标题
3### 三级标题
4#### 四级标题
5##### 五级标题
6###### 六级标题

字体

加粗

要加粗的文字左右分别用两个*号包起来

斜体

要倾斜的文字左右分别用一个*号包起来

斜体加粗

要倾斜和加粗的文字左右分别用三个*号包起来

删除线

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

1**加粗的文字**
2*倾斜的文字*`
3***斜体加粗的文字***
4~~加删除线的文字~~

效果:

加粗的文字

倾斜的文字`

斜体加粗的文字

~~加删除线的文字~~

分割线

用三个或者三个以上的 - 或者 *

示例:

1---
2----
3***
4*****

效果:

列表

有序列表

语法: 用 - + * 任何一种都可以,符号跟内容之间要有空格。示例:

1- 无序列表内容
2+ 无序列表内容
3* 无序列表内容

效果:

无序列表内容
无序列表内容
无序列表内容

无序列表

语法: 数字加点 序号跟内容之间要有空格示例:

11. 列表1的内容
22. 列表2的内容
33. 列表3的内容

效果:

列表1的内容
列表2的内容
列表3的内容

列表嵌套

语法: 和html嵌套类似，这里上一级和下一级之间三个空格即可

文字引用

语法:在引用的文字前加 >;引用也可以嵌套示例:

1>引用的内容
2>>引用的内容2
3>>>这是引用的内容3
4//这里的>可以有n个一直的嵌套下去

效果:

引用的内容

引用的内容2

这是引用的内容3

超链接

语法:

1[超链接名的名称](超链接的地址 "超链接的title")
2
3title就是鼠标移动到超链接上面的提示的内容，可加可不加

示例:

1[程序思维](http://www.lucklnk.com "前端干货多多")
2
3[DataV](http://datav.jiaminghi.com/ "Vue炫酷大屏数据展示组件库")

效果:

程序思维

DataV

图片

语法:

1![图片的alt](图片的地址 "图片的title")
2
3//图片的alt:就是显示在图片下面的文字，对图片内容的进行解释。
4//图片的title:就是是图片的标题，当鼠移动到图片上时显示的内容，title可加可不加，和上面超链接的用法一样
5//

示例:

![DataV组件库的Demo](https://img-hello-world.oss-cn-beijing.aliyuncs.com/a67c3cc1192cea50ceb6155a6ec01247.jpeg)

效果: DataV组件库的Demo

图片设置宽和高

以上方的形式设置的宽度和高度图片的宽和高是不受限制的，给生成的图片限制宽度和高度，可以使用 img 标签

写法如下:

1<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e273ac8ed0e94498a24c80734213d1a2~tplv-k3u1fbpfcp-zoom-1.image' width=300px height=200px />
2
3// 写法二，自动缩放
4<img src='https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6974134e0e5840dab98ac9999e1cb57d~tplv-k3u1fbpfcp-zoom-1.image' width=40%/> 
5```![](https://img-hello-world.oss-cn-beijing.aliyuncs.com/46de9453d7afa95ce5c56016ebc50b8f.jpeg)
6
7`![]()` 转化成 html 后就会变成 `img` 标签，所以直接在 Markdown 中写 `img` 标签并且加上宽高就可以实现设置图片的宽和高。
8

// 原始 markdown 语法图片描述

// 转化成 html 后语法 <img src="https://user-gold-cdn.xitu.io/2019/10/9/16daf5380e685d64?w=820&h=461&f=jpeg&s=26606" alt="图片描述">

1
2表格
3--
4
5语法:
6

表头	表头	表头
内容	内容	内容
内容	内容	内容
// 第二行用于分割表头和内容。
// - 有一个即可，通常为了对齐，可以多加几个
对齐方式:
文字默认居左
两边加`:`表示文字居中
左边加`:`表示文字居右

1
2示例:
3

商品名称	商品数量	商品单价
手机	1	1580元
笔记本	3	5800元

1
2效果:
3
4| 商品名称 | 商品数量 | 商品单价 |
5| --- | :-: | --: |
6| 手机 | 1 | 1580元 |
7| 笔记本 | 3 | 5800元 |
8
9代码
10--
11
12### 单行代码
13
14语法: 代码之间分别用一个反引号包裹 示例:
15

单行代码的内容

1
2效果: `单行代码的内容`
3
4### 多行代码(代码块)
5
6语法: 代码前后分别用三个反引号包起来，并且两边的反引号单独要占一行 示例:
7

[] module.exports = function() { let hello = document.createElement('div'); hello.innerHTML = "欢迎大家来到程序思维学习"; return hello; }; []

注:上面的[]是为了转义加上去的，用于演示

1
2效果:
3

module.exports = function() { let hello = document.createElement('div'); hello.innerHTML = "欢迎大家来到程序思维学习"; return hello; };

1
2### 代码的diff
3
4语法：和多行代码块类似 ，参考下方的示例； diff 通常用来做diam的增删的对比效果
5
6示例:
7

```diff // 数组去重 const unique = (arr)=>{

return Array.from(new Set(arr))

return [...new Set(arr)] } ```

1
2效果:
3

// 数组去重 const unique = (arr)=>{

return Array.from(new Set(arr))

return [...new Set(arr)] }

1
2### 折叠 效果
3
4直接使用 `<details>`和 `<summary>` 标签
5
6点我查看隐藏的内容我是隐藏的内容```
7<details><summary>点我查看隐藏的内容</summary>我是隐藏的内容</details>

工具推荐

大家可以到 Typroa 的官网去下载，文章末尾送上设置主题的传送门

"官网截图

Typora 设置主题传送门

markdwon常用语法