让你的Markdown用起来得心应手

文字的发明和使用使得信息的保存和传递有了革命性的飞跃。随着信息的丰富和传递方式的革新，人们对文本提出了新的格式化的要求，以此来方便人们更舒适地获取信息。如此，HTML(HyperText Markup Language)作为一种超文本标记语言(markup language)应运而生，无数的网页从此有了主次分明，层次清晰的格式。如果将HTML比作一架重机枪，那么Markdown就是一把手枪，满足了主要的文本格式标记的需求，可是操作性却大大简化。秉承「易读易写」的宗旨，Markdown作为一种轻量级标记语言(lightweight markup language)，让无数的程序猿和文字工作者爱不释手。学习Markdown，投资短，见效快，提高生活品质立竿见影，那么还有什么阻止你不去学习。

有那么一小撮人，为了满足自己某个特定的需要，它们不甘妥协，走进小黑屋，点亮屏幕，一段指尖与智慧的狂舞后，皱紧的眉头终于舒展开来，随后露出满意的笑容。Linus Torvalds如此打造了Linux, Rasmus Lerdorf如此贡献出了PHP, John Gruber和Aaron Swartz如此开创了Markdown。Markdown的诞生就是因为这哥俩想要『使用一种易读易写的纯文本格式来编写文档，并且可以被转换成XHTML(或者HTML)文档』。2004年，Markdown横空出世，从此红遍大江南北。如今 Markdown深受程序猿所爱，并且已成了众多优秀工具的标配，比如Github, Stack Overflow，简书，为知笔记，etc。

原生的Markdown文本转换是使用Perl实现的，其语法吸收了众家之长，包括Setext，atx，Textile，reStructuredText，Grutatext，EtText以及最原始的邮件格式。原生的Markdown语法简洁明了(使用特殊标点符号来标记格式)并且同时支持HTML标签。之后不同编程语言实现的Markdown版本(Markdown解析器)也相继而生。不同的解析器对原生的Markdown语法进行了少许的扩展。其中较为流行的是用Ruby实现的版本kramdown。大名鼎鼎的GitHub就采用kramdown作为其Markdown的解析器(Starting May 1st 2016)。这里我们从原生的markdown语法介绍起，然后再来学习kramdown和github-flavored-markdown对原生语法进行的一些拓展。花上十分钟读读本文，没准你会爱上Markdown。再花点时间练一练，让你的markdown使用起来得心应手，从此写起文章来一气呵成。

1. 原生态Markdown标记语法

1.1 标题

Markdown通过在行首添加1-6个#符号来定义不同级别的标题，最多到六级标题。注意#后需要加一个空格。

书写格式如下：

#<空格>一级标题
##<空格>二级标题
###<空格>三级标题
######<空格>六级标题

解析效果如下：

一级标题

二级标题

三级标题

六级标题

另外一级标题和二级标题也可以使用双下划线和单下划线来实现。

书写格式如下：

一级标题
======

二级标题
------

解析效果如下：

一级标题

二级标题

1.2 加粗和斜体

markdown使用*和_来强调文本，使用一个*和_包围的文本会被转化为斜体，而用两个*和_包围的文本则会被转化成加粗。

书写格式如下：

*斜体文字*

_斜体文字_

**加粗文字**

__加粗文字__

解析效果如下：

斜体文字

加粗文字

1.3 段落和换行

Markdown中一个普通的段落不需要在首行缩进，直接开始写就是一个段落。当你需要换到另外一个段落时，那么需要在上一段的段尾添加一个或多个空白行。

书写格式如下：

开始第一段。。。写完第一段。
<空行>
开始第二段。。。写完第二段。

解析效果如下：

开始第一段。。。写完第一段。

开始第二段。。。写完第二段。

Markdown里回车后的文字默认是紧接上文的，如果你需要换行，那么需要在行尾添加两个以上的空格。

书写格式如下：

