工具篇（七）MarkDown

发布时间：2023-05-14 文章分类：WEB开发, 电脑百科 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

目录

一、标记语言

二、MarkDown相关

2.1标题

一级标题

二级标题

三级标题

2.2图片

2.3链接

2.4文本样式设置

2.5列表

2.6表格

2.7注释和注脚

2.8代码

2.9分割线

2.10其他

Emoji 表情

HTML 代码嵌入：

LaTeX 公式：

一、标记语言

标记语言（Markup language）是一种计算机语言，用于对文本进行标记和注释，从而实现文本内容的格式化和结构化。标记语言通常使用标记（tag）来描述文本的含义和结构。标记是由一对尖括号（< >）包围的关键词，例如 HTML 中的 <html> 和 <body> 标记。

常见的标记语言有：

  1. HTML（Hypertext Markup Language）：用于创建网页的标记语言，可实现文本格式化、超链接、图片等功能。
  2. XML（eXtensible Markup Language）：一种通用的标记语言，可用于描述和传输数据，也可用于创建网页。
  3. Markdown：一种轻量级标记语言，用于创建文档和网页，易于学习和使用。
  4. LaTeX：一种专业的排版语言，用于创建科技文档、学术论文和书籍等高质量的文档。
  5. JSON（JavaScript Object Notation）：一种轻量级的数据交换格式，通常用于 Web 应用程序中的数据传输和存储。

标记语言的优点包括易于阅读和理解、易于使用和学习、可以轻松实现文档的格式化和布局、可以扩展到多种应用程序等。它们被广泛应用于互联网上的各种文档、数据和应用程序中，包括网页、博客、电子邮件、数据库等。

二、MarkDown相关

2.1标题

Markdown中有六级标题，分别用1~6个#来表示。具体如下：

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

其中，# 和 标题文本之间需要有一个空格隔开，例如：

这是一个一级标题

在Markdown中，标题文本的字体大小和粗细会根据标题级别而有所不同。一级标题字体最大、最粗，随着级别递减，字体大小和粗细也会相应减小。同时，Markdown中的标题也可以在文本中自动编号，格式为：

  1. 一级标题 1.1 二级标题 1.2 二级标题
  2. 一级标题 2.1 二级标题 2.2 二级标题

在每个标题前加上编号和句点，即可生成带编号的标题。其中，一级标题的编号为1，二级标题的编号为1.1、1.2等，以此类推。

2.2图片

在Markdown中，插入图片的语法为：

![图片描述](图片链接)

其中，方括号[]中的内容是图片的描述文字，可以根据需要进行添加或者省略。圆括号()中的内容是图片的链接，可以是网络图片的链接，也可以是本地图片的路径。

如果要插入网络图片，可以直接将图片的链接放在圆括号中即可，例如：

![示例图片]()

如果要插入本地图片，需要将图片放在与Markdown文件同一个目录下，然后在圆括号中指定图片的相对路径，例如：

![本地图片](./images/local.jpg)

其中，点号.表示当前目录，images是存放图片的子目录，local.jpg是要插入的图片文件名

