认识 Markdown 语法

[mengtuifrontend]

认识 Markdown 语法

在介绍 Markdown 之前，我们先来看一下同样是标记语言的，广为人知的，万众瞩目的 HTML。

HTML 的全称是超文本标记语言 (Hypertext Markup Language)，它以标记表示区块，可以承载文本、图片、流媒体等介质。一段普通的 HTML 段落，看起来是这样的：

<p>请继续往下看，千万不要<a href="http://xiaohuangwang.com" >离开</a>哦。</p>

在非技术同学的眼里，虽然也能看得懂这段代码大致表达的意思，但是还是缺少一些可读性。所以在准备写一篇博客时，常见的是从 word 编写完后，将样式带进富文本编辑器中，而不是打开源码按钮直接进行编辑，因为大多数人对 HTML 还是觉得难以下手。针对这种情况，有一种更简单的方式可以推荐给这类人群，那就是 Markdown。同样实现上面的段落，Markdown 的语法看起来是这样的：

请继续往下看，千万不要[离开](http://xiaohuangwang.com)哦。

Markdown 就是这么简洁！通常我们在 Github 上写 issue、readme、comment 等时也都会用到 Markdown，下面我们来学习一下它的语法。

语法

Markdown 的衍生版本众多，这里我们仅介绍 Github 中使用的语法 :bowtie: 。

标题

 # This is an <h1> tag
 ## This is an <h2> tag
 ###### This is an <h6> tag

效果

This is an <h1> tag

This is an <h2> tag

This is an <h6> tag

字体样式

 *一个星号包裹是斜体*
 _一个下划线包裹也是斜体_
 **两个星号包裹是粗体**
 __两个下划线包裹也是粗体__
 ~~两个飘就是中划线了哦~~

效果 一个星号包裹是斜体 一个下划线包裹也是斜体 两个星号包裹是粗体 两个下划线包裹也是粗体 ~~两个飘就是中划线了哦~~

你还可以混合使用它们，

_~~__斜体加粗中划线__~~_

效果 ~~斜体加粗中划线~~

列表

可以使用 *, - 或 数字+点 表示列表。

* 无序列表用星号
- 中划线也表示无序列表
1. 有序列表用数字+点

效果

• 无序列表项 1
• 无序列表项 2
• 无序列表项 3

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

链接

链接以成对的方括号和圆括号组成。

 [链接文案](链接地址)

效果 萌推大前端

图片

类似链接，图片由感叹号、方括号和圆括号组成。

![图片的alt值](图片地址)

效果

代码段

 使用前后成对的 3 个回勾号 (```) 包裹代码段，并且可以指定一些语言名称用以高亮显示代码内容，增加阅读体验

效果

let block = 'JS 语法高亮'

.code {
  /* CSS 语法高亮 */
  display: none;
}

Github 下的 Markdown 支持的语法高亮列表，请查收

引用

 使用大于号+空格表示引用

效果 引用的展示效果

行内代码

 不同于代码块，使用 2 个回勾号 (`) 包裹内容，例如 `code`

效果 行内代码的展示效果

任务列表

- [x] 选中状态的项
- [ ] 未选中状态的项

效果

• [x] 选中状态的项
• [ ] 未选中状态的项

表格

表头1 | 表头2 | 表头3
---- | ---- | ----
项1 | 项2 | 项3
项4 | 项5 | 项6

效果

姓名	身高	体重
小明	179	140
小王	188	160

EMOJI

:[emoji name]:

效果 :car: :trollface: :o:

emoji 图鉴

---

Thanks