Markdown

CM Lv3
  2023-07-14 18:20:47 2023-07-14 18:20 Created   2023-07-15 14:20:29 2023-07-15 14:20 Updated    

一、Markdown简介

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。

Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md, .markdown。

Markdown 能被使用来撰写电子书，如：Gitbook。

当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。

二、Markdown标题

使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。
注意：#后面一定要跟着空格，否则语法无效！

标题内容的后面如果也存在空格和 #，也可以构成标题，且标题的级别以前面 # 的数量为准。

使用#号标记标题语法格式：

1
2
3
4
5
6
7
8
9
10
11
# 一级标题

## 二级标题

### 三级标题

#### 四级标题

##### 五级标题

###### 六级标题

显示效果：
[TOC]目录

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

三、Markdown段落

Markdown的段落没有特殊的格式，直接编写文字就好，段落的换行号是使用两个以上的空格加回车。

3.1字体

Markdown 可以使用以下几种字体：

  • 用1个星号*或底线_表示斜体
  • 用2个星号*或底线_表示粗体
  • 用3个星号*或底线_表示粗斜体

语法格式：

1
2
3
4
5
6
7
8
9
10
11
*斜体文字*

_斜体文字_

**粗体文字**

__粗体文字__

***粗斜体文字***

___粗斜体文字___

显示效果：

斜体文字

斜体文字

粗体文字

粗体文字

粗斜体文字

粗斜体文字

3.2分隔线

可以在一行中用三个以上的星号*、减号-、底线_来建立一个分隔线，行内不能有其他东西，你也可以在星号或减号蹭插入空格。下面这种写法都可以建立分隔线：

1
2
3
4
5
***
* * *
******
- - -
------

显示效果：
***
* * *
******
- - -

3.3删除线

如果段落上的文字要添加删除线，只需要在文字的两端加上两个波浪线~~即可。

语法格式：

1
~~要显示为要删除线的字~~

显示效果：

要显示为要删除线的字

3.4下划线

下划线可以通过HTML的标签来实现

语法格式：

1
<u>带下划线文本</u>

显示效果：

带下划线文本

四、Markdown列表

4.1有序列表和无序列表

Markdown支持有序列表和无序列表，

无序列表使用星号(*)、加号(+)或者减号(-)作为标记：

1
2
3
4
5
6
7
8
9
10
11
* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项

显示效果：

  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项

有序列表直接在文字有加上1. 2. 3. 来表示，符号和文字之间加上一个空格字符，如：

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

显示效果：

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

4.2列表嵌套

列表嵌套只需在子列表的选项前添加四个空格即可：

1
2
3
4
5
6
1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

显示效果：

  1. 第一项：
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项：
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

五、引用

Markdown区块引用是在段落开头使用>符号，然后后面紧跟一个空格符号：

1
2
3
> 区块引用  
> Markdown教程  
> 学的不仅是技术更是梦想

显示效果：

区块引用
Markdown教程
学的不仅是技术更是梦想

另外区块是可以嵌套的，一个>符号是最外层，两个符号是第一层嵌套，以此类推：

1
2
3
> 最外层
>> 第一层嵌套
>>> 第二层嵌套

显示效果：

最外层

第一层嵌套

第二层嵌套

5.1区块引用中使用列表

区块中使用列表实例如下：

1
2
3
4
5
6
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

显示效果：

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项

5.2引用多个段落

引用可以包含多个段落，引用内段落和普通段落一样，不过在空行前面也要加上小于号。

1
2
3
> 这是一个引用段落
>
> 这是另一个引用段落

显示效果：

这是一个引用段落

这是另一个引用段落

六、Markdown代码块

6.1行内代码

使用一对反引号(`)来创建行内代码。如果在行内代码中需要包含反引号本身，可以使用两个反引号对加前后空格来创建。

6.2代码块！

将文本的每一行缩进至少四个空格或一个制表符。这样这些文本会变成代码块。

6.3围栏式代码块！

在很多 Markdown 解析器里都支持使用三个反引号(`)或三个波浪号(~)来定义围栏式代码块。同时这种代码块配合插件还可以做到代码高亮、行号等高级功能。（如果在代码块中也存在三个反引号或波浪号，可以在外层使用 4 个。）

1
2
3
4
5
6
7
8
```javascript
const a = 1;
const b = 2;
function add(num1, num2) {
  return num1 + num2;
}
console.log(add(a, b));
```

