markdown 语法基础

参考：

链接

2中链接方法： inline 和 reference.

inline

1
2
3
This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Reference-style

  • 例子 
    1
2
3
4
    This is [an example][id] reference-style link.

也可以加一个空格
This is [an example] [id] reference-style link.

    文档的任意地方在定义下引用名指向的实际链接

    1
    [id]: http://example.com/  "Optional Title Here"

  • 另一个例子

    1
2
3
4
5
6
    I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"

    1
2
3
4
5
6
    I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

  • 省略引用名时，链接文本即引用名

    1
2
3
    [Google][]

[Google]: http://google.com/

  • 引用名可以包含空格

    1
2
    Visit [Daring Fireball][] for more information.
[Daring Fireball]: http://daringfireball.net/

  • 引用名的title支持多种界定符号：

    1
2
3
    [foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)

  • 链接也可以用尖括号括起来

    1
    [id]: <http://example.com/>  "Optional Title Here"

  • title 属性可以写到下一行，只要在属性之前添加空格或制表符，url很长的时候，这样写会清楚些。

    1
2
    [id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"

字体格式

粗体

<b>html粗体标记</b> 效果： html粗体标记.

**bold text** 效果： bold text

斜体

<i>html斜体标记</i> 效果： html斜体标记.

*italic text* 效果： italic text

_斜体_ 效果： 斜体

下划线

<u>Underlining content</u> 效果： Underlining content

<sub>

This text lays low and chills a bit.

<sup>

This text gets high above the clouds.

<mark>

Let’s mark this hint to give you a clue.

排版

列表

<ol> 有序列表
1
2
3
4
5
6
7
8
9
10
11
1. Ordered List
2. Second List Item
3. Third List Item
    4. Second Level First Item
    4. Second Level Second Item
    4. Second Level Third Item
        5. And a third level First Item
        5. And a third level Second Item
        5. And a third level Third Item
4. Fourth List Item
5. Fifth List Item

效果：

  1. Ordered List
  2. Second List Item
  3. Third List Item
    1. Second Level First Item
    2. Second Level Second Item
    3. Second Level Third Item
      1. And a third level First Item
      2. And a third level Second Item
      3. And a third level Third Item
  4. Fourth List Item
  5. Fifth List Item
跨段落的有序列表

关键是要用“空格”对其，序号是1-9的时候，用2个空格，序号到10及以上的时候，用一个空格。如下例。

注意，这个只对 kramdown-flavored Markdown ，其他 markdown 风格不一定有用。

<ul> 无序列表
1
2
3
4
5
6
7
8
9
10
11
- Unordered List
- Second List Item
- Third List Item
    + Second Level First Item
    + Second Level Second Item
    + Second Level Third Item
        * And a third level First Item
        * And a third level Second Item
        * And a third level Third Item
- Fourth List Item
- Fifth List Item

效果：

  • Unordered List
  • Second List Item
  • Third List Item
    • Second Level First Item
    • Second Level Second Item
    • Second Level Third Item
      • And a third level First Item
      • And a third level Second Item
      • And a third level Third Item
  • Fourth List Item
  • Fifth List Item

脚注

创建一个页面内跳转的连接，点击跳转到脚注说明的地方。

例如：

1
2
3
4
5
6
If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2]

... ...

[^1]: Find out more about Kramdown on <http://kramdown.gettalong.org/>
[^2]: Kramdown has an excellent documentation of all its features. Check out, on how to [footnotes](http://kramdown.gettalong.org/syntax.html#footnotes).

<dl> Definition Lists

1
2
3
4
5
Definition List
:   Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.

Beef ribs jowl swine porchetta
:   Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.

效果：

Definition List
Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.
Beef ribs jowl swine porchetta
Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.

<blockquote> Quotation

1
<blockquote>Everything happens for a reason. (Britney Spears)</blockquote>

效果：

Everything happens for a reason. (Britney Spears)

<blockquote> and <cite> together

1
2
> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
<cite>Mark Twain</cite>

效果：

Age is an issue of mind over matter. If you don’t mind, it doesn’t matter.
Mark Twain

突出显示

<dfn>

The <dfn> tag is a phrase tag. It defines a definition term.

<abbr>

The WHO was founded in 1948.

<kbd>

Copycats enjoy pressing CMD + c and CMD + v.

代码高亮

<code>

1
Some <code>code: lucida console</code> displayed.

效果：

Some code: lucida console displayed.

尖角符号 `

键盘上数字1左边的键，ESC下面的那个键

1
Some `code: lucida console` displayed.

效果：

Some code: lucida console displayed.

波浪号 ~

整段代码用3个波浪号括起来

~~~
<html>
    <head>
        <title>Code Blocks</title>
    </head>
    <body></body>
</html>
~~~

效果：

1
2
3
4
5
6
<html>
    <head>
        <title>Code Blocks</title>
    </head>
    <body></body>
</html>

表格

直接使用html语法

添加css class、ID及其他html属性

示例：添加css class、ID

1
2
#### A blue heading
{: .blue #blue-h}

生成

1
<h4 class="blue" id="blue-h">A blue heading</h4>

添加任意属性

1
2
#### A simple example
{: #custom-id style="margin-top:0"}

1
[CLICK ME][identifier]{: #custom-id onclick="myJsFunc();"}

使用 kramdown 的 markdown 语法生成目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
无序列表的目录

* TOC
{:toc}

有序列表的目录

1. TOC
{:toc}

带样式的目录

<div class="panel radius" markdown="1">
**Table of Contents**
{: #toc }
*  TOC
{:toc}
</div>