如何使用Markdown 编写文档

zoukankan html css js c++ java

如何使用Markdown 编写文档
Markdown 是一种轻量级标记语言，用来编写文本文档，一般后缀名为.md。该语言在 2004 由约翰·格鲁伯（John Gruber）创建。

由于Markdown 语法简单，易读易写，变得越来越通用。目前很多的博客类型的网站都支持Markdown 语法来编写文档，例如CSDN，知乎，博客园，简书等。

使用Markdown 语法，可以将自己的文章很容易（基本无需修改）的迁移到其它网站（只要这个网站支持Markdown 语法）。

0，编辑工具

Typora 是一款不错的Markdown 编辑工具，其展示风格优雅大方，阅读起来很舒适。

另外，也有很多在线编辑工具，在线工具方便简单，一般都分为两部分，左边是文档编辑区，右边是文档展示区，可以实时检查自己编写的是否正确。

你可以选择自己喜欢的，例如：
下面介绍Markdown 语法，其标记与文字之间一般要有一个空格，例如一级标题：# 这是一级标题。

1，标题

就像HTML 标签一样，Markdown 也有6 级标题：
```
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
```
其效果如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2，目录

[TOC] 会自动为当前文档生成目录，目录是根据当前文档中的标题来生成的。

[TOC] 写在文档的什么位置（一般是文档开头），目录就会插在文档的哪个位置。

需要注意的是，有些网站可能不支持这个功能。

3，文字修饰

在Markdown 文档中，可以为文字添加加粗，斜体，删除线，下划线，当然这些效果也是可以叠加的：
```
*文字斜体*
**文字加粗**
***文字斜体加粗***
~~文字删除~~ 
~~**文字加粗删除**~~ 
~~*文字斜体删除*~~ 
文字下划线使用HTML u 标签
```
其效果如下：

文字斜体
文字加粗
文字斜体加粗
~~文字删除~~
~~文字加粗删除~~
~~文字斜体删除~~
文字下划线使用HTML u 标签

4，分割线

分割线使用三个连续的* 或-，如下：
```
***
---
```
其效果如下：

5，列表

5.1，有序列表

有序列表使用数字和点表示：
```
1. 有序列表一
2. 有序列表二
3. 有序列表三
```
其效果如下：
有序列表一

有序列表二

有序列表三
5.2，无序列表

无序列表可以使用+或-或* 表示，使用任意一种均可：
```
+ 无序列表1
+ 无序列表2
+ 无序列表3

- 无序列表1
- 无序列表2
- 无序列表3

* 无序列表1
* 无序列表2
* 无序列表3
```
其效果如下：
无序列表1

无序列表2

无序列表3
5.3，待办列表

待办列表 可以表示任务的处理状态，-[]表示待办状态，-[X] 表示已办状态：
```
 - [ ] 待办任务1
 - [ ] 待办任务2
 - [x] 已办任务
```
其效果如下：
[ ] 待办任务1

[ ] 待办任务2

[x] 已办任务
需要注意的是，有些网站可能不支持待办列表。

5.4，列表嵌套

需要嵌套列表时，在子列表之前添加四个空格即可：
```
- 无序列表
 - 子列表是无序列表
 - 子列表是无序列表

1. 有序列表
 1. 子列表是有序列表
 2. 子列表是有序列表
```
效果如下：
无序列表

子列表是无序列表

子列表是无序列表

有序列表

子列表是有序列表

子列表是有序列表
6，引用

引用一段文字使用符号>：
```
> 这是一段引用
```
效果如下：

这是一段引用

引用还分多级，一个> 表示一级：
```
> 一级引用
>> 二级引用
>>> 三级引用
>>>> 四级引用
>>>>> 五级引用
```
效果如下：

一级引用

二级引用

三级引用

四级引用

五级引用

7，代码块

Markdown 支持两种代码块，一种是行内代码块，一种是多行代码块。

行内代码块用反引号``(即Tab 键上边那个键)引住，会高亮显示。

