Markdown 语法快速入门

 2016年02月16日    198     声明


Markdown 是一种轻量级的「标记语言」,其语法目标是成为一种适用于网络、易读易写的语言。Markdown 的语法非常简单,常用的标记符号总共不超过十个,相对于HTML 标记语言来说,Markdown 是十分轻量的,学习成本也相对更低。Markdown 格式的文档以纯文本形式发布,它的语法由一些符号所组成,这些一目了然符号让我们更专注于文字的内容而不是排版和样式。


  1. 段落、标题、区块代码
  2. 修饰与强调
  3. 列表
  4. 链接
  5. 图片
  6. 代码


本文提供了一些Markdown 常用的语法及对应的HTML输出,旨在帮助人们快速了解和使用Markdown。

1. 段落、标题、区块代码

1.1 段落

段落:段落由连续的行句连接组成,一个以上连续的行句连接会被认为是一同一段落,而段落则是由空行(空白字符或tab)划分

如,对于以下Markdown文本:

每个连续行句
组成
一个段落


空格形成分段

其生成HTML如下:

<p>每个连续行句 组成 一个段落</p>
<p>空格形成分段<p>


1.2 标题

在HTML中,标题共分为6级,即H1H6。Markdown 提供了两种标题表现形式:

  • Setext形式:使用=表式高级别标题,使用-表示低级别标题
  • Atx形式:在行首插入1到6个#分别表示HTML中的H1H66级标题

如,使用Setext表示标题:

高级标题
=======
低级标题
-------

生成HTML如下:

<h1>高级标题</h1>
<h2>低级标题</h2>

而使用Atx表示标题:

#1级标题
##2级标题
###3级标题
####4级标题
#####5级标题
######6级标题

生成HTML如下:

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>


1.3 区块

Markdown 的区块标记参考了“email”的表现形式,使用'>'表示。如,对于如下Markdown标记:

>#区块的标题
>Markdown 的区块标记参考了“email”的表现形式,
>
>使用<code>'>'</code>表示

其,生成HTML如下:

<blockquote>
 <h1>区块的标题<h1>
 <p>Markdown 的区块标记参考了“email”的表现形式,</p>
 <p>使用'>'表示</p>
</blockquote>


2. 修饰与强调

Markdown 修改和强调使用*_表示

  • 修饰符:修饰符最终会生成HTML的em标记,其Markdown标记可以是*_
  • 强调符:强调符最终会生成HTML的strong标记,其Markdown标记可以是**__

对于如下一个Markdown 标记:

这是个修饰符*生成个em*
这也是个修饰符_生成个em_
这是个强调符**生成个strong**
这也是个强调符__生成个strong__

其,生成HTML如下:

这是个修饰符<em>生成个em</em>
这也是个修饰符<em>生成个em</em>
这是个强调符<strong>生成个strong</strong>
这也是个强调符<strong>生成个strong</strong>


3. 列表

3.1 无序列表ul

无序列列表其最终生成的HTML形式为<ul><li></li>…</ul>,无序列表使用星号*、加号+或减号-来做为列表的项目标记。

如,对于以下三种形式的Markdown 标记:

* 名称:__IT笔录__
* 域名:__itbilu.com__
+ 名称:__IT笔录__
+ 域名:__itbilu.com__
- 名称:__IT笔录__
- 域名:__itbilu.com__

其,生成HTML相同。如下:

<ul>
 <li>名称:<strong>IT笔录</strong> </li>
 <li>域名:<strong>itbilu.com</strong></li>
</ul>


3.2 有序列表ol

有序列列表其最终生成的HTML形式为<ol><li></li>…</ol>,有序列表使用数字和一个英文(半角).标记。如,对于以下一个有序列表:

1. IT笔录
2. itbilu.com

其,生成HTML如下:

<ol>
 <li>IT笔录</li>
 <li>itbilu.com</li>
</ol>

注意:如果需要在标记符和内容之间插入空行,那项目的内容会用 <p>包起来,也可以在标记符和内容之间多个段落,放入段浇需要在它前面缩排 4 个空白或 1 个 tab。


链接最终会生成HTML的<a>标签,Markdown 提供了两种生成链接的标记方式。

  • 行内式:格式为[标题](链接)
  • 参考式:也可以称做“引用式”,这种标记格式让我们可将链接定义为一个名称,之后可以在文件的其它位置定义链接内容

4.1 行内式

行内式链接标记是直接标题后面用括号标记链接地址。如,对于如下Markdown 标记:

这是一个链接 [IT笔录](http://itbilu.com)

生成HTML如下:

<p>这是一个链接 <a href="http://itbilu.com" rel="nofollow">IT笔录</a>

Markdown 也可以为链接添加一个title属性:

这是一个链接 [IT笔录](http://itbilu.com "IT笔录")

生成HTML如下:

<p>这是一个链接 <a href="http://itbilu.com" title="IT笔录" rel="nofollow">IT笔录</a>


4.2 参考式

参考式链接需要先定义一个名称,然后在定义链接的内容。如,对于如下Markdown 标记:

这是“IT笔录”的链接[IT笔录]
[IT笔录]:http://itbilu.com "IT笔录"

这是另一个“IT笔录”的链接[itbilu]
[itbilu]:http://itbilu.com "IT笔录"

生成HTML如下:

<p>这是另一个“IT笔录”的链接<a href="http://itbilu.com" title="IT笔录" rel="nofollow">IT笔录</a></p>

<p>这是另一个“IT笔录”的链接<a href="http://itbilu.com" title="IT笔录" rel="nofollow">itbilu</a></p>


5. 图片

Markdown 图片标记与链接类似,但它的前面要增加!标记。我们可以使用行内式:

这是一个图片 ![IT笔录](http://itbilu.com)

生成HTML如下:

<p>这是一个图片 <img src="http://itbilu.com" alt="IT笔录"></p>

也可以使用参考式:

这是一个图片 ![IT笔录]
[IT笔录]: http://itbilu.com "IT笔录"

生成HTML如下:

<p>这是一个图片 <img src="http://itbilu.com" alt="IT笔录"></p>


6. 代码

6.1 代码标记

在段落内要输出代码(<code>)标记,可以使用反引号`表示。而在段落内的&<>标记都会被转换为HTML的编码形式。

如,对于如下Markdown 标记:

这是个代码标记`code`

而&、<、>会被转义输出

生成HTML如下:

<p>这是个代码标记<code>code</code></p>

<p>而&、<、>会被转义输出</p>


6.2 代码块

Markdown 的代码块使用缩进来表示,即:其代码块会持续到没有缩进的那一行。代码块内的&<>标记都会被转换为HTML的编码形式输出。

如,对于如下Markdown 标记:

    <div>这是个代码块
    <div>

生成HTML如下:

<pre><div>这是个代码块
<div>
</pre>