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.分级标题

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

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

演示

image

3.TOC

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

代码

[TOC]

演示

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

演示

image

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>

**演示**

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • Markdown 语法整理大集合
    ManThirty阅读 529评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 1.标题 代码 注:# 后面保持空格 演示 h1 h2 h3 h4 h5 h6 ####### h7 /...
    Fly_withbird阅读 1,919评论 0 2
  • 今天突然觉得累到瘫 累的无所适从 累的盼望长假,盼望过年……汗 想到了去年的日子。想到了2018年,2018年是负...
    锦鲤虞美人阅读 215评论 0 0
  • 又在熬夜看电视剧了。《法外风云》,看着别人的成功,沉浸在别人的感情纠葛之中。很怕,怕很快就到大结局。别人的故事结束...
    DC_DC阅读 421评论 0 0