图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png)
带尺寸的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png =60x60)
宽度确定高度等比例的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png =60x)
高度确定宽度等比例的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png =x60)
居中的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png#pic_center)
居中并且带尺寸的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png#pic_center =60x60)
居右的图片: ![Alt](https://www.yuucn.com/wp-content/uploads/2023/05/1684044624-fa5a88b3c16ba48.png#pic_right)

2.3链接

在Markdown中，插入链接的语法为：

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

其中，方括号[]中的内容是链接的文字描述，可以根据需要进行添加或者省略。圆括号()中的内容是链接的地址，可以是网址或者本地文件的路径

如果要插入网页链接，可以直接将链接地址放在圆括号中即可，例如：

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

如果要插入本地文件链接，需要将文件放在与Markdown文件同一个目录下，然后在圆括号中指定文件的相对路径，例如

[本地文件](./docs/readme.pdf)

其中，点号.表示当前目录，docs是存放文件的子目录，readme.pdf是要插入的文件名。

需要注意的是，如果链接地址过长，可以使用尖括号<>将链接地址包裹起来，这样就不需要将整个链接地址都写在方括号和圆括号中。例如：

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

此外，Markdown还支持设置锚点，在文本内部设置一个链接，方便用户直接跳转到文档的其他部分。在需要跳转的部分，添加一个标记，例如：

## 第一章 {#chapter1}

其中，花括号{}中的内容是锚点的名称，可以根据需要进行修改。

然后在文本的其他部分，使用链接指向该锚点，例如：

[跳转到第一章](#chapter1)

这样，当用户点击链接时，就可以直接跳转到第一章的位置。

改进隐藏锚点

# 标题一
这是一段文字，其中有一个需要跳转的位置。
<a id="myanchor"></a>
# 标题二
这是另一段文字。
[跳转到锚点](#myanchor)

2.4文本样式设置

Markdown 中可以通过一些语法来设置文本的样式，包括加粗、斜体、删除线等，具体如下：

  1. 加粗：使用两个 ** 包含需要加粗的文本，例如：**加粗文本**。
  2. 斜体：使用一个 * 包含需要斜体的文本，例如：*斜体文本*。
  3. 加粗斜体：使用三个 * 包含需要加粗斜体的文本，例如：***加粗斜体文本***。
  4. 删除线：使用两个 ~~ 包含需要删除的文本，例如：~~删除的文本~~。
  5. 下划线：使用 HTML 标签 <u> 和 </u> 包含需要加下划线的文本，例如：<u>下划线文本</u>。
  6. 字体颜色：使用 HTML 标签 <font> 和 </font>，以及 color 属性来设置文本颜色，例如：<font color="red">红色文本</font>。
  7. ==标记文本==：在Markdown中，使用双等号 ==包围文本可以实现文本高亮的效果
  8. ~~删除文本~~
  9. > 引用文本在Markdown中，使用大于号 >可以实现引用文本的效果，被引用的文本会有一个垂直的条纹在左侧。
  10. 上标下标
H~2~O is是液体。
2^10^ 运算结果是 1024

2.5列表

Markdown支持有序列表和无序列表两种形式。

无序列表可以使用*、+、-三种符号，后跟一个空格，例如：

* 第一项
* 第二项
* 第三项

输出：

有序列表则需要使用数字和.符号，并且也需要后跟一个空格，例如：

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

输出：

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

任务列表语法，其中- [ ]表示未完成任务，- [x]表示已完成任务。使用方法如下：

- [ ] 计划任务
- [x] 完成任务

自定义·列表

Markdown中可以使用自定义列表来展示一个列表，其语法如下：

术语 1
:   定义 1
术语 2
:   定义 2

其中，术语 1和术语 2是列表的项目，定义 1和定义 2是对应项目的描述。

示例：

生物：生命体，能够进行代谢、生长、繁殖和适应环境的一类有机体。
化学：研究物质的组成、性质、变化规律和应用的科学。
数学：研究数量、结构、变化和空间等概念和规律的学科。

2.6表格

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

您可以根据需要添加更多的行和列，并使用冒号来指定对齐方式。例如，:---表示左对齐，---:表示右对齐，而:---:表示居中对齐。

2.7注释和注脚

注释语法使用<!-- 注释 -->，注释内容不会在渲染后显示出来。

注脚语法使用[^注脚名称]，并在文末使用[^注脚名称]: 注脚内容定义注脚内容，渲染后注脚会自动编号并在文末显示。

示例：

这是一段文本，其中有一个[^1]注脚。
<!-- 这是一段注释 -->
[^1]: 这是注脚的内容。

2.8代码

单行代码

在Markdown中，可以使用反引号 ` 来表示单行代码，例如：

这是一段代码：`print("Hello World!")`

代码块

使用三个反引号（```）将代码包裹起来，适用于多行代码块。

例如：

```python
print("Hello, world!")
```

使用缩进4个空格的方式


使用四个空格表示代码块：
    def hello_world():
        print("Hello, world!")
两者效果是一样的。

2.9分割线

Markdown中的分割线可以使用三个或更多的连续符号来表示，常用的有三种：

1.使用连续的三个星号***或者三个减号---表示：

***
或者
---

2.使用连续的三个下划线___表示

___

3.可以在连续的单个符号中间添加空格来增加间距，如下所示

* * *
或者
- - -
或者
_ _ _

2.10其他

Emoji 表情

Markdown 支持使用 Emoji 表情符号来丰富文本内容，常见的 Emoji 表情包括笑脸、心形、手势、动物等。在 Markdown 中使用 Emoji 表情的方法是在文本中直接输入 Emoji 表情的符号，例如“:smile:”、“:heart:”、“:thumbsup:”等，Markdown 解析器会自动将其转换为对应的 Emoji 图标。

以下是几个常用的 Emoji 表情示例：

  • :smile: 表示笑脸
  • :heart: 表示爱心
  • :star: 表示星星
  • :rocket: 表示火箭
  • :book: 表示书本
  • :computer: 表示电脑
  • :muscle: 表示肌肉
  • :tada: 表示庆祝
  • :pray: 表示祈祷

HTML 代码嵌入：

Markdown 支持直接嵌入 HTML 代码，可以在 Markdown 中使用 HTML 标签，但不建议滥用。

<div>
    <p>这是一段 HTML 代码。</p>
</div>

LaTeX 公式：

可以使用 $ 或 $$ 包裹 LaTeX 公式，以在 Markdown 中插入数学公式。

$y = mx + b$
$$\frac{\partial f}{\partial x}$$
标签 , ,