探索 Markdown 的排版技巧与高级应用

码手Lion • 2024年10月28日 am11:01 • 其它 • 23 阅读

一、引言

在互联网的浩瀚海洋中，Markdown 作为一种轻量级标记语言，以其简洁的语法和强大的功能，赢得了众多创作者的青睐。我个人深信，Markdown 已成为当前互联网上最受欢迎的写作工具之一。无论是国外的 GitHub、Reddit，还是国内的 CSDN、知乎，无数文章、博客和论文都基于它而诞生。

二、Markdown 的优势

许多人一看到“轻量级”、“标记”、“语言”这些标签，可能会望而却步。但实际上，Markdown 的学习成本极低，10 分钟就能掌握 90% 的常用语法。它不仅帮助我们摆脱排版的困扰，还能让写作变得更加高效。以下是 Markdown 的一些显著优点：

跨平台同步数据：方便在不同设备间共享文档。
多媒体支持：轻松插入图片、视频等元素。
即时修改：无需担心排版错误，专注于内容创作。
学习成本低：简单易学，快速上手。
纯文本编辑：统一的编辑体验，保证文档的一致性。

三、Markdown 基本语法

1、标题

使用 # 号标记，从一级标题到六级标题，字号逐渐减小。

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

2、字体样式

通过星号 * 和下划线 _ 实现斜体、粗体和粗斜体 (单个表示斜体，两个表示粗体，三个表示粗斜体)：

*斜体* _斜体_
**粗体** __粗体__
***粗斜体*** ___粗斜体___

3、换行

在行尾添加两个空格或使用   标签。

4、引用

使用 > 符号创建引用区块 (可嵌套使用)：

> 这是外层引用
>> 这是内部引用

5、链接

插入链接可以通过以下两种方式：

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

6、图片

插入图片的语法：

![图片描述](图片地址)

可以调整图片的位置和大小：