显示效果：

1
2
3
4
5
6
const a = 1;
const b = 2;
function add(num1, num2) {
  return num1 + num2;
}
console.log(add(a, b));

七、Markdown链接

7.1链接到网站

1
[茄迷的bolg](https://brilliantbird.github.io/)

显示效果：

茄迷的bolg

7.2高级链接

链接也可以用变量来代替，文档末尾附带变量地址：
这个链接用1作为网址变量baidu
这个链接用markdown作为网址变量Markdown
然后文档的结尾为变量赋值(网址)

1
2
[1]: http://www.baidu.com
[markdown]: http://www.markdown.com

显示效果：(我在写笔记的时候加了两句，但是这里并没有没有显示出来。加了两句超链接以后，baidu和Markdown就可以变成超链接点进去了)

八、Markdown图片

Markdown图片语法格式为：

1
2
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
  • 开头一个感叹号!
  • 接着一个方括号，里面放上图片的代替文字
  • 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的’title’属性文字。

举个例子：

1
![帅哥照片](https://bkimg.cdn.bcebos.com/pic/b17eca8065380cd79123caf75208ba345982b2b72bde?x-bce-process=image/resize,m_lfit,h_4096,limit_1/watermark,image_d2F0ZXIvYmFpa2UyNzI=,g_7,xp_5,yp_5/format,f_auto)

1. 补充：带链接的图片

下面的代码，把生成图片的代码放到了超链接的名称里面。

1
[![这是一个图片](/images/tutorials/markdown/工具页截图-dark.png)](/tools/)

2. 补充：带title的图片

1
![这是一个图片](/images/tutorials/markdown/工具页截图-dark.png "这是工具页的截图")

九、Emoji表情

在 Markdown 里使用 Emoji 表情有两种方法，一种是直接输入 Emoji 表情，另一种是使用 Emoji 表情短码(emoji shartcodes)。

Emoji 表情短码放到两个冒号(:)之间，比如： :joy:😂。

十、表格

表格使用竖线(|)区分每一列，在表格头和表格体之间第列使用至少三个减号(-)来做为分隔。

1
2
3
4
|第一列|第二列|第三列|
|---|---|---|
|第一行第一列|第一行第二列|第一行第三列|
|第二行第一列|第二行第二列|第二行第三列|

显示效果：

第一列 第二列 第三列
第一行第一列 第一行第二列 第一行第三列
第二行第一列 第二行第二列 第二行第三列

补充：设置表格的对齐方式

下列代码，在第二行的每一列都添加了冒号(:)，左侧添加一个冒号表示该列左对齐，右侧添加一个冒号表示该列右对齐，左右各添加一个冒号表示该列居中对齐。

1
2
3
|第一列|第二列|第三列|
|:---|:---:|---:|
|这一列是左对齐的|这一列是居中对齐的|这一列是右对齐的|

显示效果：

第一列 第二列 第三列
这一列是左对齐的 这一列是居中对齐的 这一列是右对齐的

在表格中可以使用斜体单行元素，比如粗体斜体、行内代码、超链接、图片、Emoji表情、HTML等。

关于图表，公式，脚注，注释，内嵌HTML和React的相关内容未完待续！！！

  • Title: Markdown
  • Author: CM
  • Created at: 2023-07-14 18:20:47
  • Updated at: 2023-07-15 14:20:29
  • Link: https://redefine.ohevan.com/2023/07/14/Markdown/
  • License: This work is licensed under CC BY-NC-SA 4.0.
 Comments
On this page
Markdown
  1. 一、Markdown简介
  2. 二、Markdown标题
  3. 一级标题
    1. 二级标题
      1. 三级标题
  4. 三、Markdown段落
    1. 3.1字体
    2. 3.2分隔线
    3. 显示效果：**** * *******- - -
    4. 3.3删除线
    5. 3.4下划线
  5. 四、Markdown列表
    1. 4.1有序列表和无序列表
    2. 4.2列表嵌套
  6. 五、引用
    1. 5.1区块引用中使用列表
    2. 5.2引用多个段落
  7. 六、Markdown代码块
    1. 6.1行内代码
    2. 6.2代码块！
    3. 6.3围栏式代码块！
  8. 七、Markdown链接
    1. 7.1链接到网站
    2. 7.2高级链接
  9. 八、Markdown图片
  10. 九、Emoji表情
  11. 十、表格