Markdown编辑器Typora超全使用教程

Asionm

已于 2022-04-18 15:40:35 修改

阅读量2k

点赞数 2

分类专栏： typora 文章标签：编辑器 html markdown

于 2022-02-17 12:41:11 首次发布

本文链接：https://blog.csdn.net/weixin_51735061/article/details/122980058

版权

typora 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Markdown编辑器Typora使用教程

文章目录

Markdown编辑器Typora使用教程
前言
一、Markdown是什么？
二、Typroa是什么？
三、使用教程

前言

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）

插入本地照片 ![本地照片](./照片.jpg)
插入网络照片 ![网络照片](https://www.baidu.com/img/test.png)

HTML方面的拓展
       html设置超链接

       <img src="图片地址">   插入图片
       <img src="图片地址" sytle="zoom=20%;">   图片比例缩放
       <img src="图片地址" align="left">   调整图片的位置
       <img src="图片地址" width="宽度" height="高度">   调整图片的大小

2.12 列表（快捷键 Ctrl + Shift + [ 与 Ctrl + Shift + ]）

无序列表，输入*号或-号或+号后空格即可，按下回车下一行有会有列表，如果在下一行中敲下tab键那么就会变成下一级列表
```

<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\times1=1$ ）
首先需要打开内联插入模式（默认是关闭的），以下为打开的方法
点击 文件 —> 偏好设置（也可以直接 Ctrl + ，快捷键打开）
打开偏好设置后选择Markdown，勾选内联公式
然后重启即可
插入内联公式，在公式两端各加一个$号
$e^0+1=2$ >>>> $e^0+1=2$
公式块输入（快捷键 Ctrl + Shift + M）
在空白行中输入两个$号后回车
$log_24=2$

3.2 常用公式代码

一些数学的表达

描述	算式	Markdown
上标	$x^2$	x^2
下标	$x_2$	x_2
平方根	$\sqrt{2}$	\sqrt{2}
分式	$\frac{1}{2}$	\frac{1}{2}
矢量	$\vec{a}$	\vec{a}
不定积分	$\int{x}dx$	\int{x}dx
定积分	$\int_{1}^{2}{x}dx$	\int_{1}^{2}{x}dx
极限	$\lim_{n\rightarrow+\infty}{n}$	\lim_{n\rightarrow+\infty}{n}
累加	$\sum_{i=1}^{n}{a_n}$	\sum_{i=1}^{n}{a_n}
累乘	$\prod_{i=1}^{n}{a_n}$	\prod_{i=1}^{n}{a_n}
正弦函数	$sin{x}$	\sin{x}
余弦函数	$cos{x}$	\cos{x}
正切函数	$tan{x}$	\tan{x}
余切函数	$cot{x}$	\cot{x}
对数函数	$\ln2$ $log_28$ $\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$

矩阵

$\left[\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}\right]$ 的语法式为 $\left[\begin{matrix} 1 & 2 \ \3 & 4 \end{matrix}\right]$
- 其中**\left[代表左中括号，\right]代表右中括号。(若把[或]，改成|则会变成行列式 $\left|\begin{matrix} 1 & 2 \\ 3 & 4 \end{matrix}\right|$ **）
- 在写入元素之前需要输入**\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>        <!--这是回车-->
&nbsp       <!--这是空格-->

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
```