Markdown基本语法介绍

参考链接:https://www.jianshu.com/p/b03a8d7b1719

简明教程：https://ouweiya.gitbooks.io/markdown/

有道云MarkDown教程：http://note.youdao.com/iyoudao/?p=2411

W3cShcool:https://www.w3cschool.cn/lme/t13p1sri.html

1.标题

代码

注：#后面保持空格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7      // 错误代码
######## h8     // 错误代码
######### h9    // 错误代码
########## h10  // 错误代码

演示

h1

h2

h3

h4

h5

h6

####### h7 ######## h8 ######### h9 ########## h10

2.分级标题

代码

注：=-最少可以只写一个，兼容性一般

1
2
3
4


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

演示

一级标题

二级标题

3.Toc

代码

注：根据标题生成目录

1

[TOC]

演示

[TOC]

引用

行内标记

++代码块++

插入链接

插入图片

插入图片带有链接

序表

任务列表

表情

表格

支持内嵌CSS样式

4.引用

代码1（单行式）

1

>hello world!

演示

hello world

代码2（多行式）

1
2
3


> hello world!
hello world!
hello world!

或者

1
2
3


>hello world!
>hello world!
>hello world!

演示

hello world!
hello world!
hello world!

代码3（多层嵌套）

1
2
3


> aaaaaaaa
>> bbbbbbbb
>>> cccccccc

演示

aaaaaaaa

bbbbbbbb

ccccccccc

5.行内标记

注：用 ` 标记代码块将变成一行

代码

1

标记之外`hello world`标记之外

演示

标记之外hello world标记之外

错误代码

注：不同平台错误略有差异

1
2
3
4
5
6
7


 标记之外 ` 
< div>   
    < div></div>
    < div></div>
    < div></div>
< /div>
`标记之外

演示

标记之外 < div> < div></div> < div></div> < div></div> < /div> 标记之外

6.代码块

注：与上行距离一空行

代码1(```)

注：用```生成块

演示

1
2
3
4
5


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

代码2(Tab)

注：Tab缩进

演示

1
2
3
4
5
6
7


我是文字……  

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

代码3(自定义语法)

注：根据不同的语言配置不同的代码颜色

1
2
3
4
5


var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

7.插入链接

代码1(内链式)

注：{:target="_blank"}跳转方式兼容性一般，多数第三方平台不支持跳转

1

[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}

演示

百度1

代码2(引用式)

1
2


[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/   "百度二下"

演示

百度2

8.插入图片

代码1(内链式)

1

![](./01.png '描述')

演示

代码2(引用式)

1
2


![name][01]
[01]: ./01.png '描述'

演示

name

9.插入图片带有链接

代码

1
2
3
4


[![](./01.png '百度')](http://www.baidu.com){:target="_blank"}        // 内链式

[![](./01.png '百度')][5]{:target="_blank"}                       // 引用式
[5]: http://www.baidu.com

演示

内链式

引用式

[][1]{:target="_blank"}
[1]: http://www.baidu.com

10.视频插入

注: Markdown语法是不支持直接插入视频的

1
2


普遍的做法是 插入HTML的 iframe 框架，通过网站自带的分享功能获取，如果没有可以尝试第二种方法
第二是伪造播放界面，实质是插入视频图片，然后通过点击跳转到相关页面

代码1

注: 多数第三方平台不支持插入视频

1

<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

代码2

1

[![](./youku2.png)](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){:target="_blank"}

11.序表

代码1(有序)

1
2
3


1. one
2. two
3. three

演示

one
two
three

代码2(无序)

1
2
3


* one
* two
* three

演示

one
two
three

代码3(序表嵌套)

1
2
3
4
5
6


1. one
    1. one-1
    2. two-2
2. two
    * two-1
    * two-2

演示

one
1. one-1
2. two-2
two
- two-1
- two-2

代码4(序表嵌套代码块)

注: 换行+两个Tab

1
2


* one
    var a = 10; //与上行保持空行并递归缩进

演示

one

   var a = 10;     //与上行保持空行并递归缩进

12.任务列表

注：兼容性一般要隔开一行

1
2
3
4
5


这是文字……

- [x] 选项一
- [ ] 选项二  
- [ ]  [选项3]

演示

选项一
选项二
[选项3]

13.表情

注：兼容一般

14.表格

注：: 代表对齐方式 ,** : 与 | 之间不要有空格**，否则对齐会有些不兼容

代码1

1
2
3
4


| a | b | c | 
|:-------:|:------------- | ----------:| 
| 居中 | 左对齐 | 右对齐 |
|=========|===============|============| 

演示

a	b	c
居中	左对齐	右对齐
=========	===============	============

代码2(简约写法)

1
2
3
4


a  | b | c  
:-:|:- |-:
    居中    |     左对齐      |   右对齐    
============|=================|=============

演示

a	b	c
居中	左对齐	右对齐
============	=================	=============

代码3(特殊表格)

注: 一般对合并单元格，以及其他特殊格式表格，markdown 是无能为力的所以常规的做法是使用HTML标签，但是这样的编写效率极低。但是有了这款工具的话，所有问题都迎刃而解.

在线生成HTML代码 Tables Generator (国外的站)

15.支持内嵌的CSS样式

代码

1

<p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p>

演示

16.语义标记

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

17.语义标签

描述	效果	代码
斜体	斜体	`<i>斜体</i>`
加粗	加粗	`<b>加粗</b>`
强调	强调	`<em>强调</em>`
上标	Za	`Z<sup>a</sup>`
下标	Za	`Z<sub>a</sub>`
键盘文本	Ctrl	`<kbd>Ctrl</kbd>`
换行

18.格式化文本

保持输入排版格式不变

代码

1
2
3
4
5


<pre>
hello world 
       hi
hello world 
</pre>

演示

错误解决方法

注: 标签内部添加空格或者直接使用```标记来处理