![图片描述](图片地址#pic_center =宽度x高度)

调整尺寸大小：

说明：等号 " = " 前面需要有一个空格

带尺寸的图片：=600x600

宽度确定高度等比例的图片：=600x

高度确定宽度等比例的图片：=x600

调整对齐方式：

说明：# 前面不需要空格

居中对齐：#pic_center

靠左对齐：#pic_left

靠右对齐：#pic_right

实例：

![封面图](https://blog.mslion.top/wp-content/uploads/2024/09/VSCode-Extensions.jpg#pic_center =240x144)

7、列表

列表分为有序和无序两种形式；无序列表可以使用 *、+、-，有序列表使用数字加上 .。

* 无序列表项
* 无序列表项
* 无序列表项

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

多级列表可以通过缩进实现：

+ 项目1
    + 子项目1.1

1. 第一项
    1. 子项

8、表格

使用|和-创建表格：

| 表头1 | 表头2 |
| --- | --- |
| 内容1 | 内容2 |

9、代码块

行内代码使用反引号 ` 包裹：

`代码行`

多行代码块使用三个反引号：

\``` JavaScript
console.log('markdow')
\```

10、分割线

使用三个连续的 -、* 或 _ 来创建分割线：

---

***

___

11、删除线

使用两个连续的 ~ 来创建删除线：

~~删除线~~

四、Markdown 高级用法

1、待办事项

创建待办事项列表：

- [ ] 表示未完成
- [x] 表示已完成

- [ ] 任务A
- [x] 完成任务B

2、数据学公式

在文档中插入数学公式，您可以使用 LaTeX 语法。许多 Markdown 编辑器支持 LaTeX 数学公式渲染，特别是在使用扩展功能如 MathJax 或 KaTeX 的情况下。以下是插入 LaTeX 数学公式的几种常见方式：

行内公式：如果您希望公式在文本中显示，可以使用美元符号 $ 来包裹公式
如：质能守恒方程可以用一个很简洁的方程式 $ E=mc^2 $ 来表达。
效果：
E=mc^2
块级公式：如果希望公式单独占一行，并居中显示，则可以使用双美元符号 $$ 来包裹公式

下面是常用的 LaTeX 符号和命令：

上标和下标

上标：使用 ^ 符号
- 示例： $ a^n $
```
a^n
```
下标：使用 _ 符号
- 示例： $ a_n $
```
a_n
```

分数

分数：使用 \frac{分子}{分母}
- 示例： $ \frac{a}{b} $
```
\frac{a}{b}
```

平方根

平方根：使用 \sqrt{表达式}
- 示例：`$ \sqrt{x} $
```
\sqrt{x}
```

开方

开方：使用 \sqrt[n]{表达式}
- 示例： $ \sqrt[3]{x} $
```
\sqrt[3]{x}
```

极限

极限：使用 \lim_{x \to a} 表达式
- 示例： $ \lim_{x \to a}f(x) $
```
\lim_{x \to a}f(x)
```

导数

导数：使用 \frac{d}{dx} 表达式
- 示例： $ \frac{d}{dx}f(x) $
```
\frac{d}{dx}f(x)
```

积分

积分：使用 \int 表达式 dx
- 示例： $ \int x^2 dx $
```
\int x^2 dx
```
定积分：使用 \int_{a}^{b} 表达式 dx
- 示例： $ \int_{a}^{b} x^2 dx $
```
\int_{a}^{b} x^2 dx
```

求和

求和：使用 \sum_{i=1}^{n} 表达式
- 示例： $ \sum_{i=1}^{n} i $
```
\sum_{i=1}^{n} i
```

求积

求积：使用 \prod_{i=1}^{n} 表达式
- 示例： $ \prod_{i=1}^{n} i $
```
\prod_{i=1}^{n} i
```

矩阵

矩阵：使用

\begin{matrix}
    ... 
\end{matrix}

代码：

$$
    \begin{matrix}
    a & b \\
    c & d
    \end{matrix}
$$

效果：

\begin{matrix}
a & b \\
c & d
\end{matrix}

矩阵 (带括号)

矩阵 (带括号)：使用

\begin{pmatrix}
    ... 
\end{pmatrix}

代码：

$$
    \begin{pmatrix}
    a & b \\
    c & d
    \end{pmatrix}
$$

效果：

\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}

矩阵 (带花括号)

矩阵 (带花括号)：使用

\begin{Bmatrix}
    ...
\end{Bmatrix}

代码：

$$
    \begin{Bmatrix}
    a & b \\
    c & d
    \end{Bmatrix}
$$

效果：

\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}

矩阵 (带竖线)

矩阵 (带竖线)：使用

\begin{vmatrix}
    ...
\end{vmatrix}

代码：

$$
    \begin{vmatrix}
    a & b \\
    c & d
    \end{vmatrix}
$$

效果：

\begin{vmatrix}
a & b \\
c & d
\end{vmatrix}

矩阵 (带双竖线)

矩阵 (带双竖线)：使用

\begin{Vmatrix}
    ...
\end{Vmatrix}

代码：

$$
    \begin{Vmatrix}
    a & b \\
    c & d
    \end{Vmatrix}
$$

效果：

\begin{Vmatrix}
a & b \\
c & d
\end{Vmatrix}

箭头

箭头：使用 \leftarrow，\rightarrow，\leftrightarrow
- 示例： $\leftarrow$ ， $\rightarrow$ ， $\leftrightarrow$
```
\leftarrow
\rightarrow
\leftrightarrow
```

箭头 (带标签)

箭头 (带标签)：使用 \xleftarrow{标签}, \xrightarrow{标签}
- 示例： $\xleftarrow{标签}$ ， $\xrightarrow{标签}$
```
\xleftarrow{标签}
\xrightarrow{标签}
```

逻辑符号

