Markdown教程

发表于 分类于 本文字数： 5.8k 阅读时长 ≈ 5 分钟
本文是关于 Markdown 的教程，介绍了其特点、语法和工具等....
Markdown

一、Markdown简介

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。
Markdown 允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。
Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
Markdown 编写的文档后缀为 .md、.markdown。
Markdown 是目前互联网上流行的写作语言之一，很多网站平台的文章、博客、论文都是基于它写的。

二、Markdown优点

很多人看到【轻量级】【标记】【语言】这些标签就直接放弃了，想着自己学习了非常多的语言，为了记个笔记写个博客还要再学习一门语言吗？实则不然，Markdown的语言非常非常简单，如果想学，10分钟你完全可以学完90%的常用的语法，而且你从此摆脱排版的折磨，属实是强迫症党的福利了。它的优点不仅限于此：

  • 纯文本编辑，只要是支持 Markdown 编辑的都能获得同样的结果，摆脱排版苦恼
  • 学习成本低，常用的语法很少，简单易学快速上手
  • 支持跨平台同步数据
  • 支持插入图片、视频等
  • 随时修改，不必担心word等工具出现排版错误

三、Markdown基本语法

3.1 标题

使用 # 标记，可表示1~6级标题， 随 # 的个数递增，一级标题字号最大，六级标题字号最小。

示例代码：

1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

渲染效果：

Markdown_Title

注意：

  • 最好 # 字符与标题文本中间留一个空格
  • 标题应该置于行首，如果放入表格中可能无法正确解析

3.2 字体

* 与 _ 都可以，1个斜体，2个粗体，3个粗斜体

示例代码：

1
2
3
4
5
6
7
8
*这是斜体*
_这是斜体_

**这是粗体**
__这是粗体__

***这是粗斜体***
___这是粗斜体___

渲染效果：

Markdown_Font

快捷键：

  • 加粗 Ctrl+B
  • 斜体 Ctrl+I

3.3 换行

Markdown换行的方式有很多种:

  • 直接在一句话后敲两个空格
  • 两句话之间加一个空行
  • 如果你在编辑的时候，想让一行文字在显示的时候换行，就在中间加<br/>

示例代码：

1
2
3
4
5
6
7
8
Hello World  
Hello World

Hello World

Hello World

Hello World<br/>Hello World

渲染效果：

Markdown_enter

3.4 引用

Markdown 中引用通过符号 > 来实现。

  • > 符号后的空格，可有可无。
  • 在引用的区块内，允许换行存在，换行并不会终止引用的区块。
  • 如果要结束引用，需要一行空白行，来结束引用的区块。

示例代码：

1
> 这是一个引用

渲染效果：

Markdown_quote1

此外，引用还可以嵌套使用

示例代码：

1
2
3
> 这是一个引用：
>> 这是一个引用的引用
>>> 这是一个引用的引用的引用

渲染效果：

Markdown_quote2

3.5 链接

Markdown 中插入链接的使用方式是：

示例代码：

1
2
1. [链接名称](链接地址)
2. <链接地址>

渲染效果：

Markdown_link

3.6 图片

Markdown 中插入图片的使用方式是：

示例代码：

1
![图片描述，可写可不写，但中括号要有](图片地址，本地链接或者URL地址。)

渲染效果：

Markdown_img

3.7 列表

列表分为有序列表和无序列表

  • 无序列表，使用*、+、-，再加一个空格作为列表的标记
  • 有序列表，使用数字并加上.号，再加一个空格作为列表的标记

示例代码：

1
2
3
4
5
6
7
* 无序列表 1
+ 无序列表 2
- 无序列表 3

1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

渲染效果：

Markdown_listtable1

如果想要控制列表的层级，则需要在列表符号前使用 Tab

示例代码：

1
2
3
4
5
6
7
8
9
+ 无序列表 1
+ 无序列表 2
	+ 无序列表 2.1
	+ 无序列表 2.2

1. 有序列表 1
	1.1 有序列表 1.1
2. 有序列表 2
	2.1 有序列表2.1

渲染效果：

Markdown_listtable2

3.8 分割线

可在一行中用三个 - 、_ 或 * 来建立一个分割线。

*注意：在分割线的上面空一行，否则会导致前一行字体放大。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#### 使用三个或更多的连字符 -

这是分割线上面的内容。

---

这是分割线下面的内容。

#### 使用三个或更多的星号 *

上面部分的文本。

***

下面部分的文本。

#### 使用三个或更多的下划线 _

分割线之上。

___

分割线之下。

渲染效果：

Markdown_splitLine

3.9 删除线

在要添加删除线的文字前后添加两个 ~

