前言

学生时代在学习知识点的时候，会有记笔记的好习惯。忘性是人的一种属性，我们无法避免他们，每当我们最一个东西的理解很深刻的时候我们都应该把他们记录下来。作为刚入行半个月的程序员来说，写博客，文档是非常重要的习惯。作为一名前端开发，每天都在使用不同的框架写着不同的BUG，当我们很长一段时间后，再回来出现了同样的Bug，我们有需要去思考钻研。那么我们干嘛不把他记下来呢？

给大家分析一下我平时学习和记录的工具组合。

本文结构导图

一、Markdown

什么是Markdown

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

二、Markdown语法

1.标题

使用 # 号（#与内容中间有一个空格）

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

2.字体

加粗：要加粗的文字左右使用两个 * 号包裹

**内容**

斜体：要斜体的文字左右使用一个 * 号包裹

*内容*

斜体加粗要斜体加粗的文字左右使用三个 * 号包裹

***内容***

删除线：要删除线的文字左右分别用两个~~号包起来

~~内容~~

三.引用

在引用的文字前加>就可以了（> 与内容中间有一个空格）

> 这是应用内容

四.分隔符

三个及其以上的 - 与 * 即可

---
----
***
*****

5.图片

提示若图片不是线上图片，那么在为自己电脑上是看不到自己的图片的。

![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字，相当于对图片内容的解释。
图片title是图片的标题，当鼠标移到图片上时显示的内容。title可省略

6.超链接

[超链接名](超链接地址 "超链接title")
title可省略

7.列表

无需列表

- 列表内容
+ 列表内容
* 列表内容

注意：- + * 跟内容之间都要有一个空格

有序列表

- 数字 + 列表内容
+ 数字 + 列表内容
* 数字 + 列表内容

注意：- + * 跟数字之间都要有一个空格，内容与数字不用加。

8.表格

表头|表头|表头
-|:-:|-:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行

文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右

9.代码

单行代码
使用一个 ` 包裹代码内容

`单行代码`

多行代码
使用3个`即可。

```多行代码```

注意：````前可以写代码的类型

```jsx 多行代码 ```

三、推荐的Markdown工具

这里我推荐一款非常火的markdown编辑工具。typora点击这里下载即可，使用起来非常的舒服。

四、图片上传工具

为什么需要图片上传工具（图床），经常使用Markdown的人都知道的一大烦恼，就是把图片上传的线上。操作及其繁琐，并且还不一定能上传成功。

1.picgo简介

所谓图床工具，就是自动把本地图片转换成链接的一款工具，网络上有很多图床工具，就目前使用种类而言，PicGo 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云COS，又拍云，GitHub，阿里云OSS，SM.MS，imgur 等8种常用图床，功能强大，简单易用.且跨平台支持 Windows、macOS 和 Linux 系统，它的使用非常简单，只需先设置好图床网站 / 云存储服务的账号之后，用鼠标将图片拖放到 PicGo 主窗口的图片上传框，即可完成图片的上传并返回一个url链接到剪切板。