# 史上最全 Markdow 教程,看完全会了!

Markdown是一种轻量级的「标记语言」

是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

优点:

1、因为是纯文本,所以只要支持Markdown的地方都能获得一样的编辑效果,可以让作者摆脱排版的困扰,专心写作。

2、操作简单。比如:WYSIWYG编辑时标记个标题,先选中内容,再点击导航栏的标题按钮,选择几级标题。要三个步骤。而Markdown只需要在标题内容前加#即可

缺点:

1、需要记一些语法(当然,是很简单。五分钟学会)。

2、有些平台不支持Markdown编辑模式。

# MdEditor的功能列表演示

# 一、标题

在想要设置为标题的文字前面加#来表示 一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

注:标准语法一般在#后跟个空格再写文字,貌似简书不加空格也行。

示例:

# 标题H1
## 标题H2
### 标题H3
#### 标题H4
##### 标题H5
###### 标题H5
### 字符效果和横线等
----

效果如下:

# 标题H1

# 标题H2

# 标题H3

# 标题H4

# 标题H5
# 标题H5

# 字符效果和横线等


# 二、字体

~~删除线~~

*斜体字*      _斜体字_

**粗体**  __粗体__

***粗斜体*** ___粗斜体___

上标:X<sub>2</sub>,下标:O<sup>2</sup>

效果如下:

删除线

斜体字 斜体字

粗体 粗体

粗斜体 粗斜体

上标:X2,下标:O2

# 三、引用

**缩写(同HTML的abbr标签)**
> 这是引用的内容

引用的行内混合 
> 引用:如果想要插入空白换行`即<br />标签`,在插入处先键入两个以上的空格然后回车即可,[普通链接](https://xinglong.tech/)。

效果如下:

缩写(同HTML的abbr标签)

这是引用的内容

引用的行内混合

引用:如果想要插入空白换行即<br />标签,在插入处先键入两个以上的空格然后回车即可,普通链接

# 四、锚点与链接

- [普通链接](https://xinglong.tech/)
- [普通链接带标题](https://www.mdeditor.com/ "普通链接带标题")
- 直接链接:<https://www.mdeditor.com>
- [锚点链接][四、图片,锚点与链接]
- [mailto:test.test@gmail.com](mailto:test.test@gmail.com)

效果如下:

# 五、图片

![](https://pic.downk.cc/item/5f029f5014195aa594ce8279.jpg)

效果如下:

# 六、代码高亮,单词高亮

# JS代码

效果如下:

function test() {
	console.log("Hello world!");
}

# HTML 代码 HTML codes

效果如下:

<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Hello world!</title>
    </head>
    <body>
        <h1 class="text-xxl">Hello world!</h1>
    </body>
</html>

# 行内代码 Inline code

执行命令:npm install marked

# 缩进风格

即缩进四个空格,也做为实现类似 <pre> 预格式化文本 ( Preformatted Text ) 的功能。

<?php
    echo "Hello world!";
?>

预格式化文本:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

# 七 列表 Lists

# 无序列表(减号)Unordered Lists (-)

- 列表一
- 列表二
- 列表三

效果如下:

  • 列表一
  • 列表二
  • 列表三

# 无序列表(星号)Unordered Lists (*)

* 列表一
* 列表二
* 列表三

效果如下:

  • 列表一
  • 列表二
  • 列表三

# 无序列表(加号和嵌套)Unordered Lists (+)

+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
+ 列表三
    * 列表一
    * 列表二
    * 列表三

效果如下:

  • 列表一
  • 列表二
    • 列表二-1
    • 列表二-2
    • 列表二-3
  • 列表三
    • 列表一
    • 列表二
    • 列表三

# 有序列表 Ordered Lists (-)

1. 第一行
1. 第二行
1. 第三行

效果如下:

  1. 第一行
  2. 第二行
  3. 第三行

# GFM task list

- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
- [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2

效果如下:

  • [x] GFM task list 1
  • [x] GFM task list 2
  • [ ] GFM task list 3
    • [ ] GFM task list 3-1
    • [ ] GFM task list 3-2
    • [ ] GFM task list 3-3
  • [ ] GFM task list 4
    • [ ] GFM task list 4-1
    • [ ] GFM task list 4-2

# 绘制表格 Tables

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机      | $1600   |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |

效果如下:

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234

TIP

关注我的微信视频号!6年前端老兵,带你玩转 web前端。

上次更新: 7/15/2020, 11:00:21 PM