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:左通知
显示：
时序图.png
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
显示：
流程图.png
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: Yesor 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 -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
__ ** 这个是实现效果，快上手试试吧：**__
Markdown高阶流程图.png
5.数学公式
Markdown对数学公式的支持也很完美呢，可惜我是个学渣，在这里就不花时间介绍了，学生党可以百度下
好了，学习了以上的内容，你基本就可以写出一篇漂亮的博客或者论文了，行动去吧
