什么是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炫酷大屏数据展示组件库")

效果:

程序思维

DataV

图片

语法:

![图片的alt](图片的地址 "图片的title")

//图片的alt:就是显示在图片下面的文字，对图片内容的进行解释。
//图片的title:就是是图片的标题，当鼠移动到图片上时显示的内容，title可加可不加，和上面超链接的用法一样
//

示例:

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

效果: markdwon常用语法

图片设置宽和高

以上方的形式设置的宽度和高度图片的宽和高是不受限制的，给生成的图片限制宽度和高度，可以使用 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%/> 
```![](https://img-hello-world.oss-cn-beijing.aliyuncs.com/46de9453d7afa95ce5c56016ebc50b8f.jpeg)

`![]()` 转化成 html 后就会变成 `img` 标签，所以直接在 Markdown 中写 `img` 标签并且加上宽高就可以实现设置图片的宽和高。

// 原始 markdown 语法 markdwon常用语法

// 转化成 html 后语法 markdwon常用语法


表格
--

语法:

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

示例:

|商品名称|商品数量|商品单价|
|---|:---:|---:|
|手机|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> 标签

点我查看隐藏的内容我是隐藏的内容```

点我查看隐藏的内容

我是隐藏的内容

```

工具推荐

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

markdwon常用语法

Typora 设置主题传送门