Markdown入门

为写作而生的超简单语言！

Markdown入门
发布：徐仁朝

目录

一、Markdown是什么

Markdown 是一种轻量级标记语言，它允许人们"使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档"。1.0.1版本发布于2004年12月，采用Perl编写。由于Markdown的易读易写，很多人用不同的编程语言实现了多个版本的解析器和生成器，wikipedia上有一份列表，有兴趣的可以去看看。

Markdown 的作者JohnGruber已经完全放弃了对markdown的维护，但是由于几大开源社区的大力推广而广受欢迎，也因此出现了一些不同 flavored markdown。Github 和 Stackoverflow 两个社区的版本是影响最大的。

简单来说，markdown 是一种轻量级的标记语言。

二、Markdown有什么卵用

在开源社区（github、开源中国git、conding.net）里面，我们创建项目的时候，代码仓库里默认有一个README.md（md不是妈的缩写）文件，而且90%以上的开源项目都会有.md的文件。

这个有什么用？
用它快速编写可以阅读的文档，例如写博客、写笔记、说明文档等等，效果和html的网页很像。

markdown 并不是为了取代 Html，因为根本取代不了

使用 Markdown 的优点

• 专注你的文字内容而不是排版样式，安心写作。
• 轻松的导出 HTML、PDF 和本身的 .md 文件。
• 纯文本内容，兼容所有的文本编辑器与字处理软件。
• 可读、直观、学习成本低。

第一次看见这个md文件的时候，不知道是什么鬼。用系统自带的编辑器打开后，发现里面写的是下面的玩意：

# [React](https://facebook.github.io/react/) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react) [![npm version](https://badge.fury.io/js/react.svg)](http://badge.fury.io/js/react)
React is a JavaScript library for building user interfaces.
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).

这个写的英文看不懂就算了，但是里面的# * []为啥要这样写啊？啥意思啊？

三、Markdown 语法的简要规则

1、标题

标题是每篇文章都需要也是最常用的格式，在 Markdown 中，如果一段文字被定义为标题，只要在这段文字前加 # 号即可。
栗子如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

```
//相对应的语法
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```

总共六级标题，建议在井号后加一个空格，这是最标准的 Markdown 语法。

2、列表

熟悉 HTML 的同学肯定知道有序列表与无序列表的区别，在 Markdown 下，列表的显示只需要在文字前加上 - 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3. 符号要和文字之间加上一个字符的空格。
栗子如下：

a、无序列表1

• 1
• 2
• 3

a、无序列表2

• 1
• 2
• 3

a、有序列表
1. 1
2. 2

**a、无序列表1**
* 1
* 2
* 3
**a、无序列表2**
**a、有序列表**
1.1
2.2
3.3

3、引用

需要引用一段其他地方的句子，就可以用引用的格式。
栗子如下：

引用：苍老师说：让你们看我拍的动作片，怪我喽！！！

> 引用：苍老师说：让你们看我拍的动作片，怪我喽！！！

4、图片与链接

插入链接与插入图片的语法很像，区别在一个 !号
图片为：![](){ImgCap}{/ImgCap}
链接为：[]()
插入图片的地址需要图床，这里推荐围脖图床修复计划 与 CloudApp 的服务，生成URL地址即可。
栗子如下：
网址：同程旅游
图片：

