天天看点

如何使用Markdown 编写文档

如何使用Markdown 编写文档

Markdown

是一种轻量级标记语言,用来编写文本文档,一般后缀名为

.md

。该语言在 2004 由约翰·格鲁伯(John Gruber)创建。

由于

Markdown

语法简单,易读易写,变得越来越通用。目前很多的博客类型的网站都支持

Markdown

语法来编写文档,例如

CSDN

知乎

博客园

简书

等。

使用

Markdown

语法,可以将自己的文章很容易(基本无需修改)的迁移到其它网站(只要这个网站支持

Markdown

语法)。

0,编辑工具

Typora 是一款不错的

Markdown

编辑工具,其展示风格优雅大方,阅读起来很舒适。

另外,也有很多在线编辑工具,在线工具方便简单,一般都分为两部分,左边是

文档编辑区

,右边是

文档展示区

,可以实时检查自己编写的是否正确。

你可以选择自己喜欢的,例如:

  • MdEditor
  • MaHua
  • Editor
  • Markdown 在线工具

下面介绍

Markdown

语法,其

标记

文字

之间一般要有一个空格,例如一级标题:

# 这是一级标题

1,标题

就像

HTML

标签一样,

Markdown

也有6 级标题:

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

其效果如下:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

2,目录

[TOC]

会自动为当前文档生成

目录

目录

是根据当前文档中的

标题

来生成的。

[TOC]

写在文档的什么位置(一般是文档开头),目录就会插在文档的哪个位置。

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

3,文字修饰

Markdown

文档中,可以为文字添加

加粗

斜体

删除线

下划线

,当然这些效果也是可以叠加的:

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

其效果如下:

文字斜体

文字加粗

文字斜体加粗

文字删除

文字加粗删除

文字斜体删除

文字下划线使用HTML u 标签

4,分割线

分割线使用三个连续的

*

-

,如下:

***
---
           

其效果如下:

5,列表

5.1,有序列表

有序列表

使用

数字

表示:

1. 有序列表一
2. 有序列表二
3. 有序列表三
           

其效果如下:

  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
  • 已办任务

需要注意的是,有些网站可能不支持

待办列表

5.4,列表嵌套

需要

嵌套列表

时,在子列表之前添加

四个空格

即可:

- 无序列表
    - 子列表是无序列表
    - 子列表是无序列表

1. 有序列表
    1. 子列表是有序列表
    2. 子列表是有序列表
           

效果如下:

  • 无序列表
    • 子列表是无序列表
    • 子列表是无序列表
  1. 有序列表
    1. 子列表是有序列表
    2. 子列表是有序列表

6,引用

引用

一段文字使用符号

>

> 这是一段引用
           

效果如下:

这是一段引用

引用还分多级,一个

>

表示一级:

> 一级引用
>> 二级引用
>>> 三级引用
>>>> 四级引用
>>>>> 五级引用
           

效果如下:

一级引用
二级引用
三级引用
四级引用
五级引用

7,代码块

Markdown

支持两种

代码块

,一种是

行内代码块

,一种是

多行代码块

行内代码块

用反引号``(即Tab 键上边那个键)引住,会高亮显示。

多行代码块

支持多种编程语言高亮:

C 语言代码高亮:

```c

// C语言代码

```

效果如下:

// C语言代码
int main() 
{
    printf("hello world.\n");
    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,文字上标下标

上标

使用

<sup>

,下标使用

<sub>

,如下:

下标:X<sub>2</sub>
上标:Y<sup>2</sup>
下标文字: X<sub>上标文字</sub>
上标文字: Y<sup>上标文字</sup>
           

效果如下:

下标:X2

上标:Y2

下标文字: 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
\```

           

其效果如下:

如何使用Markdown 编写文档

(完。)

  1. 这是注脚示例内容 ↩︎
  2. 这是注脚示例内容2 ↩︎