Typora快速上手Markdown编写

TT-Kun

已于 2025-07-02 09:13:33 修改

阅读量1.6k

点赞数 33

CC 4.0 BY-SA版权

分类专栏： Mine 文章标签： markdown typora

于 2025-07-02 01:01:18 首次发布

本文链接：https://blog.csdn.net/TTKunn/article/details/149058459

Mine 专栏收录该内容

4 篇文章

订阅专栏

文章目录

Markdown编写指南（以Typora为例）

目录生成：在首行输入**[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`	这是斜体
下划线	用`<u>`标签：`<u>下划线</u>`	`Ctrl + U`	这是下划线
删除线	用双`~`包裹：`~~删除线~~`	`Shift + Alt + S`	~~这是删除线~~
高亮	用双`=`包裹：`==高亮==`	无默认快捷键	这是高亮
高亮（HTML）	用`<mark>`标签：`<mark>高亮</mark>`	无默认快捷键	这是高亮

2、上下角标

格式	语法规则	示例代码	显示效果
上标	用`^`包裹内容（可嵌套）	`x^2^`	x²
下标	用`~`包裹内容（可嵌套）	`H~2~O`	H₂O
混合	上标下标可组合使用	`x~1~^2^`	x₁²
多行	内容包含空格时用大括号 {}	$x^{2+3}$	$x^{2+3}$
嵌套	多层符号需用大括号包裹	$x^{y^z}$	$x^{y^z}$

使用说明：

基础语法：上标^、下标~，内容直接跟在符号后，无空格时可省略大括号。
复杂场景：当内容较为复杂时候，当内容包含运算符、数字组合或多层嵌套时，使用$$编辑公式的方法，用{}包裹（如a_{i+1}显示为 aᵢ₊₁）。

3、转义\解决解析冲突问题

问题场景	冲突原因	转义方法	示例输入	最终显示效果
输入星号`*`被解析为斜体	Markdown 中`*`表示斜体	用单个反斜杠`\`转义	`1\2\3`	`123`
输入反斜杠`\`被转义	`\`是 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键升高一级

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<iostream>
int main()
{
    int n=0;
    n++;
	return 0;
}
//Ctrl+enter键退出编辑代码块

注意事项：

在CSDN中的markdown渲染是不渲染代码语言名（就是点击代码块右下角显示的）为 c++ 的代码块的高亮的，写成cpp即可高亮
在CSDN中的markdown代码块高亮，语言类型的应该所有字母应该全小写，否则没有高亮，如Python应该写成python

（2）设置不在代码块中的代码

代码及效果：
- 代码：```内部的代码```
- 解释：框选代码，使用三对英文状态下的``包裹代码

//这是一个代码块
#include<iostream>
int main()
{
    int n=0;
    n++;
	return 0;
}
//Ctrl+enter键退出编辑代码块

七、跳转链接

类型	语法格式	示例代码	显示效果
网页链接	`[显示文本](网址)`	`[哔哩哔哩 (゜-゜)つロ干杯~-bilibili](https://www.bilibili.com/)`	哔哩哔哩 (゜-゜)つロ干杯~-bilibili
标题链接	`[链接文本](#标题锚点)` 注意()中#的数量和标题的级别一样，且#和标题中间不能有空格	`[标题1](##一、标题)`	标题1
邮箱链接	`[邮箱文本](mailto:邮箱地址)`	`[联系我们](mailto:support@example.com)`	联系我们

注意事项：

访问需要按住键盘的Ctrl再点击。
快捷键Ctrl+k
CSDN中的markdown无法实现页内的标题链接跳转，渲染出来只有样式但是没实际作用

八、脚注

类型	语法格式	示例代码	显示效果
脚注引用	在正文需要标注的位置输入`[^标记]`，其中`标记`可为数字、字母或文本	`这是正文内容[^note1]`	这是正文内容 [^note1]
脚注定义	在文档末尾输入`[^标记]: 解释内容`，支持换行和 HTML 标签	`[^note1]: 这是脚注的解释说明，可包含<br>多行内容`	[^note1]: 这是脚注的解释说明，可包含多行内容(表格渲染有偏差，看下面)
自动编号	若标记为数字（如`[^1]`），解析器会自动按顺序编号；若为文本则保持自定义标记	`[^2]: 第二个脚注` `[^a]: 自定义标记脚注`

效果展示：

文字¹ 可以使用Ctrl+点击的方式跳转到解释文本

九、图片插入

1. 基础插入方式

插入方式	操作步骤	示例/快捷键	注意事项
复制粘贴	从外部复制图片（如截图、文件管理器中选中），在Typora中直接粘贴	`Ctrl + V`	默认保存到当前目录或配置的图片文件夹，需设置「偏好设置→图像」
拖放	将本地图片文件拖入Typora编辑区域	无快捷键	同复制粘贴，自动生成Markdown语法`![图片描述](路径)`
插入菜单	点击顶部工具栏`插入 → 图片`，选择本地图片文件	`Ctrl + Shift + I`（Windows/Linux）	可设置默认插入方式（如自动上传图床）

2. 图片语法与属性

语法元素	格式	示例代码	效果
基本语法	`![描述文本](图片路径)`	`![Logo](images/logo.png)`
添加标题	在括号后加`"标题文本"`（鼠标悬停时显示）	`![描述](path/to/image.png "标题")`	鼠标悬停时显示"标题"文字
调整尺寸	使用HTML标签`<img>`（Typora支持Markdown与HTML混合）	`<img src="path" alt="描述" width="300">`	图片宽度固定为300像素
居中对齐	使用HTML的`<div>`包裹	`<div align="center">![图](path)</div>`	图片居中显示

注意事项

强烈建议设置自动保存，因为常用的截图粘贴、复制粘贴等保存的路径可能很容易被清理，导致图片失效：
- 粘贴图片时自动复制到指定文件夹（避免图片与文档分离）
  
  「格式→图像→插入图片时」选择「复制到指定路径」并设置文件夹粘贴后图片自动保存到./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就可以了

其他乱七八糟

Typora也有数学公式输入，也好看的，但是用的较少，不具体展开，平时用也懒得打直接复制ai（ai复制过来把包裹换成$$就能渲染了）
发现豆包直接复制的内容放到Typora中是渲染不出来的（也可能版本或者我的问题），有个方法是打开csdn的md编辑器或者是打开vscode，粘贴进去再全选复制，这样刷一遍复制到Typora就可以了