网址：[同程旅游](http://www.ly.com/)
图片：![img](http://ww4.sinaimg.cn/bmiddle/6253e854gw1eudwb8dxmbj20cs09l0t8.jpg)

5、粗体与斜体

Markdown 的粗体和斜体写法很简单，用两个 * 包含一段文本就是粗体的语法，用一个 * 包含一段文本就是斜体的语法。
栗子如下：
我是粗体，他是斜体

我是**粗体**，他是*斜体*

6、绘制表格

真心不推荐使用，直接截图，或者写成html的。太累了。
栗子如下：

| 项目        | 价格   |  数量  |
| --------    | -----: | :----: |
| 计算机      | \$1600  |   5    |
| 手机        | \$12    |   12   |
| 管线        | \$1     |  234   |

7、代码高亮

markdown中最喜欢的就是这个，推荐使用。需要在文章里优雅的引用代码框，在 Markdown下实现也非常简单，只需要用三个 ` 把中间的代码包裹起来。使用 tab 键即可缩进。
栗子如下：

<!--我是html代码和注释-->
<div id="main" style="height:400px"></div>

//javascript 代码和注释
var myChart=document.getElementById('main'),
    myChart.setOption({});
    window.onresize = myChart.resize;//ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，使用方可以根据自己的需求绑定关心的事件，主动调用resize达到自适应的效果

8、分割线

分割线的语法只需要三个 * 号
栗子如下：
我是三个*号生成的分割线

我是三个*号生成的分割线
***

9、流程图

我个人觉得，还是自己画图吧,因为实在记不得。

st=>start: Start
e=>end
op=>operation: My Operation
cond=>condition: Yes or No?
st->op->cond
cond(yes)->e
cond(no)->op

以及时序图:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

提示：想了解更多，请查看流程图语法以及时序图语法。

10、复选框

使用 - [ ] 和 - [x] 语法可以创建复选框，实现 todo-list 等功能。

• 已完成事项
• 待办事项1
• 待办
• 事项2

注意：目前支持尚不完全

四、相关推荐

1、markdown本地预览

• chrome浏览器可以安装markdown preview plus插件

2、工具

图床工具用来上传图片获取 URL 地址:

• Droplr
• Cloudapp
• ezShare for Mac
• 围脖图床修复计划

在线好用的Markdown工具:

• 马克飞象，专为印象笔记打造的Markdown编辑器，非常推荐(推荐)
• Cmd Markdown 编辑阅读器(推荐)
• MaHua 在线markdown编辑器

作业部落（cmd markdown）图标

icon-glass
icon-music
icon-search
icon-envelope-alt
icon-heart
icon-star
icon-star-empty
icon-user
icon-film
icon-th-large
icon-th
icon-th-list
icon-ok
icon-remove
icon-zoom-in
icon-zoom-out
icon-power-off
icon-off
icon-signal
icon-gear
icon-cog
icon-trash
icon-home
icon-file-alt
icon-time
icon-road
icon-download-alt
icon-download
icon-upload
icon-inbox
icon-play-circle
icon-rotate-right
icon-repeat
icon-refresh
icon-list-alt
icon-lock
icon-flag
icon-headphones
icon-volume-off
icon-volume-down
icon-volume-up
icon-qrcode
icon-barcode
icon-tag
icon-tags
icon-book
icon-bookmark
icon-print
icon-camera
icon-font
icon-bold
icon-italic
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
icon-list
icon-indent-left
icon-indent-right
icon-facetime-video
icon-picture
icon-pencil
icon-map-marker
icon-adjust
icon-tint
icon-edit
icon-share
icon-check
icon-move
icon-step-backward
icon-fast-backward
icon-backward
icon-play
icon-pause
icon-stop
icon-forward
icon-fast-forward
icon-step-forward
icon-eject
icon-chevron-left
icon-chevron-right
icon-plus-sign
icon-minus-sign
icon-remove-sign
icon-ok-sign
icon-question-sign
icon-info-sign
icon-screenshot
icon-remove-circle
icon-ok-circle
icon-ban-circle
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-arrow-down
icon-mail-forward
icon-share-alt
icon-resize-full
icon-resize-small
icon-plus
icon-minus
icon-asterisk
icon-exclamation-sign
icon-gift
icon-leaf
icon-fire
icon-eye-open
icon-eye-close
icon-warning-sign
icon-plane
icon-calendar
icon-random
icon-comment
icon-magnet
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
icon-folder-close
icon-folder-open
icon-resize-vertical
icon-resize-horizontal
icon-bar-chart
icon-twitter-sign
icon-facebook-sign
icon-camera-retro
icon-key
icon-gears
icon-cogs
icon-comments
icon-thumbs-up-alt
icon-thumbs-down-alt
icon-star-half
icon-heart-empty
icon-signout
icon-linkedin-sign
icon-pushpin
icon-external-link
icon-signin
icon-trophy
icon-github-sign
icon-upload-alt
icon-lemon
icon-phone
icon-unchecked
icon-check-empty
icon-bookmark-empty
icon-phone-sign
icon-twitter
icon-facebook
icon-github
icon-unlock
icon-credit-card
icon-rss
icon-hdd
icon-bullhorn
icon-bell
icon-certificate
icon-hand-right
icon-hand-left
icon-hand
icon-hand-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-circle-arrow-down
icon-globe
icon-wrench
icon-tasks
icon-filter
icon-briefcase
icon-fullscreen
icon-group
icon-link
icon-cloud
icon-beaker
icon-cut
icon-copy
icon-paperclip icon-paper-clip
icon-save
icon-sign-blank
icon-reorder
icon-list-ul
icon-list-ol
icon-strikethrough
icon-underline
icon-table
icon-magic
icon-truck
icon-pinterest
icon-pinterest-sign
icon-google-plus-sign
icon-google-plus
icon-money
icon-caret-down
icon-caret-up
icon-caret-left
icon-caret-right
icon-columns
icon-sort
icon-sort-down
icon-sort-up
icon-envelope
icon-linkedin
icon-rotate-left icon-undo
icon-legal
icon-dashboard
icon-comment-alt
icon-comments-alt
icon-bolt
icon-sitemap
icon-umbrella
icon-paste
icon-lightbulb
icon-exchange
icon-cloud-download
icon-cloud-upload
icon-user-md
icon-stethoscope
icon-suitcase
icon-bell-alt
icon-coffee
icon-food
icon-file-text-alt
icon-building
icon-hospital
icon-ambulance
icon-medkit
icon-fighter-jet
icon-beer
icon-h-sign
icon-plus-sign-alt
icon-double-angle-left
icon-double-angle-right
icon-double-angle-up
icon-double-angle-down
icon-angle-left
icon-angle-right
icon-angle-up
icon-angle
icon-desktop
icon-laptop
icon-tablet
icon-mobile-phone
icon-circle-blank
icon-quote-left