代码1(插入空格)

演示

19.公式

注: 1个$左对齐，2个居中

代码

1
2


$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

演示

$$ x \href{why-equal.html}{=} y^2 + 1 $$

$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

20.分隔符

注: 最少三个 — 或 ***或 * * *

代码

1
2
3


***
---
* * *

演示

21.脚注

代码

1
2


Markdown[^1]
[^1]: Markdown是一种纯文本标记语言  //在文章最后面显示脚注

演示

Markdown¹

22.锚点

代码

注: 只有标题支持锚点，跳转目录方括号后保持空格

23.定义型列表

注: 解释型定义

1
2
3
4
5
6


Markdown 
:   轻量级文本标记语言，可以转换成html，pdf等格式  //  开头一个`:` + `Tab` 或 四个空格

代码块定义
:   代码块定义……
        var a = 10;         // 保持空一行与 递进缩进

演示

Markdown: 轻量级文本标记语言，可以转换成html，pdf等格式 // 开头一个: + Tab 或四个空格
代码块定义: 代码块定义……
var a = 10;

24.自动邮箱链接

代码

1

<xxx@outlook.com>

演示

xxx@outlook.com

25.流程图

代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14




flow // 流程 
st=>start: 开始|past:> http://www.baidu.com // 开始 e=>end: 结束    // 结束 
c1=>condition: 条件1:>http://www.baidu.com[_parent]//判断条件 c2=>condition: 条件2   // 判断条件 
c3=>condition: 条件3        // 判断条件 
io=>inputoutput: 输出      // 输出  
//----------------以上为定义参数-------------------------

//----------------以下为连接参数-------------------------
// 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e c1(no)->e // 条件1不满足->结束 
c2(no)->e // 条件2不满足->结束
c3(no)->e // 条件3不满足->结束 

26.时序图

代码

1
2
3
4
5


sequence
A->>B: 你好
Note left of A: 我在左边     // 注释方向，只有左右，没有上下
Note right of B: 我在右边
B-->A: 很高兴认识你

27.生成侧边栏扩展

代码

注: 生成侧边栏一般是插入JS，再就是模板, 总体来说，很是麻烦，效果一般，不作详解。

作者仓库：i5ting_ztree_toc

END

Markdown是一种纯文本标记语言 ↩︎

文章目录