MarkDown使用教程(In Atom)

程序猿都爱写博客,在写博客的过程中,大量运用的就是MarkDown语法了。MarkDown不只是用来写博客,日常生活中的感悟、工作中的心得体会、项目任务安排等等大篇幅的文章都可以用MarkDown来迅速的完成具有一定显示效果的文本。

1. MarkDown的编写工具

工欲善其事,必先利其器,要学习MarkDown,编写工具是必不可少的。

其实严格来说,MarkDown没有专门的编写工具,通过简单的文本编辑器即可编写MarkDown文本,比如Windows的记事本。但简单的文本编辑器功能欠缺,没有高亮的文字表现,更没有文本效果可言,就像没有人用记事本写代码一样,最起码也得用个Edit Plus

笔者菜鸟一枚,最近开始接触MarkDown,挑选的编辑器是AtomGitHub出品的简洁强大的编辑器,插件众多,支持的语言也比较多,也是一个不错的前端开发编辑器。

1.1 simplified-chinese-menu中文插件

使用Atom时,首先对满屏的英文就有点抗拒,虽然写程序都用的英文,但对一些菜单、提示语还是更喜欢中文。

simplified-chinese-menu这个插件基本将Atom里的各个菜单及提示语做到了汉化,瑕疵比较少,Atom装上这个插件,新手用起来方便多了。

1.2 markdown-scroll-sync同步滚动插件

markdown-scroll-sync同步滚动插件可以让预览与文本保持同步,减少查看预览的时间,确实是更方便了一些。

1.3 markdown-table-editor表格编辑插件

MarkDown在编写表格时稍微有些吃力,空格、对齐什么的,手敲太慢了有木有!!!markdown-table-editor表格编辑插件,让表格的编写更简单,你值得拥有。

2. MarkDown的基础语法

如果不算扩展,Markdown的语法绝对简单到让你爱不释手!Markdown语法分为如下几大部分:

标题 段落 引用 代码块 强调 列表 分割线 链接 图片 表格 流程图

2.1 标题

利用#标识标题,最对可以标识六级标题,#是一级标题,字体最大,######是六级标题,字体最小,示例如下:

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

效果如下:
在这里插入图片描述

2.2 段落

段落,在word中以回车换行来标识,而在md中需要一行空行进行分割两个段落,同一个段落中的多个空格、tab、回车符将被删减为一个空格(部分展示md的浏览器中,回车符可以表现为段内换行),在段落中允许存在换行,使用方式为两个以上空格加回车符,示例如下:

这是段落一,下面是一行空行。

这是段落二,这是一个空格 ,这是五个空格     ,这是两个tab   ,这是一个回车符
,下面将用两个空格加回车进行段落内换行  
换行完成,还是段落二。

这是段落三。

效果如下:

这是段落一,下面是一行空行。

这是段落二,这是一个空格 ,这是五个空格 ,这是两个tab ,这是一个回车符
,下面将用两个空格加回车进行段落内换行
换行完成,还是段落二。

这是段落三。

2.3 引用

md中使用>来标识一个段落的引用,引用可以使用多个>进行嵌套,示例如下:

>这里是引用的段落
>>这里是一层嵌套的引用
>>>这里是两层嵌套的引用

效果如下:

这里是引用的段落

这里是一层嵌套的引用

这里是两层嵌套的引用

2.4 代码块

作为程序猿,代码在博客中必不可少,md中对代码块是有三种标识方式的。第一中是行内代码标识,用一对反引号来包裹几个字符,效果有些类似软件中常见的标签。第二种是在行前添加四个空格来标识一行代码,但此行前一行只能为空行或者代码块。第三种是使用一对三个反引号包裹一大段文字,可以标识一段代码,在三个反引号后可以加语言名称来达到关键字高亮效果。(PS:反引号在键盘左上角Esc按钮下方,第一次用时笔者还以为是单引号)示例如下:

这里有一个行内代码`code`,下面有两行代码:

    a line codes
    a line codes

下面有一段代码:
(```)
code and code and code
code and code and code
(```)

下面有一段Java代码:
(```java)
public class Hello{
  public static void main (String[] args) {
    System.out.println("Hello world !");
  }
}
(```)

注:为了防止代码块标识符被转译,笔者在三个反引号前后加了括号,使用时应去除括号。

效果如下:

这里有一个行内代码code,下面有两行代码:

a line codes
a line codes

下面有一段代码:

code and code and code
code and code and code

下面有一段Java代码:

public class Hello{
  public static void main (String[] args) {
    System.out.println("Hello world !");
  }
}

2.5 强调

强调效果有粗体和斜体两种,一对*符号包裹的字符会显示为斜体,而一对**包裹的字符会显示为粗体,示例如下:

这是*斜体*,这是**粗体**

效果如下:

这是斜体,这是粗体

2.6 列表

列表的编写相当方便,无序列表只需在行前加+/-/*符号加空格即可,有序列表则在行前加1.等序号加空格即可,列表内容加入[ ][x]可用来标识待办事项,示例如下:

+ 无序列表
- 无序列表
* 无序列表

1. 有序列表
2. 有序列表
3. 有序列表

* [ ] 待办1
* [x] 待办2
1. [ ] 待办3
2. [x] 待办4

效果如下:

  • 无序列表
  • 无序列表
  • 无序列表
  1. 有序列表
  2. 有序列表
  3. 有序列表

2.7 分割线

分割线在各个浏览器的显示形式都有所不同,使用三个*/-/_均可以实现一根分割线,示例如下:

***
---
___

效果如下:




2.8 链接

在md中想要跳转到某个外链,可以使用两种方式完成,第一种是md语法[超链接名](超链接地址 "超链接title")title可加可不加,这种方式可能无法在当前标签页中打开网址,第二种是使用html中的<a>标签,可以指定target来控制网址打开方式。示例如下:

[百度](http://www.baidu.com/ "百度一下")

<a href="http://www.baidu.com/" target="_blank">百度</a>

效果如下:

百度

百度

2.9 图片

图片的使用方式有些类似链接,在链接的格式前方加!即可,即![图片名](图片地址),示例如下:

![github头像](https://github.com/fluidicon.png)

效果如下:

在这里插入图片描述

2.10 表格

常常在文章中需要使用表格来罗列事项、比对事物,md支持了表格的简单形式,使用方式即使用|-符号进行组合,示例如下:

|   表头一   |   表头二   |
| --------- | --------- |
| 表格内容一 | 表格内容二 |
| 表格内容三 | 表格内容四 |

注:对齐居中等不需要太注意

效果如下:

表头一 表头二
表格内容一 表格内容二
表格内容三 表格内容四

2.11 流程图

markdown本身并不能直接转换流程图,但可以通过插件来完成,感兴趣的童鞋可以了解一下。不过笔者看来在markdown里写流程图还是比较麻烦的,简单的还好,复杂一点的就有点烧脑了。

posted @ 2020-11-11 19:34  coder-ice  阅读(440)  评论(0编辑  收藏  举报