Markdown的简单上手教程

背景

一直以来都是使用的word和各种文本编辑器，我的习惯一般都是摘取各部分的信息然后糅杂在一块，所以后期整理一直是我一大头疼的地方，直到我接触了markdown之后，才发现，原来排版可以如此轻松写意且优美自然！

原因

其实作为一个程序员来说，我是相当不合格的，常常不会太想接触新鲜的知识，总是想着够用即可，Markdown是我求变的第一步，所以，做一个简单的笔记吧，相信以后的路也会更好。

笔记

其实markdown的宗旨是为了让编写作者摆脱排版的烦扰而专注于写作本身，原理其实就是实现了一个便捷的转HTML标签的途径，所以，如果你了解过HTML语言的话，学起Markdown来应该是轻车熟路，但是Markdown也提供了很多优秀的基于js的实现，比如你可以很方便的写出数学公式和时序图、流程图等，好了，应用是检验真理的唯一标准，上手学习并练习下吧。

---

1.文本基础

这里是一大块的，只要记住下面这张表格，然后自己上手练习下即可。

内容	表示	说明
斜体	*斜体*或者_斜体_	就是<em>标签，推荐使用*来表示斜体
粗体	**粗体**或者__粗体__	就是<strong>标签，依然推荐使用*来表示，比较直观
删除线	删除线	就是<s>标签
标题	#或者##~###### 或者 标题下面添加---为一级，===为二级	推荐使用#~######，就是<h1>~<h6>
引用	使用>来表示引用	类似HTML中的<q>或者<blockquote>，不过Markdown的格式更漂亮，如果要在引用里面嵌套引用，只需要多个>即可
代码	行内代码使用`来表示，多行代码使用```来表示	分别对应HTML中的<code>和<span>，还可以在多行代码的```css后面添加代码的说明,如加上css等表示代码的品种
无序列表	* - +都可以表示无序列表	对应<ul>标签，表示多层列表，只要第二层缩进4个空格即可
有序列表	1. 2. 或者 1. *	对应<ol>标签，表示多层列表，只要第二层缩进4个空格即可
超链接	[链接](地址 "说明")	相当于<a href="地址" title="说明">链接</>
图片		相当于<img src="地址" title="说明" alt="图片失败说明">
引用	图片和超链接可以使用引用，先定义变量[变量]: 地址 "说明"，然后引用 [链接][变量],然后	就相当于[链接](地址 "说明")
目录	使用[toc]就可以在当前位置插入一个目录	这些目录是根据标题生成的
脚注	[^变量]: 脚注说明,然后在需要用到脚注的地方[^变量]引用即可	遵循先定义后使用的原则，可以参考引用

2.表格

表格其实在Markdown里面的表示算麻烦的，不过好像确实也没有想出其它比较好的实现方式
使用|来抽象的表示表格的框，使用:来进行对齐设置
这是一个表格的源码

|内容居左|内容居中|内容居右|
|:----|:----:|----:|
|A|A|A|
|B|B|B|

表现形式如下

内容居左	内容居中	内容居右
A	A	A
B	B	B

3.时序图

Markdown中的时序图和流程图的写法是我比价喜欢的，又可以扔掉一些复杂且重量级的工具了
你需要做的就是在```后面添加sequence来表示这段代码是一个时序图即可！
直接上代码，简书好像不支持时序图和流程图，而CSDN博客做的就比较好

title: 时序图例子
A->B: 实线实箭头
B-->C: 虚线实箭头
C->>C: 实线虚箭头
note right of C: 自通知
note over B,C:横跨通知
C->A:长通知
note left of A:左通知

显示：

4.流程图

流程图跟时序图差不多，遵循先定义再写流程图即可，掌握四种表示类型：start,end,condition,operation
你需要做的就是在```后面添加flow来表示这段代码是一个流程图即可！
上代码：

start=>start: 开始
isLogin=>condition: 是否登录
login=>operation: 登录
view=>operation: 浏览
end=>end: 结束

start->isLogin
isLogin(no)->login->view
isLogin(yes)->view
view->end

显示：

---

0408更新
学习了Markdown的流程图之后，总觉得少点什么，但是百度之后的各种介绍文章也都大同小异，于是直接找上了老外的github地址 flowchart.js，Markdown的流程图就是基于这个开源的js实现的，奈何实在是英文水平有限，又懒的看js内部的各种火星文，偷瞄了一眼作者在example 中的例子，发现了不少新东西，于是明白了一个道理，学东西都要学源头的，看国内文章都是管中窥豹，不能学的全部

OK，以下结合这个例子来说明下：

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

上面的这段Markdown流程图代码可以看做是一种进阶版流程图
type类型由原来的四种增加到了六种，这六种分别是

• start 表示开始，以椭圆形表示
• condition 表示条件，以菱形四边形表示
• operation 表示操作，以矩形形表示
• subroutine 表示子程序，以三格矩形表示，这个就是多任务分支的一种形式
• inputoutput 表示输入输出流，以平行四边形形表示
• end 表示结束，以椭圆形表示

然后各个类型的type都可以用()来表示流程的走向

• right 向右
• left 向左
• up 向上
• down 向下，这个是默认选项

元素样式：使用| type来表示，目前有七种样式

• ‘past’ : { ‘fill’ : ‘#CCCCCC’, ‘font-size’ : 12},
• ‘current’ : {‘fill’ : ‘yellow’, ‘font-color’ : ‘red’, ‘font-weight’ : ‘bold’},
• ‘future’ : { ‘fill’ : ‘#FFFF99’},
• ‘request’ : { ‘fill’ : ‘blue’},
• ‘invalid’: {‘fill’ : ‘#444444’},
• ‘approved’ : { ‘fill’ : ‘#58C4A3’, ‘font-size’ : 12, ‘yes-text’ : ‘APPROVED’, ‘no-text’ : ‘n/a’ },
• ‘rejected’ : { ‘fill’ : ‘#C45879’, ‘font-size’ : 12, ‘yes-text’ : ‘n/a’, ‘no-text’ : ‘REJECTED’ }

使用:>地址[打开方式]来跟流块内的文字绑上链接,打开方式跟HTML中一致，如下：

• _blank – 在新窗口中打开链接
• _parent – 在父窗体中打开链接
• _self – 在当前窗体打开链接,此为默认值
• _top – 在当前窗体打开链接，并替换当前的整个窗体(框架页)

_ ** 这个是实现效果，快上手试试吧：**_

---

5.数学公式

Markdown对数学公式的支持也很完美呢，可惜我是个学渣，在这里就不花时间介绍了，学生党可以百度下~~

---

好了，学习了以上的内容，你基本就可以写出一篇漂亮的博客或者论文了，行动去吧