示例代码：

1
~~这是要被删除的文字~~

渲染效果：

Markdown_strikethrough

3.10 下划线

在要添加下划线的文字首尾添加 <u> 标签

示例代码：

1
<u>这是添加下划线的文字</u>

渲染效果：

Markdown_underscore

3.11 代码块

Markdown中代码块有两种：

  • 如果在一行内需要引用代码，只需要用两个反引号引起来。
  • 如果在一个块内引用代码，则在要引用的代码块的前一行和后一行使用三个反引号，同时在前一个反引号后写入代码语言。

示例代码：

1
2
### Code Blocks
`Hello World`
1
2
3
4
5
def greet(name):
    return f"Hello, {name}!"

message = greet("Alice")
print(message)

渲染效果：

Markdown_CodeBlocks

3.12 表格

表格使用|来分割不同的单元格，使用-来分隔表头和其他行

  • :-：将表头及单元格内容左对齐
  • -:：将表头及单元格内容右对齐
  • :-:：将表头及单元格内容居中

示例代码：

1
2
3
4
| 左对齐 | 右对齐 | 居中对齐 |
| :----- | -----: | :------: |
| 内容1  |  内容2 |  内容3   |
| 内容4  |  内容5 |  内容6   |

渲染效果：

Markdown_Table

3.13 脚注

脚注主要由两部分构成：在正文中标记脚注的位置和在文档末尾定义脚注的内容。

  • 在正文中标记脚注：使用 [^标记名] 来标记脚注的位置，其中 “标记名” 可以是数字、字母或其他字符组合，但在同一个文档里不能重复。
  • 在文档末尾定义脚注内容：使用 [^标记名]: 脚注具体内容 来给出脚注的详细说明，这里的 “标记名” 要和正文中的保持一致。

示例代码：

1
2
3
4
5
使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。

[^1]: Markdown 是一种轻量级标记语言，它使用简单的文本格式来标记文本结构，能让写作者专注于内容创作，提高书写效率。
[^2]: Markdown 可以借助多种工具，如 Pandoc 等，方便快捷地转换为 HTML 格式，便于在网页上展示。
[^T]: Typora 是一款简洁易用的 Markdown 编辑器，采用所见即所得的编辑模式，能实时预览 Markdown 渲染效果，提升书写体验。

渲染效果：

Markdown_footnotes

3.14 特殊符号

对于Markdown中的语法符号，符号前面加反斜线\即可以显示符号本身。

示例代码：