开始第一段。。。准备换行。<空格><空格>
另起一行。。。

解析效果如下（注意换行和换段落的效果区别）：

开始第一段。。。准备换行。
另起一行。。。

1.4 列表

Markdown支持无序列表和有序列表。无序列表可以使用*，+，-三者中任意符号来标记；有序列表则使用数字加.来标记。注意标记后面需要加上一个空格，有序列表的数字会被按顺序自动更正。

书写格式如下：

*<空格>红红红红红
*<空格>绿绿绿绿绿
*<空格>蓝蓝蓝蓝蓝

+<空格>红红红红红
+<空格>绿绿绿绿绿
+<空格>蓝蓝蓝蓝蓝

-<空格>红红红红红
-<空格>绿绿绿绿绿
-<空格>蓝蓝蓝蓝蓝

1.<空格>红红红红红
2.<空格>绿绿绿绿绿
3.<空格>蓝蓝蓝蓝蓝

2.<空格>红红红红红
3.<空格>绿绿绿绿绿
1.<空格>蓝蓝蓝蓝蓝

解析效果如下：

红红红红红
绿绿绿绿绿
蓝蓝蓝蓝蓝

红红红红红
绿绿绿绿绿
蓝蓝蓝蓝蓝

红红红红红
绿绿绿绿绿
蓝蓝蓝蓝蓝

红红红红红
绿绿绿绿绿
蓝蓝蓝蓝蓝
红红红红红
绿绿绿绿绿
蓝蓝蓝蓝蓝

注意，如果列表中的一项有多个段落，新的段落需要缩进4个空格或1个tab。

书写格式如下：

* 项目一，段落一
<空行>
<空格><空格><空格><空格>项目一，段落二  
    
* 项目二，段落一
<空行>
<空格><空格><空格><空格>项目二，段落二

解析效果如下：

项目一，段落一

项目一，段落二
项目二，段落一

项目二，段落二

1.5 引用

在段落前添加一个>符号即可将该段落标记为引用，注意>后需要添加一个空格。

书写格式如下：

><空格>某某大牛曾经说。。。<空格><空格>
某某大牛又说。。。

解析效果如下：

某某大牛曾经说。。。
某某大牛又说。。。

繁琐一点，你也可以在引用段落的每一行都加上>符号。并且>可以迭代使用，表示引用中的引用效果。

书写格式如下：

> 某A大牛曾经说。。。
>
> > 某B大牛曾经说。。。
>
> 某A大牛接着说。。。

解析效果如下：

某A大牛曾经说。。。

某B大牛曾经说。。。

某A大牛接着说。。。

1.6 分割线

直接上例子吧，如下几种方式都可以画出漂亮的分割线。

书写格式如下：

* * *

***

*****

- - -

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

解析效果如下：

1.7 插入链接

markdown文本中插入链接非常方便，有文内链接和引用链接两种方式。注意如果链接的是本地资源，则链接地址为当地资源的路径。

书写格式如下：

