探索 Markdown 的排版技巧与高级应用_老汪软件技巧-棋牌游戏开发

作者：老汪软件技巧
发表时间：2024-10-09 15:02
浏览量：

一、引言

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

二、Markdown 的优势

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

三、Markdown 基本语法1、标题

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

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

2、字体样式

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

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

3、换行

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

标签。

4、引用

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

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

5、链接

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

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

6、图片

插入图片的语法：

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

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

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

调整尺寸大小：

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

调整对齐方式：

说明：# 前面不需要空格

实例：

![封面图](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、待办事项

创建待办事项列表：

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

2、数据学公式

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

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

块级公式：如果希望公式单独占一行，并居中显示，则可以使用双美元符号 $$ 或者 \[\] 来包裹公式如：$$ E=mc^2 $$ 或 \[ E=mc^2 \]

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

上标和下标下标：使用 _ 符号分数平方根开方极限导数积分定积分：使用 \int_{a}^{b} 表达式 dx求和求积矩阵

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

矩阵 (带括号)

矩阵 (带括号)：使用 \begin{pmatrix} ... \end{pmatrix}。

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

矩阵 (带花括号)

矩阵 (带花括号)：使用 \begin{Bmatrix} ... \end{Bmatrix}

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

矩阵 (带竖线)

矩阵 (带竖线)：使用 \begin{vmatrix} ... \end{vmatrix}

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

矩阵 (带双竖线)

矩阵 (带双竖线)：使用 \begin{Vmatrix} ... \end{Vmatrix}

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

箭头箭头 (带标签)逻辑符号逻辑“或”：使用 \lor逻辑“非”：使用 \lnot集合符号不属于：使用 \notin包含：使用 \subset真包含：使用 \subseteq包含于：\supset真包含于：使用 \supseteq3、流程图

如果想创建流程图、序列图、甘特图等图表，可使用 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 表示

设置方向：用词含义

从上到下

从下到上

从左到右

从右到左

定义节点：

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

在线绘制图表：4、原生 HTML

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

文本格式

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

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

列表

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

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

表格

标签: , , , 描述: 定义表格；定义表格中的行；定义表头单元格；定义普通单元格。示例:

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

图像

上一条查看详情 +MySQL新增字段/索引会不会锁表?

下一条查看详情 +通过栈(Stack)和队列(Queue)优化C#中的代码效率：实际应用与LeetCode算法问题求解