本文详细介绍了如何在Markdown编辑器Typora中使用快捷键进行文字格式化，如斜体、加粗、表格、代码块、数学公式等，并涵盖了主题下载、HTML拓展和图表绘制等内容。适合Markdown新手和技术文档作者。
Markdown编辑器Typora使用教程
文章目录
前言
typroa是一款很不错的轻量型markdown编辑器，下面从Typroa的快捷键方面、常用功能、数学公式编辑、HTML拓展四个方面来介绍Typroa的使用方法。
typora作为一种Markdown的编辑工具，经常用于博客文章的编辑，技术性文章的编辑。本篇文章主要介绍typora的使用，至于如何下载与安装请看其他博文。
一、Markdown是什么？
Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。
二、Typroa是什么？
Typora 是一款由 Abner Lee 开发的轻量级 Markdown 编辑器，与其他 Markdown 编辑器不同的是，Typora 没有采用源代码和预览双栏显示的方式，而是采用所见即所得的编辑方式，实现了即时预览的功能，但也可切换至源代码编辑模式。
百度百科
三、使用教程
1. 快捷键
| 功能 | 快捷键 |
|---|---|
| 加粗 | Ctrl + B |
| 斜体 | Ctrl + I |
| 引用 | Ctrl + Shift + Q |
| 插入链接 | Ctrl + K |
| 删除线 | Alt + Shift + 5 |
| 清楚样式 | Ctrl + \ |
| 插入代码 | Ctrl + Shift + ` |
| 插入代码块 | Ctrl + Shift + K |
| 插入公式块 | Ctrl + Shift + M |
| 插入图片 | Ctrl + Shift + I |
| 有序列表 | Ctrl + Shift + [ |
| 无序列表 | Ctrl + Shift + ] |
| 列表缩进 | Ctrl + [ 或 Ctrl + ] |
| 一级标题 | Ctrl + 1 |
| 二级标题 | Ctrl + 2 |
| 三级标题 | Ctrl + 3 |
| 四级标题 | Ctrl + 4 |
| 五级标题 | Ctrl + 5 |
| 六级标题 | Ctrl + 6 |
| 段落 | Ctrl + 0 |
| 提升标题 | Ctrl + = |
| 降低标题 | Ctrl + - |
| 插入表格 | Ctrl + T |
| 下方插行 | Ctrl + Enter |
| 上下移行 | Alt + 上下键 |
| 左右移列 | Alt + 左右键 |
| 删除行 | Ctrl + Shift + 退格 |
| 显示/隐藏侧边文件栏 | Ctrl + Shift + L |
| 大纲 | Ctrl + Shift + 1 |
| 文档列表 | Ctrl + Shift + 2 |
| 文件树 | Ctrl + Shift + 3 |
| 搜索 | Ctrl + Shift + F |
| 源代码模式 | Ctrl + / |
| 专注模式 | F8 |
| 打字机模式 | F9 |
| 切换到全屏 | F11 |
| 实际大小 | Ctrl + Shift + 9 |
| 放大 | Ctrl + Shift + = |
| 缩小 | Ctrl + Shift + - |
| 应用内窗口切换 | Ctrl + Tab |
| 开发者模式 | Shift + F |
| 撤销 | Ctrl + Z |
| 重做 | Ctrl + Y |
| 复制 | Ctrl + C |
| 粘贴 | Ctrl + V |
| 剪切 | Ctrl + X |
| 复制为Markdown | Ctrl + Shift + C |
| 粘贴为纯文本 | Ctrl + Shift + V |
| 全选 | Ctrl + A |
| 选中当行 | Ctrl + L |
| 选中当前格式的文字 | Ctrl + E |
| 选中当前词 | Ctrl + D |
| 跳转到选中的文字 | Ctrl + J |
| 删除当前词语 | Ctrl + Shift + D |
| 查找 | Ctrl + F |
| 查找下一个 | F3 |
| 查找上一个 | Shift + F3 |
| 替换 | Ctrl + H |
| 表情 | win + . |
| 新建 | Ctrl + N |
| 新建窗口 | Ctrl + Shift + N |
| 打开 | Ctrl + O |
| 快速打开 | Ctrl + P |
| 保存 | Ctrl + S |
| 另存为 | Ctrl + Shift + S |
| 偏好设置 | Ctrl + ， |
| 关闭 | Ctrl + W |
2. 常见功能
2.1 斜体（快捷键 Ctrl + I）
在文字的两端各加一个星号就会让文字变成斜体
*斜体* >>>> 斜体文字
- HTML方面的拓展（typora是支持html的）
斜体文字的html标签
<i>斜体</i>
2.2 加粗（快捷键 Ctrl + B）
在文字的两端各加两个星号*
**加粗** >>>> 加粗
- HTML方面的拓展
加粗文字的html标签
<b>加粗</b>
2.3 粗斜体
在文字的两端各加三个星号*
***粗斜体*** >>>> 粗斜体
2.4 文字高亮
首先先开启高亮的功能（默认是关闭的），开启方法如下：
-
点击
文件 —> 偏好设置（也可以直接 Ctrl + ，快捷键打开） -
打开偏好设置后选择
Markdown，勾选高亮
-
然后重启即可
重启后，在文字两端各加两个=号即是高亮
==高亮== >>>> 高亮
2.5 删除线（快捷键 Alt + Shift + 5）
在文字的两端各加两个~号
~~删除线~~ >>>> 删除线
- HTML方面的拓展
删除线的html标签
<del>删除线</del>
2.6 下划线（快捷键 Ctrl + U）
使用HTML标签 <u>与</u>
<u>下划线</u> >>>> 下划线
- HTML方面的拓展
下划线的html标签
<u>删除线</u>
2.7 分割线
在一行中敲三个及以上的 + 号或 ***** 号 或 - 号
***
+++
—
- HTML方面的拓展
分割线的html标签
<hr>
2.8 区块
区块是用于引一些如代码或者他人写的文案的文字块
-
使用>加空格创建一个一般的区块
-
若要插入代码块可以使用快捷键 Ctrl + Shift + K
-
若要插入公式块可以使用快捷键 Ctrl + Shift + M
-
文字两端输入`号
-
<!--HTML拓展--> <code>代码块</code> <kbd>键盘码</kbd>
2.9 插入代码
- 代码左右两端各输入三个```号，即可插入代码
```print(‘hello world!’)``` >>>> print('hello world!')
- 输入三个```号后，输入编程语言的名称也可以创建代码块
2.10 插入超链接（快捷键 Ctrl + K）
- 语法：[链接文字](链接地址) >>>> 链接文字
- 链接网址：[百度](www.baidu.com) >>>> 百度
- 链接本地文件：[打开test.png](./test.png) >>>> 打开test.png
- 链接页内内容：[跳转到快捷键部分](#1.快捷键) >>>> 跳转到快捷键部分
- HTML方面的拓展
html设置超链接
<a href="/index.html">本文本</a>
2.11 插入图片（快捷键 Ctrl + Shift + I）
- 插入本地照片
 - 插入网络照片
- HTML方面的拓展
html设置超链接
<img src="图片地址"> 插入图片
<img src="图片地址" sytle="zoom=20%;"> 图片比例缩放
<img src="图片地址" align="left"> 调整图片的位置
<img src="图片地址" width="宽度" height="高度"> 调整图片的大小
2.12 列表（快捷键 Ctrl + Shift + [ 与 Ctrl + Shift + ]）
-
无序列表，输入*号或-号或+号后空格即可，按下回车下一行有会有列表，如果在下一行中敲下tab键那么就会变成下一级列表
<!--无序列表HTML拓展<ul>--> <ul> <li>这里属于第一个</li> <li>第二个</li> <li>第三个</li> </ul> -
有序列表，输入数字后按下空格就会产生有序列表
<!--有序列表HTML拓展<ol>--> <ol> <li>这里属于第一个</li> <li>第二个</li> <li>第三个</li> </ol>
2.13 标题（快捷键 Ctrl + 数字）
输入#号后空格输入的文字就会变成一级标题，输入多少格#号就代表第几级标题，最多六级标题（注意只能在开头输入#号才表示标题）
- 把光标放置标题所在行按下 Ctrl + = 可提升标题等级
- 把光标放置标题所在行按下 Ctrl + - 可降低标题等级
- HTML方面的拓展
html标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2.14 表格（快捷键 Ctrl + T）
语法：|表头1|表头2|表头3|表头4|
| 表头1 | 表头2 | 表头3 | 表头4 |
|---|---|---|---|
- 在任意行中按下 Ctrl + Enter 下方加一行
- 在特定行中按下 Alt + 上/下键 则此行上/下移一行
- 在特定列中按下 Alt + 左/右键 则此行左/右移一列
- 在特定行中按下Ctrl + Shift + 退格 此行删除
3. 数学公式
3.1 插入数学公式
-
行内输入（如：文字的之间夹着公式 1 × 1 = 1 1\times1=1 1×1=1 ）
-
首先需要打开内联插入模式（默认是关闭的），以下为打开的方法
-
点击
文件 —> 偏好设置（也可以直接 Ctrl + ，快捷键打开） -
打开偏好设置后选择
Markdown，勾选内联公式
-
然后重启即可
-
插入内联公式，在公式两端各加一个$号
$e^0+1=2$ >>>> e 0 + 1 = 2 e^0+1=2 e0+1=2 -
公式块输入（快捷键 Ctrl + Shift + M）
在空白行中输入两个$号后回车
l o g 2 4 = 2 log_24=2 log24=2
3.2 常用公式代码
| 描述 | 算式 | Markdown |
|---|---|---|
| 上标 | x 2 x^2 x2 | x^2 |
| 下标 | x 2 x_2 x2 | x_2 |
| 平方根 | 2 \sqrt{2} 2 | \sqrt{2} |
| 分式 | 1 2 \frac{1}{2} 21 | \frac{1}{2} |
| 矢量 | a ⃗ \vec{a} a | \vec{a} |
| 不定积分 | ∫ x d x \int{x}dx ∫xdx | \int{x}dx |
| 定积分 | ∫ 1 2 x d x \int_{1}^{2}{x}dx ∫12xdx | \int_{1}^{2}{x}dx |
| 极限 | lim n → + ∞ n \lim_{n\rightarrow+\infty}{n} limn→+∞n | \lim_{n\rightarrow+\infty}{n} |
| 累加 | ∑ i = 1 n a n \sum_{i=1}^{n}{a_n} ∑i=1nan | \sum_{i=1}^{n}{a_n} |
| 累乘 | ∏ i = 1 n a n \prod_{i=1}^{n}{a_n} ∏i=1nan | \prod_{i=1}^{n}{a_n} |
| 正弦函数 | sin x \sin{x} sinx | \sin{x} |
| 余弦函数 | cos x \cos{x} cosx | \cos{x} |
| 正切函数 | tan x \tan{x} tanx | \tan{x} |
| 余切函数 | c o t x cot{x} cotx | \cot{x} |
| 对数函数 | ln 2 \ln2 ln2 log 2 8 \log_28 log28 lg 10 \lg10 lg10 | \ln2 \log_28 \lg10 |
| 算式 | Markdown |
|---|---|
| + + + | + |
| × \times × | \times |
| ÷ \div ÷ | \div |
| − - − | - |
| = | = |
| ± \pm ± | \pm |
| ≠ \neq = | \neq |
| ≡ \equiv ≡ | \equiv |
| ≤ \leq ≤ | \leq |
| ≥ \geq ≥ | \geq |
| < < < | < |
| > > > | > |
| ⋅ \cdot ⋅ | \cdot |
| 字母 | Markdown |
|---|---|
| α \alpha α | $\alpha$ |
| β \beta β | $\beta$ |
| γ \gamma γ | $\gamma$ |
| θ \theta θ | $\theta$ |
| ρ \rho ρ | $\rho$ |
| λ \lambda λ | $\lambda$ |
| μ \mu μ | $\mu$ |
| Δ \Delta Δ | $\Delta$ |
| π \pi π | $\pi$ |
| Ω \Omega Ω | $\Omega$ |
-
矩阵
[ 1 2 3 4 ] \left[\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}\right] [1324]的语法式为 $\left[\begin{matrix} 1 & 2 \ \3 & 4 \end{matrix}\right]$
- 其中**\left[代表左中括号，\right]代表右中括号。(若把[或]，改成|则会变成行列式 ∣ 1 2 3 4 ∣ \left|\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}\right| ∣∣∣∣1324∣∣∣∣**）
- 在写入元素之前需要输入**\begin{matrix}，结束时需要输入\end{matrix}**。
- **&用来分隔元素，\\**用来分隔行。
-
方程组
KaTeX parse error: No such environment: equation at position 7: \begin{̲e̲q̲u̲a̲t̲i̲o̲n̲}̲ \left\{ … ，的语法式子如下
$\begin{equation} \left\{ \begin{array}{lr} x=\dfrac{3\pi}{2}(1+2t)\cos(\dfrac{3\pi}{2}(1+2t)), & \\ y=s, & 0\leq s\leq L,|t|\leq1\\ z=\dfrac{3\pi}{2}(1+2t)\sin(\dfrac{3\pi}{2}(1+2t)), & \end{array} \right. \end{equation}$- 其中**\begin{equation},\end{equation}**用来表示方程式的开始与结束
- **\left\{第二个\是转义符，表示左中括号，\right.**表示右边什么都没有
- **\begin{array}和\end{array}**表示它们之间的是数组，其实这也可以用来表示矩阵。
- {lr}表示有两列，第一列的值靠左排列，用l表示，第二列的值靠右排列，用r表示，如果是中间对齐则为c。
- 然后下面三行是方程式，用**&分割，用\\**换行。
- 分段函数是同样的方法
4. Typora的拓展应用（HTML层面拓展）
4.1 改变字体大小、颜色、样式
<font size=输入字号 color=输入颜色代码 face=字体名>文字</font>
4.2 HTML空格、回车
<br> <!--这是回车-->
  <!--这是空格-->
4.3 上下标
<sub>下标</sub>
<sup>上标</sup>
5. 主题下载与安装
5.1 主题下载
主题的下载可以在官网下载*http://theme.typora.io/*但是可能无法进去，那么就点击下面的中文官网进行选择下载中文官网主题下载
随便选择一个主题，然后点击download
点击download后一般会进入github仓库，直接下载压缩包即可
5.2 主题安装
找到typroa的本地主题地址，打开typroa的 偏好设置->外观
将上面下载的主题的压缩包内容全部解压到打开的文件夹中，
然后重启typroa,此时就可以看到这个主题了
6. 图的绘制
typroa支持markdown中的一些图表的绘制，要想绘制图表首先需要将图表功能打开
偏好设置->Markdown->图表
画图前需要进入mermaid区块或flow区块等区块，输入```mermaid或```mermaid
flowchatd等等即可进入
6.1 流程图
输入下面代码横向流程图
```mermaid
graph LR %%这代表横向流程图 把LR改成TD即是竖向的了
%%这里的AB...代表节点，[]代表方形框框，()代表圆角框框
%%{}代表斜正方形框框，一般用作判断框框
%%||用来直接输出文字
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
```
Flow区块的画法
```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
%%上面伟定义框框的
%%下面的伟连线
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->o
```
6.2 思维导图
思维导图与流程图的画法一样，这里就不重复了
6.3 UML时序图
```mermaid
sequenceDiagram %%进入sequence区块
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```
merimaid区块时序图的画法
```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram %%说明这是时序图
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```
6.4 甘特图
```mermaid
%%甘特图一般用来表示项目的计划排期，目前在工作中经常会用到。
语法也非常简单，从上到下依次是图片标题、日期格式、项目、项目细分的任务。
%% 语法示例
gantt
title 工作计划
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
```
6.5 状态图
```mermaid
stateDiagram
Start --> First
First --> Second
First --> Third
Second --> End
Third --> End
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {}
```
stateDiagram
Start --> First
First --> Second
First --> Third
Second --> End
Third --> End
state First {
[*] --> fir
fir --> [*]
}
state Second {
[*] --> sec
sec --> [*]
}
state Third {}
6.6 类图
```mermaid
%%<|-- 表示继承，+ 表示 public，- 表示 private
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
```
6.7 饼图
```mermaid
%%饼图使用 pie 表示，标题下面分别是区域名称及其百分比。
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
```
画图参考：
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
