Typora快速上手Markdown编写
文章目录
- Markdown编写指南（以Typora为例）
-
-
-
- ==前言：==
-
- 一、标题
-
- 快捷键
- 二、段落
-
- 1、换行/段
- 2、分割线
- 三、文字显示
-
- 1、字体
- 2、上下角标
- 3、转义\解决解析冲突问题
- 四、列表
-
- 1、无序列表
-
- 代码及效果：
- 2、有序列表
-
- **代码及效果**：
- 3、任务列表（方框，带勾方框）
-
- **代码及效果**
- 五、Quote 区块显示
- 六、Code 代码显示
-
- 1、行内代码
- 2、代码块及高亮
-
- （1）直接创建高亮代码块
- （2）设置不在代码块中的代码
- 七、跳转链接
- 八、脚注
- 九、图片插入
-
-
- **1. 基础插入方式**
- **2. 图片语法与属性**
-
- 十、表格
- 十、表格
- 十一、mermaid图表使用
-
- **1. 流程图（Flowchart）**
- **2. 序列图（Sequence Diagram）**
- **3. 类图（Class Diagram）**
- **4. 状态图（State Diagram）**
- **5. 甘特图（Gantt Chart）**
- **6. 饼图（Pie Chart）**
- **7. 旅程图（Journey Map）**
- **8. 组织架构图（Organization Chart）**
- **9.使用总结**
- 10.语法共性、技巧及注意事项
- 十二、表情符号
- 其他乱七八糟
- 其他乱七八糟
-
- 目录生成：在首行输入**[TOC]然后按回车**可以自动生成如上的目录，可以帮助在博客等不显示大纲的地方实现目录跳转。
Markdown编写指南（以Typora为例）
前言：
学markdown的时候写的，旨在快速上手markdown文本的编写，包含常用的格式快捷键和表格、图片等使用方式，可用于博客撰写、README撰写等，另外是用Typora写的，可能不同的编辑器渲染有点差异，但是大题都是一致的
一、标题
1 # 一级标题
2 ## 二级标题，以此类推
快捷键
-
标题级别：Ctrl+数字1-6 可以快速将选中文本调成对应级别的标题，Ctrl+0 将选中文本调整为普通正文
-
标题级别增减：Ctrl+加号/减号 对标题级别进行加减
二、段落
1、换行/段
- ①：直接回车换段落，效果如下：
这是第一行
这是第二行
- ②：shift+enter换行间距更加短，效果如下：
这是第一行
这是第二行
2、分割线
--- 或 +++ 或 *** 加 enter
输入三个减-号或三个*号+enter回车
上面是一条分割线，下面也是
三、文字显示
1、字体
| 格式 | 代码示例 | 快捷键（Windows/Linux） | 效果 |
|---|---|---|---|
| 粗体 | 用双*包裹：**粗体** |
Ctrl + B |
这是粗体 |
| 斜体 | 用单*包裹：*斜体* |
Ctrl + I |
这是斜体 |
| 下划线 | 用下划线 |
Ctrl + U |
这是下划线 |
| 删除线 | 用双~包裹：~~删除线~~ |
Shift + Alt + S |
|
| 高亮 | 用双=包裹：==高亮== |
无默认快捷键 | 这是高亮 |
| 高亮（HTML） | 用高亮 |
无默认快捷键 | 这是高亮 |
2、上下角标
| 格式 | 语法规则 | 示例代码 | 显示效果 |
|---|---|---|---|
| 上标 | 用^包裹内容（可嵌套） |
x^2^ |
x2 |
| 下标 | 用~包裹内容（可嵌套） |
H~2~O |
H2O |
| 混合 | 上标下标可组合使用 | x~1~^2^ |
x12 |
| 多行 | 内容包含空格时用大括号 {} | $x^{2+3}$ |
x 2 + 3 x^{2+3} x2+3 |
| 嵌套 | 多层符号需用大括号包裹 | $x^{y^z}$ |
x y z x^{y^z} xyz |
使用说明：
- 基础语法：上标
^、下标~，内容直接跟在符号后，无空格时可省略大括号。 - 复杂场景：当内容较为复杂时候，当内容包含运算符、数字组合或多层嵌套时，使用$$编辑公式的方法，用
{}包裹（如a_{i+1}显示为 aᵢ₊₁）。
3、转义\解决解析冲突问题
| 问题场景 | 冲突原因 | 转义方法 | 示例输入 | 最终显示效果 |
|---|---|---|---|---|
输入星号*被解析为斜体 |
Markdown 中*表示斜体 |
用单个反斜杠\转义 |
1\*2\*3 |
1*2*3 |
输入反斜杠\被转义 |
\是 Markdown 的转义字符 |
用三个反斜杠\\\ |
\\\* |
\* |
同时需要\和* |
需双重转义 | 四个反斜杠 + 星号\\\\* |
1\\\\*2\\\\*3 |
1\*2\*3 |
转义逻辑解析：
- 普通转义：
\*会被解析为文本星号*（因为\转义了*）。 - 反斜杠保留：输入
\\会显示为单个\（第一个\转义了第二个\）。 - 组合场景：
- 输入
\\\*时，前两个\\显示为\，第三个\转义*，最终显示为\*。 - 输入
\\\\*时，前四个\\显示为\\，最后一个*保持为文本星号，最终显示为\\*。
- 输入
四、列表
1、无序列表
| 特性 | 说明 | 代码示例 | 快捷键 |
|---|---|---|---|
| 基础语法 | 用*、-或+加空格开头 |
* 列表项1 - 列表项2 |
Ctrl + Shift + ]（自动补全） |
| 换行操作 | 按Enter创建下一个列表项，按两次Enter退出列表 |
* 第一行 * 第二行 |
无直接快捷键，需手动输入 |
| 分级嵌套 | 按Tab缩进创建下级列表，按Shift + Tab提升层级 |
* 一级 * 二级 * 三级 |
缩进：Tab；提升：Shift + Tab |
代码及效果：
*、-或+加空格
- 这是一个无序列表
- 按一次enter开下一行列表，两次退出
- 往下分级按tab键
- 再按tab
- 按shift+tab键升高一级
- 往下分级按tab键
2、有序列表
| 特性 | 说明 | 代码示例 | 快捷键 |
|---|---|---|---|
| 基础语法 | 用数字加.加空格开头（如1. ），Markdown 自动渲染为连续编号 |
1. 第一项 2. 第二项 |
|
| 分级嵌套 | 嵌套方式与无序列表相同（Tab缩进 /Shift + Tab提升） |
1. 一级 1. 二级 1. 三级 |
缩进逻辑与无序列表一致 |
| 显示效果 | 以阿拉伯数字加圆点作为标记，层级嵌套时显示为1.、1.1、1.1.1等 |
实际显示： 1. 第一项 2. 第二项 | 编号格式可通过 CSS 自定义 |
-
代码及效果：
数字 加 . 加 空格
- 第一条
- 第二条
- 按tab进入下级列表
- shift+tab进入上级列表
- 两次回车返回编辑正文
3、任务列表（方框，带勾方框）
代码及效果
-
带勾
- [ ]：打出无序列表加空格加[加空格加] -
不带勾
- [x]：打出无序列表加空格加[加x加] -
这是一条任务列表
-
这是一条打勾任务列表
-
与无序列表类似，在列表后按下
回车新增列表- 按下
回车和tab，降低一级，新增子列表
- 按下
-
按下
shift和tab提升一级
五、Quote 区块显示
右箭头＋空格
两次回车退出区块编辑
六、Code 代码显示
1、行内代码
- 代码及效果：
使用英文输入法下的``（ESC下面）对内容进行包裹
int n=0;
- 快捷键：
框选内容后按下 Ctrl+Shift+``
2、代码块及高亮
（1）直接创建高亮代码块
-
代码及效果：
-
代码：```加 代码语言 加 回车
-
解释：如：```cpp enter
-
//这是一个代码块
#include注意事项：
- 在CSDN中的markdown渲染是不渲染代码语言名（就是点击代码块右下角显示的）为 c++ 的代码块的高亮的，写成cpp即可高亮
- 在CSDN中的markdown代码块高亮，语言类型的应该所有字母应该全小写，否则没有高亮，如Python应该写成python
（2）设置不在代码块中的代码
- 代码及效果：
- 代码：```内部的代码```
- 解释：框选代码，使用三对英文状态下的``包裹代码
//这是一个代码块
#include
int main()
{
int n=0;
n++;
return 0;
}
//Ctrl+enter键退出编辑代码块
七、跳转链接
| 类型 | 语法格式 | 示例代码 | 显示效果 |
|---|---|---|---|
| 网页链接 | [显示文本](网址) |
[哔哩哔哩 (゜-゜)つロ 干杯~-bilibili](https://www.bilibili.com/) |
哔哩哔哩 (゜-゜)つロ 干杯~-bilibili |
| 标题链接 | [链接文本](#标题锚点) 注意()中#的数量和标题的级别一样，且#和标题中间不能有空格 |
[标题1](##一、标题) |
标题1 |
| 邮箱链接 | [邮箱文本](mailto:邮箱地址) |
[联系我们](mailto:[email protected]) |
联系我们 |
注意事项：
-
访问需要按住键盘的Ctrl再点击。
-
快捷键Ctrl+k
-
CSDN中的markdown无法实现页内的标题链接跳转，渲染出来只有样式但是没实际作用
八、脚注
| 类型 | 语法格式 | 示例代码 | 显示效果 |
|---|---|---|---|
| 脚注引用 | 在正文需要标注的位置输入[^标记]，其中标记可为数字、字母或文本 |
这是正文内容[^note1] |
这是正文内容 [^note1] |
| 脚注定义 | 在文档末尾输入[^标记]: 解释内容，支持换行和 HTML 标签 |
[^note1]: 这是脚注的解释说明，可包含 |
[^note1]: 这是脚注的解释说明，可包含 多行内容(表格渲染有偏差，看下面) |
| 自动编号 | 若标记为数字（如[^1]），解析器会自动按顺序编号；若为文本则保持自定义标记 |
[^2]: 第二个脚注 [^a]: 自定义标记脚注 |
- 效果展示：
文字1 可以使用Ctrl+点击的方式跳转到解释文本
九、图片插入
1. 基础插入方式
| 插入方式 | 操作步骤 | 示例/快捷键 | 注意事项 |
|---|---|---|---|
| 复制粘贴 | 从外部复制图片（如截图、文件管理器中选中），在Typora中直接粘贴 | Ctrl + V |
默认保存到当前目录或配置的图片文件夹，需设置「偏好设置→图像」 |
| 拖放 | 将本地图片文件拖入Typora编辑区域 | 无快捷键 | 同复制粘贴，自动生成Markdown语法 |
| 插入菜单 | 点击顶部工具栏插入 → 图片，选择本地图片文件 |
Ctrl + Shift + I（Windows/Linux） |
可设置默认插入方式（如自动上传图床） |
2. 图片语法与属性
| 语法元素 | 格式 | 示例代码 | 效果 |
|---|---|---|---|
| 基本语法 |  |
 |
|
| 添加标题 | 在括号后加"标题文本"（鼠标悬停时显示） |
 |
鼠标悬停时显示"标题"文字 |
| 调整尺寸 | 使用HTML标签 |
|
图片宽度固定为300像素 |
| 居中对齐 | 使用HTML的 |
|
图片居中显示 |
注意事项
-
强烈建议设置自动保存，因为常用的截图粘贴、复制粘贴等保存的路径可能很容易被清理，导致图片失效：
-
粘贴图片时自动复制到指定文件夹（避免图片与文档分离）
「格式→图像→插入图片时」选择「复制到指定路径」并设置文件夹 粘贴后图片自动保存到
./assets/images/目录或：「格式→图像→全局图像设置」选择对应的方式
-
-
Typora中如果使用的是
![]()的格式，想要转成html来设置更详细的布局内容，可以右键->缩放，会自动转换成html的引用格式 -
调整尺寸：
- 右键图片会有缩放选项方便快捷缩放
- 对html格式的图片引用，可以添加
style="zoom:67%;来指定缩放比 - 对html格式的图片引用，可以输入HTML的
width等属性固定长宽
-
若想要避免本地图片引用导致分享给其他人时图片失效，可以使用图床，可以选择gitee、pigo等工具搭建免费图床，不具体展开
-
在CSDN直接导入.md文件也有可能导致引用本地图片失效的问题，可以参考上一行搭建图床，也可以重新复制粘贴一份到CSDN的md编辑器中。
十、表格
| 功能 | 快捷键/操作 | 说明 |
|---|---|---|
| 创建表格 | Ctrl + T |
弹出对话框设置行列数，或输入` |
| 单元格跳转 | Tab |
光标右移至下一个单元格 |
| 单元格回退 | Shift + Tab |
光标左移至上一个单元格 |
| 单元格内换行 | Shift + Enter |
在当前单元格内换行 |
| 删除当前行 | Ctrl + Shift + 退格 |
删除光标所在行 |
| 下方插入行 | Ctrl + Enter |
在光标所在行下方插入新行 |
| 调整列对齐 | 标题行中添加:, 如` |
:左对齐 |
| 打开表格工具栏 | 点击表格内任意位置 | 顶部出现工具栏，可合并单元格、调整宽度等 |
十、表格
| 功能 | 快捷键/操作 | 说明 |
|---|---|---|
| 创建表格 | Ctrl + T |
弹出对话框设置行列数，或输入` |
| 单元格跳转 | Tab |
光标右移至下一个单元格 |
| 单元格回退 | Shift + Tab |
光标左移至上一个单元格 |
| 单元格内换行 | Shift + Enter |
在当前单元格内换行 |
| 删除当前行 | Ctrl + Shift + 退格 |
删除光标所在行 |
| 下方插入行 | Ctrl + Enter |
在光标所在行下方插入新行 |
| 调整列对齐 | 标题行中添加:, 如` |
:左对齐 |
| 打开表格工具栏 | 点击表格内任意位置 | 顶部出现工具栏，可合并单元格、调整宽度等 |
十一、mermaid图表使用
Mermaid 是一个强大的图表生成库，支持多种类型的图表，可用于可视化各种逻辑关系、流程和结构。以下是 Mermaid 支持的主要图表类型及示例：
1. 流程图（Flowchart）
用于展示工作流程或算法逻辑，支持顺序、条件、循环等结构。
-
核心语法
flowchart TD：定义流程图方向（TD=Top Down，LR=Left Right）。A --> B：实线箭头表示流程走向，[ ]包裹节点文本。{ }：表示条件判断节点。
-
场景：业务流程、算法逻辑、任务步骤可视化。
2. 序列图（Sequence Diagram）
展示对象间的交互时序，常用于描述系统通信流程。
-
关键语法：
participant：声明参与者（角色）。->>：实线箭头（异步消息），-->>：虚线箭头（同步消息）。- 箭头右侧文本描述消息内容。
-
场景：系统通信、API 调用、多模块交互流程。
3. 类图（Class Diagram）
描述面向对象系统中的类、接口及其关系（继承、关联、依赖等）。
-
关键语法：
class：定义类，{}内声明属性和方法（-私有，+公有）。- 关系符号：
<|--继承，|..实现接口，*--关联关系。
-
场景：面向对象设计、系统架构建模、类关系展示。
4. 状态图（State Diagram）
展示对象的状态转换过程，适用于有限状态机建模。
-
关键语法：
stateDiagram-v2：声明状态图版本。[*]：表示初始状态或结束状态。A --> B: 条件：状态 A 在条件触发下转换为状态 B。
-
场景：订单状态、设备状态机、流程状态转换。
5. 甘特图（Gantt Chart）
用于项目管理，展示任务的时间安排和依赖关系。
-
关键语法：
gantt：甘特图关键字dateFormat：定义日期格式。section：分组任务。任务名 :标识, 开始时间, 持续时间：after 标识表示依赖关系。
-
场景：项目管理、进度跟踪、资源分配规划。
6. 饼图（Pie Chart）
展示数据占比关系，适用于统计分析。
-
关键语法：
pie：饼图关键字，设置图表title：设置图表标题。类别名 : 数值：每个数据项占比（数值总和为 100 时显示百分比）。
-
场景：市场份额、用户分布、数据占比分析。
7. 旅程图（Journey Map）
展示用户旅程或流程阶段，适用于用户体验设计。
-
关键语法：
journey：旅程图关键字section：划分旅程阶段。步骤名 : 起始值, 结束值：数值表示旅程进度（0-100）。
-
场景：用户体验设计、服务流程优化、产品使用路径分析。
8. 组织架构图（Organization Chart）
展示公司或团队的层级结构。
-
关键语法：
graph TD：定义图表方向（TD = 自上而下）。- 节点通过
-->连接，[ ] 内为节点文本。
-
场景：公司架构、团队分工、组织层级展示。
9.使用总结
| 图表类型 | 关键字 | 适用场景 |
|---|---|---|
| 流程图 | graph | 业务流程、算法逻辑 |
| 序列图 | sequenceDiagram | 系统交互、时序分析 |
| 类图 | classDiagram | 面向对象设计、系统架构 |
| 甘特图 | gantt | 项目管理、时间规划 |
| 饼图 | pie | 数据占比、统计分析 |
| 状态图 | stateDiagram | 状态转换、有限状态机 |
| 用户旅程图 | journey | 展示用户旅程或流程阶段 |
10.语法共性、技巧及注意事项
- 图表声明：每种图表以特定关键字开头（如
flowchart、sequenceDiagram）。 - 节点命名：支持中文、英文及特殊符号，建议用
[ ]包裹长文本。 - 样式扩展：可通过
style标签自定义颜色、边框等（如style A fill:#f9f）。 - 工具支持：Typora、VS Code 等编辑器需开启 Mermaid 支持以渲染图表。
- 语法版本：Mermaid v8+ 支持更多图表类型，部分旧版本可能不兼容。
- 编辑器支持：确保工具（如 Typora、VS Code）已安装 Mermaid 插件或开启渲染功能。
- 自定义样式：可通过
style标签修改图表颜色、字体等样式（如style A fill:#f9f,stroke:#333）。 - 美观：若有截图需要，部分内容建议上mermaid官网在线编辑器进行样式查看 ，如流程图和组织架构图，官网编辑器上会渲染的更圆润一点，不会那么多棱角。
通过 Mermaid，无需依赖绘图工具即可在 Markdown 中生成专业图表，极大提升文档的可视化能力。
十二、表情符号
| 功能 | 操作方式 | 示例代码 | 显示效果 |
|---|---|---|---|
| 代码输入表情 | 输入:表情名称: |
:smile: |
|
| 触发自动补全 | 输入: 后按ESC |
输入:h后显示:happy:等 |
自动补全表情代码 |
| 菜单选择表情 | 编辑 → 表情与符号 |
在弹窗中选择分类和表情 | 插入对应表情符号 |
| 常用表情示例 | - 笑脸: :smile:- 哭脸: :cry: |
:heart: |
❤️ |
| 特殊符号支持 | 输入:符号名称:，如:copyright: |
:copyright: |
© |
其他乱七八糟
- Typora也有数学公式输入，也好看的，但是用的较少，不具体展开，平时用也懒得打直接复制ai（ai复制过来把包裹换成$$就能渲染了）
- 发现豆包直接复制的内容放到Typora中是渲染不出来的（也可能版本或者我的问题），有个方法是打开csdn的md编辑器或者是打开vscode，粘贴进去再全选复制，这样刷一遍复制到Typora就可以了
r>- 哭脸: :cry: | :heart: | ❤️ |
| 特殊符号支持 | 输入:符号名称:，如:copyright: | :copyright: | © |
其他乱七八糟
- Typora也有数学公式输入，也好看的，但是用的较少，不具体展开，平时用也懒得打直接复制ai（ai复制过来把包裹换成$$就能渲染了）
- 发现豆包直接复制的内容放到Typora中是渲染不出来的（也可能版本或者我的问题），有个方法是打开csdn的md编辑器或者是打开vscode，粘贴进去再全选复制，这样刷一遍复制到Typora就可以了
解释说明（如果想要多行的注释，可以输入
来换行，可以在偏好设置->markdown->取消勾选显示br ↩︎