逻辑“与”：使用 \land
- 示例： $\land$
```
\land
```
逻辑“或”：使用 \lor
- 示例： $\lor$
```
\lor
```
逻辑“非”：使用 \lnot
- 示例： $\lnot$
```
\lnot
```

集合符号

属于：使用 \in
- 示例： $\in$
```
\in
```
不属于：使用 \notin
- 示例： $\notin$
```
\notin
```
包含：使用 \subset
- 示例： $\subset$
```
\subset
```
真包含：使用 \subseteq
- 示例： $\subseteq$
```
\subseteq
```
包含于： \supset
- 示例： $\supset$
```
\supset
```
真包含于：使用 \supseteq
- 示例： $\supseteq$
```
\supseteq
```

3、流程图

如果想创建流程图、序列图、甘特图等图表，可使用 Mermaid 这种标记语言，而且还可以在 Markdown 文档中直接使用。下面是 Mermaid 的一些基本用法和示例，可以帮助你绘制流程图，其他类型的图表请自己查找 (个人基本上用不到)。

基本语法：

图表类型(关键词) 方向
    图表其他语句...

    subgraph "子图1标题"
        direction 方向
        子图表其他语句...
    end

    subgraph "子图2标题"
        direction 方向
        子图表其他语句...
    end

图表类型：

类型	说明
流程图 (Flowchart)	关键词 `graph` 或 `flowchart` 表示
顺序图 (Sequence Diagram)	关键词 `sequenceDiagram` 表示
类图 (Class Diagram)	关键词 `classDiagram` 表示
状态图 (State Diagram)	关键词 `stateDiagram` 表示
实体关系图 (Entity Relationship Diagram)	关键词 `erDiagram` 表示
用户旅程图 (User Journey Diagram)	键词 `journey` 表示
甘特图 (Gantt Diagram)	关键词 `gantt` 表示
饼图 (Pie Chart Diagram)	关键词 `pie` 表示
象限图 (Quadrant Chart)	关键词 `quadrantChart` 表示
需求图 (Requirement Diagram)	关键词 `requirementDiagram` 表示
Gitgraph 图 (Gitgraph Diagram)	关键词 `gitGraph` 表示
思维导图 (Mindmap)	关键词 `mindmap` 表示
时间线图 (Timeline Diagram)	关键词 `timeline` 表示

设置方向：

用词	含义
TB	从上到下
BT	从下到上
LR	从左到右
RL	从右到左

定义节点：

Mermaid 中每个节点都有一个 id，以及节点的 文字，如节点的文字中包含标点符号，需要时使用双引号包裹起来，否则会报错。

表述	说明
`id[文字]`	矩形节点
`id[[文字]]`	卷轴形
`id(文字)`	圆形矩形节点
`id((文字))`	圆形节点
`id(((文字)))`	双圆
`id[(文字)]`	圆柱
`id([文字])`	胶囊形
`id{文字}`	菱形节点
`id{{文字}}`	六角形
`id>文字]`	右向旗帜状
`id[/文字/]` 或 `id[\文字\]`	平行四边形
`id[/文字\]` 或 `id[\文字/]`	梯形

连线类型：

表述	说明
`A1 --> B1`	箭头链接
`A2 --- B2`	线链接
`A3 --文本--- B3` 或 A3 ---\|文本\| B3	带文本的线链接
`A4 --文本--> B4` 或 A4 -->\|文本\| B4	带有文本的箭头链接
`A5 -.-> B5`	虚线箭头链接
`A6 -.文本.-> B6`	带文本虚线箭头链接
`A7==> B7`	粗线箭头链接
`A8 ==文本==> B8`	带文本粗线箭头链接

流程图实例

横向流程图：

代码：

flowchart LR
    A[方形] --> B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

效果：

flowchart LR
    A[方形] --> B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

竖向流程图：

代码：

