Markdown入门学习实录

为了能够更好地写项目的Readme，开始学习关于Markdown的知识

不知道为啥自己的Webstorm的readme.md不支持preview功能了，所以另外找了一个在线的能够及时看到效果的网站来编写readme文件。网站链接：http://mahua.jser.me

如果是使用Markdown的工具的话，mac电脑推荐使用Typora，是一款简洁易用不错的小工具。

 

1. 首先介绍一个最基础的就是关于标题字号。标题前加‘#’即可。几级标题就加几个‘#’，‘#’越多标题字号相应降低。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题 

这里需要注意：建议标题和‘#’之间留有一个空格。

 

2. 给文字加超链接：链接文字都是用 [方括号] 来标记，使用 (圆括号) 来把文字转成链接，[链接文字](链接网址)。

This is [an Example](http://example.com)

 

3. 标粗体或斜体：给文字左右分别加两个**代表粗体，加一个*代表斜体。

**apple**

*apple*

那如果想要同时，加粗又斜体的话，那自然就是左右分别三个*就可以了。

 

4. 换行符： <br /> 简简单单一个标签和HTML类似。

5. 插入图片：和加超链接类似，

This is an image 

 

6. 代码引入：有单行代码和多行代码两种情况。

（1）单行代码：使用`代码`即可。此时``中间的内容会有一个浅灰色的背景色。

`npm run build`

（2）多行代码：使用```代码```即可。和编译器里面注释类似。

```

代码块

```

 

7. 列表：这里分有序列表和无序列表。

（1）有序列表：使用数字➕.的形式。

1. one

2. two

3.  three

(2) 无序列表：使用 - 来表示。呈现出的就是缩进格式的小黑点。

- one

- two

- three 

有时候可能会嵌套使用有序列表和无序列表也是可以的。

 

8. 表格：表格也是一种常用的展示数据的形式。使用 ‘-’将表头和内容分开，默认标题栏居中对齐，内容居左对齐，例子如下所示。可以对对齐方式进行配置，-: 设置内容和标题栏居右对齐。:- 设置内容和标题栏居左对齐。:-: 设置内容和标题栏居中对齐。

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

需要注意的是：内容和|之间的多余空格会被忽略，每行第一个|和最后一个|可以省略，-的数量至少有一个。

 

9. 删除线：左右两边分别加两个~就可以了。

~~a~~

 10. 引用：对引用的文字前面加上>即可。可以嵌套使用多个>>

> 引用

>> 引用2

 

11. 分割线：标题下会自带一条分割线，如果要自己画分割线可以用三个或三个以上的*或-即可。

--- 

*** 

 

12. 流程图：使用一些特定的标示来画出流程图，以下是一个示例。

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

大概画流程图需要分两块，第一部分是定义元素，第二部分是定义元素之间的走向。

先来看定义元素，基本语法：

tag=>type: content:>url

tag是给这个元素定义的一个变量名，type是元素的类型，有以下几种可以选择：

• start # 开始

• end # 结束

• operation # 操作

• subroutine # 子程序

• condition # 判断条件

• inputoutput # 输入或产出

content就是在框中要写的内容，注意type后的冒号与文本之间一定要有个空格。url就是与元素所绑定的链接。

然后是定义元素的走向，基本语法就是：元素1->元素2->元素3

但是需要主要的是对于condition类型的元素，因为是判断条件，有yes/no两条路径，需要分别定义。

 

13. 锚点定位：和前端锚点定位一样。需要一下两步：

(1) 给需要加跳转的标题加a标签 

<a href='#id'>标题名</a>

(2) 跳到的位置加a标签

<a name='id'>定位位置</a>

这里需要注意的是：跳转的标题中href字段里有‘#’，而跳到的位置没有。

 

参考资料：

1. https://www.jianshu.com/p/q81RER

2. https://www.cnblogs.com/daheiniu/p/13224941.html

3. https://www.jianshu.com/p/191d1e21f7ed/