1
2
3
4
5
6
这是一个普通的 \# 符号，并非标题标记。
这里有一个转义后的 \* 星号和一个 \_ 下划线。
这是一个普通的 \- 连字符，不是列表项。
在代码里可能会用到 \` 反引号。
这是一个转义后的 \( 左括号和 \) 右括号，以及 \[ 左方括号和 \] 右方括号。
这里有一个转义后的 \| 管道符号。

渲染效果：

Markdown_escaped character

四、Markdown高级语法

4.1 制作待办事项

用 Markdown 制作待办事项，格式为：-[] 表示未完成；-[x]表示已完成

示例代码：

1
2
3
4
5
- [ ] 支持以 `PDF` 格式导出文稿
- [ ] 改进 `Cmd` 渲染算法，使用局部渲染技术提高渲染效率
- [x] 新增 `Todo` 列表功能
- [x] 修复 `LaTex` 公式渲染问题
- [x] 新增 `LaTex` 公式编号功能

渲染效果：

Markdown_To-do list

4.2 书写公式

Markdown支持书写公式，例如书写一个纳维 - 斯托克斯方程。
$$表示整行公式

示例代码：

1
2
3
4
5
对于粘性不可压缩流体，纳维 - 斯托克斯方程可以表示为：
$$
\rho \left( \frac{\partial \mathbf{v}}{\partial t} + \mathbf{v} \cdot \nabla \mathbf{v} \right) = -\nabla p + \mu \nabla^2 \mathbf{v} + \mathbf{f}
$$
其中 $\rho$ 是流体密度，$\mathbf{v}$ 是流体速度矢量，$t$ 是时间，$p$ 是压力，$\mu$ 是动力粘度，$\nabla$ 是梯度算子，$\nabla^2$ 是拉普拉斯算子，$\mathbf{f}$ 是作用在流体上的外力密度。

渲染效果：

Markdown_To-do list

4.3 绘制流程图

代码解释：

  • graph LR：表示这是一个从左到右（Left to Right）方向的流程图。
  • classDef：用于定义不同类型节点的样式。
  • 各个节点（如 A、B 等）通过箭头连接，并且可以添加条件判断（如 |是|、|否|）。

示例代码：（在支持 Mermaid 的环境中）

1
2
3
4
5
6
7
8
9
10
11
<pre class="mermaid">graph LR
    classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
    classDef decision fill:#FFF6CC,stroke:#FFBC52,stroke-width:2px;
    
    A([开始]):::startend --> B{是否需要帮助?}:::decision
    B -->|是| C(寻求帮助):::process
    B -->|否| D(自行解决):::process
    C --> E(问题解决):::process
    D --> E
    E --> F([结束]):::startend</pre>

渲染效果：

Markdown_flow chart

4.4 绘制序列图

代码解释：

  • participant：用于定义序列图中的参与者。
  • ->> 表示实线箭头（主动消息），-->> 表示虚线箭头（返回消息）。

示例代码：（在支持 Mermaid 的环境中）

1
2
3
4
5
6
7
<pre class="mermaid">sequenceDiagram
    participant User
    participant System
    User->>System: 发起请求
    System-->>User: 请求接收确认
    System->>System: 处理请求
    System-->>User: 返回处理结果</pre>
Markdown_sequence diagram

4.5 绘制甘特图

代码解释：

  • title：设置甘特图的标题。
  • dateFormat：指定日期的格式。
  • section：划分不同的项目阶段，每个任务通过任务名、任务标识（如 a1）、开始日期和持续时间来定义。

示例代码：（在支持 Mermaid 的环境中）

1
2
3
4
5
6
7
8
9
<pre class="mermaid">gantt
    title 项目进度甘特图
    dateFormat  YYYY-MM-DD
    section 项目阶段
    需求分析           :a1, 2024-01-01, 30d
    设计阶段           :after a1, 20d
    开发阶段           :after a2, 60d
    测试阶段           :after a3, 20d
    上线发布           :after a4, 1d</pre>

渲染效果：

Markdown_Gantt chart

4.6 内嵌Html

Markdown 允许直接嵌入 HTML 标签，在 Markdown 文件中编写 HTML 代码时，Markdown 解析器会将 HTML 代码原样保留并按照 HTML 的规则进行渲染。不过要注意，不同的 Markdown 解析器对 HTML 的支持可能会有细微差异。

示例代码：

使用 HTML 的 <a> 标签结合 CSS 样式可以创建链接按钮。

1
<a href="https://kfufys.github.io" style="display: inline-block; background-color: #007BFF; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">访问示例网站</a>

渲染效果：

Markdown_Embedded Html

五、Markdown工具

Markdown 编辑器有很多，它们在功能、适用平台、界面设计等方面各有特色，以下为你介绍一些常用的 Markdown 编辑器：

5.1 通用跨平台编辑器

  • Typora

    • 特点：这是一款简洁美观的 Markdown 编辑器，最大的亮点是采用所见即所得的编辑模式，支持多平台，包括 Windows、Mac 和 Linux。

    • 适用场景：适合日常写作、博客撰写、笔记记录等场景，能让用户专注于内容创作。

  • Visual Studio Code

    • 特点：作为一款强大的开源代码编辑器，VS Code 通过安装 Markdown 相关的扩展插件，可实现丰富的 Markdown 编辑功能，如语法高亮、自动补全、预览等。支持 Git 集成，方便进行版本控制。

    • 适用场景：对于开发者来说，在编写代码文档、技术博客时使用 VS Code 非常便捷，可与开发工作无缝衔接。

  • Obsidian

    • 特点：它是一款基于本地文件的知识管理和笔记应用，支持 Markdown 格式。具有强大的链接和图谱功能，可以方便地建立笔记之间的关联，形成个人知识网络。

    • 适用场景：适合构建个人知识体系、做学习笔记、进行项目规划等，有助于知识的整理和沉淀。

5.2 在线编辑器

  • GitHub

    • 特点：作为全球最大的代码托管平台，GitHub 内置了 Markdown 编辑器，在创建和编辑 README 文件、Wiki 页面时可直接使用。支持 Markdown 语法，方便开发者展示项目信息和文档。

    • 适用场景：对于开发者来说，在 GitHub 上使用 Markdown 编写项目文档是非常常见的操作，便于与团队成员和其他开发者共享信息。

  • Cmd Markdown

    • 特点：这是一款功能丰富的在线 Markdown 编辑器，支持云存储，方便在不同设备间同步文档。提供多种主题和模板，可导出为多种格式，还支持数学公式、流程图等高级功能。

    • 适用场景：适合需要在线协作编辑、跨设备使用的场景，如团队文档编写、学术论文撰写等。

如须学习更多 Markdown 实用小技巧，可以参考这个 Blog：Markdown 教程