多行代码块支持多种编程语言高亮：

C 语言代码高亮：

```c
// C语言代码
```

效果如下：
```
// C语言代码
int main() 
{
 printf("hello world.
");
 return 0;
}
```
C++ 语言代码高亮：

```cpp
// c++ 语言代码
```

效果如下：
```
// c++ 语言代码
int main()
{
 cout << "hello world." << endl; 
 return 0;
}
```
Java 语言代码高亮：

```java
// Java 代码
```

效果如下：
```
// Java 代码
public class HelloWorld {
 public static void main(String[] args) {
 System.out.println("hello world.");
 }
}
```
Python 语言代码高亮：

```python
# python 语言代码
```

效果如下：
```
# python 语言代码
print "hello world."
```
还支持其它语言代码，这里就不一一举例了。

8，表格

Markdown 表格的书写方法非常简单，用竖线|来分隔不同的单元格，使用 横线- 来分隔表头和其他行。

如下表示一个三行三列的表格：
```
|表头1 | 表头2 |表头3|
|--|--|--|
| 第1行第1列 | 第1行第2列 |第1行第3列|
| 第2行第1列 | 第2行第2列 |第2行第3列|
```
效果如下：

表头1 表头2 表头3

第1行第1列第1行第2列第1行第3列

第2行第1列第2行第2列第2行第3列

使用冒号: 来表示表格中内容的对齐方式：
- 冒号在左边：表示左对齐
- 冒号在右边：表示右对齐
- 两边都有冒号：表示居中对齐
```
| 左对齐 | 右对齐 | 居中对齐 |
| :--| --: | :--: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
```
效果如下：

左对齐右对齐居中对齐

单元格单元格单元格

单元格单元格单元格

9，超级链接

9.1，超级链接

超级链接的表示方式如下：
```
[超级链接文字](网址)
```
使用中括号和小括号表示，文字描述写在中括号内，网址写在小括号内，例如：
```
[这是百度网址](https://www.baidu.com)
```
效果如下：

这是百度网址

9.2，直接显示连接

如果想要直接显示连接地址，也可以使用<> 符号将连接地址括住：
```
<https://www.baidu.com>
```
效果如下：

https://www.baidu.com

9.3，使用锚点

使用锚点，首先是先定义锚点，然后再引用锚点。

