简明教程:https://ouweiya.gitbooks.io/markdown/
1.标题
代码
注:# 后面保持空格
# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7 // 错误代码
######## h8 // 错误代码
######### h9 // 错误代码
########## h10 // 错误代码
演示
h1
h2
h3
h4
h5
h6
####### h7
######## h8
######### h9
########## h10
2.分级标题
代码
注:=
-
最少可以只写一个,兼容性一般
一级标题
======================
二级标题
---------------------
演示
3.TOC
注:根据标题生成目录,兼容性一般
代码
[TOC]
演示
4.引用
代码1(单行式)
> hello world!
演示
hello world!
代码2(多行式)
> hello world!
hello world!
hello world!
或者
> hello world!
> hello world!
> hello world!
演示
相同的结果
hello world!
hello world!
hello world!
代码3(多层嵌套)
> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc
演示
aaaaaaaaa
bbbbbbbbb
cccccccccc
5.行内标记
注:用 ` 标记代码块将变成一行
代码
标记之外`hello world`标记之外
演示
标记之外hello world
标记之外
错误代码
注:不同平台错误略有差异
标记之外 `
< div>
< div></div>
< div></div>
< div></div>
< /div>
`标记之外
演示
6.代码块
注:与上行距离一空行
代码1(```)
注:用`````生成块
<div>
<div></div>
<div></div>
<div></div>
</div>
演示
<div>
<div></div>
<div></div>
<div></div>
</div>
代码2(Tab)
注: Tab缩进
我是文字……
<div>
<div></div>
<div></div>
<div></div>
</div>
演示
<div>
<div></div>
<div></div>
<div></div>
</div>
代码3(自定义语法)
注:根据不同的语言配置不同的代码着色
```javascript
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
**演示**
var num = 0;
for (var i = 0; i < 5; i++) {
num+=i;
}
console.log(num);
* * *
### 7.插入链接
**代码1(内链式)**
注:`{:target="_blank"}`跳转方式兼容性一般 ,多数第三方平台不支持跳转
[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}
**演示**
[百度1](http://www.baidu.com/%22%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%22)
**代码2(引用式)**
[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/ "百度二下"
**演示**
[百度2](http://www.baidu.com/%22%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%22)
* * *
### 8.插入图片
**代码1(内链式)**
[图片上传失败...(image-90880b-1542510791300)]
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-8c53b79a706bb7c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/273/format/webp)
**代码2(引用式)**
![name][01]
[01]: ./01.png '描述'
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-2b1e8871d7bf2d6e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/273/format/webp)
* * *
### 9.插入图片带有链接
**代码**
[图片上传失败...(image-f83b77-1542510791300)]{:target="_blank"} // 内链式
[[图片上传失败...(image-4dc956-1542510791300)]][5]{:target="_blank"} // 引用式
[5]: http://www.baidu.com
**演示**
[](http://www.baidu.com)
![image](//upload-images.jianshu.io/upload_images/6912209-1c3d07c7077c76c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/273/format/webp)
[](http://www.baidu.com)
[
![image](//upload-images.jianshu.io/upload_images/6912209-1c3d07c7077c76c0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/273/format/webp)
][5]
[5]: [http://www.baidu.com](http://www.baidu.com)
* * *
### 10.视频插入
注:Markdown 语法是不支持直接插入视频的
普遍的做法是 插入HTML的 iframe 框架,通过网站自带的分享功能获取,如果没有可以尝试第二种方法
第二是伪造播放界面,实质是插入视频图片,然后通过点击跳转到相关页面
**代码1**
注:多数第三方平台不支持插入`<iframe>`视频
![image](//upload-images.jianshu.io/upload_images/6912209-29337f2896bf4629.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/621/format/webp)
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-d11325d111b86cc1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/508/format/webp)
**代码2**
[图片上传失败...(image-49aefe-1542510791300)]{:target="_blank"}
**演示**
[](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction)
![image](//upload-images.jianshu.io/upload_images/6912209-d11325d111b86cc1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/508/format/webp)
[](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction)
* * *
### 11.序表
**代码1(有序)**
注:序列`.`后 保持空格
1. one
2. two
3. three
**演示**
1. one
2. two
3. three
**代码2(无序)**
- one
- two
- three
**演示**
* one
* two
* three
**代码3(序表嵌套)**
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
**演示**
1. one
1. one-1
2. two-2
2. two
* two-1
* two-2
* * *
**代码4(序表嵌套代码块)**
注:换行+两个Tab
-
one
var a = 10; // 与上行保持空行并 递进缩进
**演示:**
* one
```
var a = 10;
```
* * *
### 12.任务列表
注:兼容性一般 要隔开一行
**代码**
这是文字……
- [x] 选项一
- [ ] 选项二
- [ ] [选项3]
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-5d37b0a39ce101c9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/342/format/webp)
* * *
### 13.表情
注:兼容一般
![image](//upload-images.jianshu.io/upload_images/6912209-35a94b525d1ec313.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/273/format/webp)
[表情代码地址](https://www.webpagefx.com/tools/emoji-cheat-sheet/'GitHub')
* * *
### 14.表格
注: `:` 代表对齐方式 ,** `:` 与 `|` 之间不要有空格**,否则对齐会有些不兼容
**代码1**
a | b | c |
---|---|---|
居中 | 左对齐 | 右对齐 |
========= | =============== | ============ |
**演示**
| a | b | c |
| --- | --- | --- |
| 居中 | 左对齐 | 右对齐 |
| ========= | =============== | ============ |
* * *
**代码2(简约写法)**
a | b | c |
---|---|---|
居中 | 左对齐 | 右对齐 |
============ | ================= | ============= |
**演示**
| a | b | c |
| --- | --- | --- |
| 居中 | 左对齐 | 右对齐 |
| ============ | ================= | ============= |
**代码3(特殊表格)**
注:一般对合并单元格,以及其他特殊格式表格,markdown 是无能为力的
所以常规的做法是使用HTML标签,但是这样的编写效率极低。
但是有了这款工具的话,所有问题都迎刃而解。
在线生成HTML代码 [Tables Generator](http://www.tablesgenerator.com/) (国外的站)
![image](//upload-images.jianshu.io/upload_images/6912209-46aac2b114b995ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-5e14abef7e65830d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/409/format/webp)
* * *
### 15.支持内嵌CSS样式
**代码**
<p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p>
**演示**
![image](//upload-images.jianshu.io/upload_images/6912209-a6e8fb087f500f2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/276/format/webp)
* * *
### 16.语义标记
| 描述 | 效果 | 代码 |
| --- | --- | --- |
| 斜体 | *斜体* | `*斜体*` |
| 斜体 | *斜体* | `_斜体_` |
| 加粗 | **加粗** | `**加粗**` |
| 加粗+斜体 | ***加粗+斜体*** | `***加粗+斜体***` |
| 加粗+斜体 | ***加粗+斜体*** | `**_加粗+斜体_**` |
| 删除线 | ~~删除线~~ | `~~删除线~~` |
* * *
### 17.语义标签
| 描述 | 效果 | 代码 |
| --- | --- | --- |
| 斜体 | <i>斜体</i> | `<i>斜体</i>` |
| 加粗 | <b>加粗</b> | `<b>加粗</b>` |
| 强调 | <em>强调</em> | `<em>强调</em>` |
| 上标 | Z<sup>a</sup> | `Z<sup>a</sup>` |
| 下标 | Z<sub>a</sub> | `Z<sub>a</sub>` |
| 键盘文本 |
![image](//upload-images.jianshu.io/upload_images/6912209-9f4177c5bfb69ab0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/47/format/webp)
| `<kbd>Ctrl</kbd>` |
| 换行 | | |
* * *
### 18.格式化文本
**保持输入排版格式不变**
注:对内含标签需要破坏结构才能显示
**代码**
<pre>
hello world
hi
hello world
</pre>
**演示**
<pre>
hello world
hi
hello world
</pre>
**错误解决方法**
注:标签内部添加空格 或者 **直接使用`````标记来处理**
**代码1(插入空格)**
<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>
**演示**
<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>
**代码2( ````` 代码块标记)**
<div>
<div></div>
<div></div>
<div></div>
</div>
**演示**