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