Markdown 语法整理大集合

简明教程: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.分级标题

代码
注:= - 最少可以只写一个,兼容性一般

一级标题
======================
二级标题
---------------------

演示

Markdown 语法整理大集合_第1张图片
image

3.TOC

注:根据标题生成目录,兼容性一般

代码

[TOC]

演示

Markdown 语法整理大集合_第2张图片
image

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> `标记之外

演示

image

6.代码块

注:与上行距离一空行

代码1(```)

注:用`````生成块






演示

代码2(Tab)

注: Tab缩进

我是文字……

    

演示

代码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**
注:多数第三方平台不支持插入`


**演示**

![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样式

**代码**

内联样式


**演示**

![image](//upload-images.jianshu.io/upload_images/6912209-a6e8fb087f500f2c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/276/format/webp)

* * *

### 16.语义标记

| 描述 | 效果 | 代码 |
| --- | --- | --- |
| 斜体 | *斜体* | `*斜体*` |
| 斜体 | *斜体* | `_斜体_` |
| 加粗 | **加粗** | `**加粗**` |
| 加粗+斜体 | ***加粗+斜体*** | `***加粗+斜体***` |
| 加粗+斜体 | ***加粗+斜体*** | `**_加粗+斜体_**` |
| 删除线 | ~~删除线~~ | `~~删除线~~` |

* * *

### 17.语义标签

| 描述 | 效果 | 代码 |
| --- | --- | --- |
| 斜体 | 斜体 | `斜体` |
| 加粗 | 加粗 | `加粗` |
| 强调 | 强调 | `强调` |
| 上标 | Za | `Za` |
| 下标 | Za | `Za` |
| 键盘文本 | 

![image](//upload-images.jianshu.io/upload_images/6912209-9f4177c5bfb69ab0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/47/format/webp)

 | `Ctrl` |
| 换行 |  |  |

* * *

### 18.格式化文本

**保持输入排版格式不变**
注:对内含标签需要破坏结构才能显示

**代码**


hello world
hi
hello world


**演示**

hello world
hi
hello world
**错误解决方法** 注:标签内部添加空格 或者 **直接使用`````标记来处理** **代码1(插入空格)**


< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>


**演示**

< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
**代码2( ````` 代码块标记)**

**演示**

你可能感兴趣的:(Markdown 语法整理大集合)