## 文内链接
这是一个文内链接的[例子](http://example.com/ "鼠标悬浮此处显示的标题")。

[这个](http://example.net/)链接在鼠标悬浮时没有标题。

[这个](/about/)链接是本地资源。

## 引用链接

这是一个引用链接的[例子][id]。

[id]: http://example.com/  "鼠标悬浮标题（可选）"

## 注意，这里的id没有大小写区分，如果省略id，则前面方括号的内容会被用作id。

我常用的网站包括[Google][1]，[Yahoo][2]和[MSN][3]。

[1]: http://google.com/        "Google"
[2]: http://search.yahoo.com/  "Yahoo Search"
[3]: http://search.msn.com/    "MSN Search"
  
## 也可以写成

我常用的网站包括[Google][]，[Yahoo][]和[MSN][]。

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

解析效果如下：

这是一个文内链接的例子。

这个链接在鼠标悬浮时没有标题。

这是一个引用链接的例子。

我常用的网站包括Google，Yahoo和MSN。

1.8 插入图片

插入图片和插入链接非常类似，只是在方括号前多一个!。

书写格式如下：

## 方法一

![markdown logo](http://upload-images.jianshu.io/upload_images/1787544-fff109c67ad3cba6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "图标1")

## 方法二

![markdown logo][id]

[id]: http://upload-images.jianshu.io/upload_images/1787544-fff109c67ad3cba6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "图标2"

解析效果如下：

markdown logo

1.9 插入代码

在文本中嵌入代码也非常简洁，只需要用反引号`将代码包围起来即可。

书写格式如下：


可以使用函数`print()`打印输出。

## 如果代码中需要加入反引号`号，则使用两个``加空格来包裹

这里就是一个反引号`` ` ``。

在代码里也可以保留反引号`` `print()` ``。

解析效果如下：

可以使用函数print()打印输出。

这里就是一个反引号`。

在代码里也可以保留反引号`print()`。

markdown中插入一整段代码快也非常方便，只需要将代码块的每一行缩进4个空格或一个tab。

书写格式如下：

代码如下:

<空格><空格><空格><空格>cat("hello world")
<空格><空格><空格><空格>cat("welcome to learn markdown")

解析效果如下：

代码如下:

cat("hello world")
cat("welcome to learn markdown")

1.10 其他

在markdown中将链接地址或邮箱地址用<>包围，则会被自动转换成可点击的链接。

书写格式如下：

<http://haoeric.com>

<haoeric0520@gmail.com>

解析效果如下：

http://haoeric.com

haoeric0520@gmail.com

如果需要避免文本中的符号被当做markdown标识符而发生不必要的格式转化，可以在符号前加\来避免。

书写格式如下：

\*不是斜体\*

解析效果如下：

*不是斜体*

markdown使用的特殊标识符总结如下：

\   backslash
`   backtick
*   asterisk
_   underscore
{}  curly braces
[]  square brackets
()  parentheses
#   hash mark
+   plus sign
-   minus sign (hyphen)
.   dot
!   exclamation mark

2 kramdown拓展

kramdown对原生的markdown加入了一些拓展，其中最重要的就是对表格的支持，其他主要的还包括定义，缩写和角标。

2.1 表格

表格的书写格式一目了然，还是很方便简洁的。

书写格式如下：

| 左对齐 | 中间对齐 | 右对齐 |
| :---   |  :---:   |   ---: |
| 左1    |  中1     |  右1   |
| 左2    |  中2     |  右3   |

解析效果如下：

左对齐	中间对齐	右对齐
左1	中1	右1
左2	中2	右3

2.2 定义

对专有词汇进行定义。

书写格式如下：

专有词汇1
: 解释1
: 解释2

专有词汇1
: 解释

解析效果如下：

专有词汇1
: 解释1
: 解释2

专有词汇2
: 解释

2.3 角标

不同于链接，这里的角标内容会被放在文末，点击可以实现跳转。

书写格式如下：

请参阅脚注1. [^1]

[^1]: 脚注1内容。

请参阅脚注2. [^2]

[^2]: 脚注2内容。

解析效果如下：

请参阅脚注1. ^[1]

请参阅脚注2. ^[2]

2.4 缩写

可以全局定义缩写，当鼠标悬浮缩写词时会显示缩写的全称。

书写格式如下：

下面我们一起来学习GFM。

*[GFM]: GitHub Flavored Markdown

解析效果如下：

下面我们一起来学习GFM。

*[GFM]: GitHub Flavored Markdown
*[HTML]: HyperText Markup Language

3. GitHub Flavored Markdown拓展

GFM取消了下划线作为强调字体的标识符，这样方便在文中自由使用_。同时，GFM会对文本中的链接进行自动识别，不需要使用<>来标记。另外GFM的几个重要拓展列举如下：

3.1 栅栏标记代码快

在GFM中，用户可以使用```包围代码来标记代码块。其实这也是kramdown的一个拓展，放在这里讲，避免重复。

书写格式如下：

```
function test() {
console.log("notice the blank line before this function?");
}
```

解析效果如下：

function test() {
  console.log("notice the blank line before this function?");
}

3.2 代码高亮

使用栅栏标记代码块的一个好处是可以标明代码的语种，然后实现代码的高亮。

书写格式如下：

```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```

解析效果如下：

require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

3.3 删除线

书写格式如下：

~~删除内容~~

解析效果如下：

~~删除内容~~

有关GFM的其他拓展，请查阅github-flavored-markdown。

4. HTML拓展

以上的语法基本可以满足我们大部分写作的需求。如果你还需要其他格式，那么不要忘了markdown本身是支持HTML标签的，这也就说明了markdown的强拓展性。以下列举一些常用的HTML标签用法：

4.1 下划线

书写格式如下：

<u>下划内容</u>

解析效果如下：

下划内容

4.2 上标

书写格式如下：

E = mc<sup>2</sup>

解析效果如下：

E = mc²

4.3 下标

书写格式如下：

Water: H<sub>2</sub>O

解析效果如下：

Water: H₂O

4.4 首行缩进

markdown的段落默认都是顶格写，如果硬要缩进可以通过如下方式实现。

书写格式如下：

## 缩进一个空格
 开始输入

## 缩进两个空格
 开始输入

解析效果如下：

开始输入

4.5 内部跳转

使用如下HTML标签，可以实现在文本内的跳转。在长篇的文章中这个功能非常有用。

书写格式如下：

## 设置跳转标签
点此[标签](#锚点)跳转。

## 点击以上标签则跳转至有如下代码的所在行
## 我将下行代码放在了行文的"参考资料"行上面，点击试一下
<a name="锚点" id="锚点"></a>

解析效果如下：

点此标签跳转

4.6 改变插入图片大小

markdown自身插入图片时不会改变图片大小，但是通过THML插入图片可以修改图片大小。

书写格式如下：

[站外图片上传中……(3)]

解析效果如下：

[站外图片上传中……(4)]

4.7 插入视频

视频不能直接加载，但可以使用照片加链接的形式来模拟，比如：

书写格式如下：

<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg" 
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>

解析效果如下：

或者用存markdown,但是不能调整图片大小：

书写格式如下：

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)

解析效果如下：

IMAGE ALT TEXT HERE

4. 参考资料

[1] markdown
[2] kramdown
[2] github markdown
[4] MarkDown使用小技巧
[5] 用Markdown写blog的常用操作
[6] worldhello:轻量级标记语言
[7] THE WORLD'S LARGEST WEB DEVELOPER SITE

脚注1内容。 ↩
脚注2内容。 ↩

最后编辑于：2017.12.04 02:45:11

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,378评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,356评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,702评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,259评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,263评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,036评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,349评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,979评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,469评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,938评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,059评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,703评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,257评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,262评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,485评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,501评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,792评论 2赞 345

让你的Markdown用起来得心应手

1. 原生态Markdown标记语法

1.1 标题

一级标题

二级标题

三级标题

六级标题

一级标题

二级标题

1.2 加粗和斜体

1.3 段落和换行

1.4 列表

1.5 引用

1.6 分割线

1.7 插入链接

1.8 插入图片

1.9 插入代码

1.10 其他

2 kramdown拓展

2.1 表格

2.2 定义

2.3 角标

2.4 缩写

3. GitHub Flavored Markdown拓展

3.1 栅栏标记代码快

3.2 代码高亮

3.3 删除线

4. HTML拓展

4.1 下划线

4.2 上标

4.3 下标

4.4 首行缩进

4.5 内部跳转

4.6 改变插入图片大小

4.7 插入视频

4. 参考资料

推荐阅读更多精彩内容