graph TB
    A[用户点击登录按钮] --> B(系统验证用户名)
    B --> C{"用户名正确？"}
    C -- 否 --> D[提示用户名错误]
    C -- 是 --> E(系统验证密码)
    E --> F{"密码正确？"}
    F -- 否 --> G[提示密码错误]
    F -- 是 --> H[登录成功]

效果

graph TB
    A[用户点击登录按钮] --> B(系统验证用户名)
    B --> C{"用户名正确？"}
    C -- 否 --> D[提示用户名错误]
    C -- 是 --> E(系统验证密码)
    E --> F{"密码正确？"}
    F -- 否 --> G[提示密码错误]
    F -- 是 --> H[登录成功]

链接流程图：

代码：

flowchart LR
    A[查找数据] --> B[(用户数据)] & C[(订单数据)] --> D[订单列表]

效果：

flowchart LR
    A[查找数据] --> B[(用户数据)] & C[(订单数据)] --> D[订单列表]

复杂流程图：

代码：

flowchart LR
    A & B --> C & D

效果：

flowchart LR
    A & B --> C & D

子图流程图：

代码：

flowchart LR
    A3 --> B1
    A2 --> A3
    B2 --> A1

    subgraph 子表1
        A1 --> B1
    end

    subgraph 子表2
        A2 --> B2
    end

    subgraph 子表3
        A3 --> B3
    end

效果：

flowchart LR
    A3 --> B1
    A2 --> A3
    B2 --> A1

    subgraph 子表1
        A1 --> B1
    end

    subgraph 子表2
        A2 --> B2
    end

    subgraph 子表3
        A3 --> B3
    end

在线绘制图表：

专门支持 Mermaid 渲染的在线编辑器：Mermaid Live Editor
支持 Mermaid 语法的 Markdown 编辑器：Typora

4、原生 HTML

Markdown 支持嵌入原生的 HTML 标签来实现更复杂的格式化需求。下面我将分类介绍一些常用的 HTML 标签：

文本格式

标签:  和 
描述:  用于强调文本的重要性，通常以粗体显示； 用于强调语气，通常以斜体显示。
示例:

这里用 **strong** 标签来强调文字。
这里用 *em* 标签来强调文字。

列表

标签: <ul>, <ol>, <li>
描述: <ul> 用于无序列表；<ol> 用于有序列表；<li> 定义列表项。
示例:

无序列表:
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul>

有序列表:
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

表格

标签: <table>, <tr>, <th>, <td>
描述: <table> 定义表格；<tr> 定义表格中的行；<th> 定义表头单元格；<td> 定义普通单元格。
示例:

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

图像

标签: <img>
描述: <img> 用于在文档中插入图像。
示例:

<img src="path/to/image.jpg" alt="描述性文本" width="200" height="200">

超链接

标签: <a>
描述: <a> 用于创建超链接。
示例:

<a href="http://example.com">访问示例网站</a>

段落

标签: 
描述:  用于定义段落。
示例:

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

水平线

标签: <hr>
描述: <hr> 在页面上插入一条水平线，用来分割内容。
示例:

<hr>

注脚与脚注

虽然 Markdown 不直接支持 HTML 中的  或  标签来创建上标和下标，但你可以使用 HTML 来达到目的。

标签: , 
描述:  创建上标， 创建下标。
示例:

H<sub>2</sub>O 或者 2<sup>2</sup>=4

请注意，不是所有的 Markdown 解析器都完全支持所有的 HTML 标签，所以在使用这些标签时，请确保你的 Markdown 渲染器支持它们。此外，在使用 HTML 标签时，请确保标签正确地闭合，否则可能会导致渲染错误。

版权声明：
作者：码手Lion
链接：https://www.mslion.net/65/
来源：码手Lion的博客
文章版权归作者所有，未经允许请勿转载。

THE END

二维码

优化开发体验：VSCode配置技巧分享

< <上一篇

CSS 轻松实现水平与垂直居中

下一篇>>