超好用的Markdown语法

223 阅读6分钟

介绍

Markdown是一种轻量级标记语言,排版语法简洁,让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档,可导出 HTML、PDF 以及本身的 .md 格式的文件。

如何使用

标题 #

创建标题需要在文字前添加井号(#)和一个空格,#的数量代表了标题的等级,1~6级标题分别对应###,··· ,######;

  1. # 我是一级标题

我是一级标题

  1. ## 我是二级标题

我是二级标题

  1. ### 我是三级标题

我是三级标题

  1. #### 我是四级标题

我是四级标题

  1. ##### 我是五级标题
我是五级标题
  1. ###### 我是六级标题
我是六级标题

注意:

#后面跟一个空格,在有些解析器中不带空格会把#当做文本内容的一部分

段落

我是一个段落

#空白行

我又是一个段落

注意:

段落前不要加空格或制表符,会存在部分解析器无法解析的情况。

段落其实在markdown本身没有什么特殊的效果,只有在生成HTML时,会把这两个段落分别用

标签包裹,在需要生成HTML的文档中需要注意区分。

<p>我是一个段落</p>
<p>我又是一个段落</p>

换行

与段落基本相似,没有什么特殊效果,只是在转HTML时会添加<br/>标签,使用时在需要换行的地方添加两个以上的空格再回车。

我是一句话

我也是一句话

<p>
  我是一句话
  <br/>
  我也是一句话
</p>

粗体(**)

使用两个星号**包裹需要加粗的字体

**粗体** 粗体

我**要加**粗要加

斜体(*)

使用一个星号(*)包裹,包裹的字即可倾斜

*斜体* 斜体

我*就是*斜体就是斜体

这个时候有的小伙伴可能就要问了,我既要加粗又要倾斜怎么办,能怎么办凉拌,开玩笑,当然是三个星号(***)啦

我就是***又要加粗***又要倾斜 我就是又要加粗又要倾斜

引用(>)

要实现引用效果,只要在段落前加一个>和一个空格就好了

> 我是一个引用段落

我是一个引用的段落

当然它还可以嵌套引用,俗称套娃

> 我是一个正常的段落引用
>> 我是一个套娃的引用
>>> 我是套了两层娃的引用

我是一个正常的段落引用

我是一个套娃的引用

我是套了两层娃的引用

不仅可以套娃,还可以渲染其他元素

> - 我是一个列表
> ## 我是二级标题
> **我加粗了**啦啦啦
  • 我是一个列表

我是二级标题

我加粗了啦啦啦

有序列表(1.)

创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点和一个空格。数字不必按数学顺序排列,但是列表应当以数字 1 起始。

1. 我是一个有序列表
2. 我也是一个有序列表
4. 一个有序列表
  1. 我是一个有序列表

  2. 我也是一个有序列表

  3. 一个有序列表

无序列表(-)

无序列表只需要在每一个列表前,添加一个短横线-和一个空格即可,创建多级列表只需要在-前添加一个缩进(tab)即可,也可以嵌套其它的语法结构

- 无序列表1
- 无序列表**2**
- 无序列表3
	- 无序列表*3.1*
	- 无序列表***3.2***
- 无序列表4
  • 无序列表1
  • 无序列表2
  • 无序列表3
    • 无序列表3.1
    • 无序列表3.2
  • 无序列表4

待办列表(- [x])

待办列表会创建一个带有选择框的项目列表,创建待办列表需要短横线-加中括号[ ],短横线中括号之间需要添加空格,中括号与列表间也需要用空格隔开,中括号中添加x[x]表示选择框选中

待办列表只有部分markdown解析器支持

- [ ] 6:30起床
- [x] 吃饭
- [ ] 改10个bug
  • 6:30起床
  • 吃饭
  • 改10个bug

代码块(`` `)

使用`` `包裹的内容会被认为是一个代码块,包裹的内容中包含反引号则需要两个反引号转义

`我是一个代码块`
``我是一个`个`代码块``

我是一个代码块 我是一个`个`代码块

下面向各位同学介绍一种围栏式代码块,需要使用三个反引号包裹,反引号后添加代码块语言,可以使代码高亮

```javascript
const obj = {
	name:'虫洞空间',
	age:23,
	sex:'男'
}
```

渲染效果如下

const obj = {
	name:'虫洞空间',
	age:23,
	sex:'男'
}

分割线(----)

分割线只需要在单独一行上试用版三个及以上短横线就可表示分割线

上部分内容

----

下部分内容

上部分内容


下部分内容

短横线上下尽量空一行,有些解析器不兼容直接写的形式

删除线(~~)

~~包裹要删除的文本即可

~~删除的文本~~ 删除的文本

我~~要删~~除线要删除线

表格

你一定想不到它居然支持表格,哈哈哈,它真的支持,接下来由俺向大家介绍markdown表格。

首先可以使用三个及以上短横线-----设置设置每一列的标题,其次可以使用竖线|充当边线,接下来展示下效果

| 序号 | 姓名 | 性别 |
| ---- | ---- | ---- |
| 1 | 虫洞空间 | 男 |
| 2 | 李清照 | 女 |
| 3 | 李白 | 男 |
序号姓名性别
1虫洞空间
2李清照
3李白

当然对齐方式那肯定是表格必备的,在短横线两次添加冒号:可表示对齐方式,:----左对齐,----:右对齐,:----:居中对齐

| 序号 | 姓名 | 性别 |
| :---- | :----: | ----: |
| 1 | 虫洞空间 ||
| 2 | 李清照 ||
| 3 | 李白 ||
序号姓名性别
1虫洞空间
2李清照
3李白

可以在表格中设置文本格式。例如,您可以添加链接,代码(仅反引号(```)中的单词或短语,而不是代码块)和粗体、斜体。不能添加标题,块引用,列表,水平规则,图像或HTML标签。

使用短横线-和竖线|创建表可能很麻烦。为了加快该过程,请尝试使用Markdown Tables Generator。使用图形界面构建表,然后将生成的Markdown格式的文本复制到文件中。

链接

中括号中放链接文本,小括号中放置链接地址,空一格可添加链接Title

我要去[掘金](https://juejin.cn "掘金1")

我要去掘金

使用尖角号<>包裹网址或邮箱可以快速的变为链接

<https://juejin.cn>
<test@163.com>

juejin.cn test@163.com

链接也可以加粗、倾斜、可以放到代码块、引用中

图片

说完链接后图片就变得简单了,只需要在中括号前放置一个感叹号!, 链接地址变为图片路径即可

![俺是一张图片](https://p6-passport.byteacctimg.com/img/user-avatar/13db44bbdbb847f3ed81e6ee42585257~180x180.awebp? "我的头像小礼子")

俺是一张图片

有的童靴可能会问,中括号里写的内容有什么用呢!这你就有所不知了,总之,社恐说不明白,算了,我还是直接上代码吧。HTML代码:<img src="图片路径" alt="俺是一张图片" title="我的头像小礼子" />

还有就是如何给这个图片加上链接呢!听俺细细讲来,不就是套娃,图片外面加上链接语法就行了,演示

[![俺是一张图片](https://p6-passport.byteacctimg.com/img/user-avatar/13db44bbdbb847f3ed81e6ee42585257~180x180.awebp? "我的头像小礼子")](https://juejin.cn/user/2388553562328269)

俺是一张图片

不相信可以点一下试试

写在最后

第一次写文章 🫡🫡🫡

欢迎大佬们补充指正 👻👻👻

最近太爱Markdown了,离不开它了😍😍😍

下一篇文章打算写一下Mermaid的使用 🚀🚀🚀

Mermaid可以用来在Markdown文档中画:饼状图、序列图、流程图、甘特图、类图、状态图等