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最小

Demo


分级标题

Code

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

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

Demo

Demo


TOC

Code

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

[TOC]

Demo

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);

支持的语言

名称关键字
AppleScriptapplescript
ActionScript 3.0actionscript3 , as3
Shellbash , shell
ColdFusioncoldfusion , cf
Ccpp , c
C#c# , c-sharp , csharp
CSScss
Delphidelphi , pascal , pas
diff&patchdiff patch
Erlangerl , erlang
Groovygroovy
Javajava
JavaFXjfx , javafx
JavaScriptjs , jscript , javascript
Perlperl , pl , Perl
PHPphp
texttext , plain
Pythonpy , python
Rubyruby , rails , ror , rb
SASS&SCSSsass , scss
Scalascala
SQLsql
Visual Basicvb , vbnet
XMLxml , xhtml , xslt , html
Objective Cobjc , obj-c
F#f# f-sharp , fsharp
Rr , s , splus
matlabmatlab
swiftswift
GOgo , 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 [内链式]

Demo

Code-2 [引用式]

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

Demo-2 [引用式]

Demo


视频插入

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
    1. one-1
    2. two-2
  2. 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 [普通]


表格

Code-1 [普通]

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

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

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

Demo-1 [普通]

abc
居中左对齐右对齐
abc
左对齐左对齐左对齐

Code-2 [简约写法]

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

Demo-2 [简约写法]

abc
居中左对齐右对齐

内嵌CSS样式

Code

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

Demo

内联样式


语义标记

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

语义标签

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

分隔符

Code

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

* * *

***

*****

- - -

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

Demo






Demo end


自动链接

Code

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

<http://arae.cc/>
<[email protected]>

Demo

http://arae.cc/
[email protected]


评论功能被我吃了。