Markdown 语法整理

概述

Markdown 的目标是实现「易读易写」。

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

总之， Markdown 的语法全由一些符号所组成，这些符号经过精挑细选，其作用一目了然。比如：在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。Markdown 的区块引用看起来就真的像是引用一段文字，就像你曾在电子邮件中见过的那样。

---

标题

Code

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

Demo

注：h1最大，h6最小

---

分级标题

Code

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

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

Demo

---

TOC

Code

注：根据标题生成目录，兼容性一般

[TOC]

Demo

---

引用

Code

> hello world!

Demo

hello world!

Code-2 [多行式]

> hello world!
hello world!
hello world!

或者

> hello world!
hello world!
hello world!

Demo-2 [多行式]

结果相同

hello world!
hello world!
hello world!

Code-3 [多层嵌套]

> aaaaaaaaa

>> bbbbbbbbb

>>> cccccccccc

Demo-3 [多层嵌套]

aaaaaaaaa

bbbbbbbbb

cccccccccc

Code-4 [多层多个元素]

注：代码前 3个TAB

> 列表例子：
>
> 1.   这是第一行列表项。
> 2.   这是第二行列表项。
>
> 代码例子：
> 
>          var num = 0;
>          for (var i = 0; i < 5; i++) {
>               num+=i;
>           }
>           console.log(num);
>

Demo-4 [多层多个元素]

列表例子：

1. 这是第一行列表项。
2. 这是第二行列表项。

代码例子：

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

---

行内标记

Code

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

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

Demo

标记之外hello world标记之外

错误的代码

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

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

错误演示

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

---

代码块

注：与上行距离一空行

Code-1 [~~~]

注：用 \`\`\` 生成块

```html
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

Demo-1 [~~~]

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

Code-2 [Tab]

注： Tab 缩进

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

Demo-2 [Tab]

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

Code-3 [自定义语法]

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

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

Demo-3 [自定义语法]

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

支持的语言

名称	关键字
AppleScript	applescript
ActionScript 3.0	actionscript3 , as3
Shell	bash , shell
ColdFusion	coldfusion , cf
C	cpp , c
C#	c# , c-sharp , csharp
CSS	css
Delphi	delphi , pascal , pas
diff&patch	diff patch
Erlang	erl , erlang
Groovy	groovy
Java	java
JavaFX	jfx , javafx
JavaScript	js , jscript , javascript
Perl	perl , pl , Perl
PHP	php
text	text , plain
Python	py , python
Ruby	ruby , rails , ror , rb
SASS&SCSS	sass , scss
Scala	scala
SQL	sql
Visual Basic	vb , vbnet
XML	xml , xhtml , xslt , html
Objective C	objc , obj-c
F#	f# f-sharp , fsharp
R	r , s , splus
matlab	matlab
swift	swift
GO	go , golang

---

插入链接

Code-1 [内链式]

This is [an example](http://arae.cc/ "Title") inline link.
[This link](http://arae.cc/) has no title attribute.

Demo-1 [内链式]

This is an example inline link.
This link has no title attribute.

Code-2 [引用式]

[1]: http://arae.cc/
[2]: http://arae.cc/  "Optional Title Here"
[3]: http://arae.cc/  (Optional Title Here)
[4]: <http://arae.cc/>  "Optional Title Here"
[example]: http://arae.cc/
[example-1]: http://arae.cc/
[example-2]: http://arae.cc/  "Optional Title Here [example-2]"

Demo-2 [引用式]

演示	调用方式
example 1	[example 1] [1]
example 2	[example 2] [2]
example 3	[example 3] [3]
example 4	[example 4] [4]
example	[example] []
example-1	[example-1] []
example-2	[example-2] []

---

插入图片

Code-1 [内链式]

![](/01.png)
![](/01.png "描述")
![Alt text](/01.png "描述")

Demo-1 [内链式]

Code-2 [引用式]

![name][01]
[01]: /01.png "Demo"

Demo-2 [引用式]

---

视频插入

Markdown 语法是不支持直接插入视频的
普遍的做法是 插入HTML的 iframe 框架，通过网站自带的分享功能获取，如果没有可以尝试第二种方法
第二是伪造播放界面，实质是插入视频图片，然后通过点击跳转到相关页面
注：多数第三方平台不支持插入<iframe>视频\

---

列表

Code-1 [有序]

注：.后 保持空格

1. one
2. two
3. three

Demo-1 [有序]

1. one
2. two
3. three

Code-2 [无序]

* one
* two
* three

Demo-2 [无序]

• one
• two
• three

Code-3 [嵌套]

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

Demo-3 [嵌套]

1. one
2. one-1
3. two-2
4. two

• two-1
• two-2

Code-4 [嵌套代码块]

注：换行+两个 Tab

* one

        var a = 10;     // 与上行保持空行并 递进缩进
* two
        var b = 20;     // 与上行保持空行并 递进缩进

Demo-4 [嵌套代码块]

• one

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

• two
  var b = 20; // 与上行保持空行并 递进缩进

Code-5 [嵌套引用]

注：换行+两个 Tab

*   one

    > one
    > two

Demo-5 [嵌套引用]

• one

one
two

---

任务列表

Code-1 [普通]

* [ ] a task list item
* [ ] list syntax required
* [ ] incomplete
* [x] completed

Demo-1 [普通]

• [ ] a task list item
• [ ] list syntax required
• [ ] incomplete
• [x] completed

---

表格

Code-1 [普通]

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

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

|    a    |       b       |      c     |
|---------|---------------|------------|
|  左对齐 |     左对齐     |   左对齐   |

Demo-1 [普通]

a	b	c
居中	左对齐	右对齐

a	b	c
左对齐	左对齐	左对齐

Code-2 [简约写法]

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

Demo-2 [简约写法]

a	b	c
居中	左对齐	右对齐

---

内嵌CSS样式

Code

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

Demo

内联样式

---

语义标记

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

---

语义标签

描述	效果	代码
斜体	斜体	斜体
加粗	加粗	加粗
强调	强调	强调
上标	Za	Za
下标	Za	Za
键代码	Ctrl	Ctrl
换行

---

分隔符

Code

注：最少三个 --- 或 *** 或 * * * 你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。

* * *

***

*****

- - -

---------------------------------------

Demo

---

---

---

---

---

Demo end

---

自动链接

Code

Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>;包起来， Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样

<http://arae.cc/>
<example@arae.cc>

Demo

http://arae.cc/
example@arae.cc

---