定义锚点是在一个标题 的后边加上{#锚点名称}，如下：
```
### 这是一个锚点{#here}
```
然后使用如下格式使用锚点，中括号内是锚点描述，小括号内是锚点名称：
```
跳转到[锚点](#here)
```
10，图片

插入图片有四种方式，分别是：
- 插入本地图片
- 插入网络图片
- 把图片存入Markdown 文件
- 使用HTML <img> 标签
引入图片的基本格式是![描述](路径)，你可以选择适合自己的方式。

10.1，插入本地图片

语法如下（描述文字可不写）：
```
![描述图片的文字](图片本地路径)
```
例如：
```
![这是一张本地图片](/home/picture/name.png)
```
10.2，插入网络图片

插入网络图片，首先这张图片要在网上，并且能够正常访问，如果是自己的图片，则需要先将自己的图片传到网上。

语法如下（描述文字可不写）：
```
![描述图片的文字](图片网络地址)
```
例如：
```
![这是一张网络图片](http://ww2.sinaimg.cn/small/6aee7dbbgw1esvkj19bqmj20e80e874z.jpg)
```
10.3，把图片存入Markdown 文件

这种方式需要先将图片转换成base64 编码 格式，然后将图片内容放入Markdown 文档中（所以，如果图片很大的话，Markdown 文档也会变得很大），最后再引用图片。

语法如下（描述文字可不写），第一行为图片的引用，第二行为图片的声明（一般可写在文档的最后）：
```
![描述图片的文字][图片声明]
[图片声明]:图片base64 编码内容
```
例如：
```
![描述][base64str]
[base64str]:data:image/png;base64,iVBORw0......
```
10.4，使用HTML <img> 标签

Markdown 中支持HTML <img> 标签 来显示图片，当然也可以使用HTML 属性，来调节图片大小等：
```
<img src="图片地址">
```
11，文字上标下标

上标使用，下标使用，如下：
```
下标：X2
上标：Y2
下标文字: X上标文字
上标文字: Y上标文字
```
效果如下：

下标：X₂
上标：Y²
下标文字: X_上标文字
上标文字: Y^上标文字

12，文字缩写

文字缩写使用HTML <abbr> 标签，如下所示：
```
<abbr title="Hyper Text Markup Language">HTML</abbr> 是一种标记语言。
```
效果如下：

HTML 是一种标记语言。

13，注脚

使用注脚也是分两步，一是定义注脚，二是使用注脚。

定义注脚的语法如下：
```
[^注脚名称]:注脚内容
```
中括号内有一个上尖括号^，后边紧跟注脚名称，中括号后边是一个冒号:，再后边是注脚内容。一般注脚定义会被显示在文档的最后，多个注脚定义不能写在同一行。

使用注脚时，只需要在需要注解的文字后边加上[^注脚名称]即可，如下：
```
这是一个注脚示例[^注脚名称]
```
完整示例：
```
注脚示例[^note]
注脚示例二[^note2]

[^note]:这是注脚示例内容 
[^note2]:这是注脚示例内容2
```
效果如下：

注脚示例^[1]
注脚示例二^[2]

14，Markmap 思维导图

Markmap 是一个支持Markdown语法的思维导图工具，通过Markmap，你可以使用Markdown 语法来生成思维导图。

Markmap 开源免费，简单易用。你可以在这里将你写的Markdown 文档转换为思维导图。

在Markmap 中支持的Markdown 符号有：
- 标题符号#
- 无须列表符号-
- 分隔符---
- 超级链接符号[]() 和<>
- 文字修饰，例如加粗，斜体，删除线
- 代码块，包括行内代码块和多行代码块
你可以将如下Markdown 文档在这里转换为思维导图：
```
# Markmap 支持

## 标题符号

- 一级标题
- 二级标题
- 三级标题

## 无序列表

- 列表1
- 列表2

## 分隔符

- 第一部分
---
- 第二部分
--- 
- 第三部分
- 第四部分

## 超级链接

- <https://www.google.com>
- [Google](https://www.google.com)

## 文字修饰

- *斜体*
- **加粗**
- ~~删除线~~

## 代码块

- `单行代码块`
- 
\```shell
多行代码块1
多行代码块2
多行代码块3
\```
```
其效果如下：

（完。）
这是注脚示例内容 ↩︎

这是注脚示例内容2 ↩︎
查看全文

相关阅读:
[javascript] vuejs为输入框增加回车事件
 iview上的兼容性问题
 python+vscode安装与插件配置
 Chrome浏览器获取XPATH的方法----通过开发者工具获取
 使用谷歌浏览器定位xpath是否准确
 [PHP] xpath提取网页数据内容
 PHP中preg_match正则匹配的/u /i /s是什么意思
 Flink connect 算子实践
 DataStreamUtils 连续keyBy 优化
 Heartbeat原理及部署

原文地址：https://www.cnblogs.com/codeshell/p/12780460.html

表头1	表头2	表头3
第1行第1列	第1行第2列	第1行第3列
第2行第1列	第2行第2列	第2行第3列

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

如何使用Markdown 编写文档

0，编辑工具

1，标题

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

2，目录

3，文字修饰

4，分割线

5，列表

5.1，有序列表

5.2，无序列表

5.3，待办列表

5.4，列表嵌套

6，引用

7，代码块

8，表格

9，超级链接

9.1，超级链接

9.2，直接显示连接

9.3，使用锚点

10，图片

10.1，插入本地图片

10.2，插入网络图片

10.3，把图片存入Markdown 文件

10.4，使用HTML <img> 标签

11，文字上标下标

12，文字缩写

13，注脚

14，Markmap 思维导图