Typora使用技巧

最新推荐文章于 2025-06-08 09:40:13 发布

煊fan

最新推荐文章于 2025-06-08 09:40:13 发布

阅读量765

点赞数 13

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.csdn.net/2301_80136944/article/details/148382638

Typora使用技巧0. 概述1. Typora的快捷键2. 文本2.1 文本颜色设置2.1.1 代码2.1.2 效果展示2.2 文本背景色2.2.1 代码2.2.2 效果展示2.3 文本字号设置2.3.1 注意事项2.3.2 代码2.3.3 效果展示2.4 文本字体设置2.4.1 代码2.4.2 效果展示2.5 实战演练2.5.1 语法2.5.2 代码2.5.3 效果展示2.6 文字斜体2.6.1 快捷键2.6.2 语法2.6.3 效果展示2.7 文字加粗2.7.1 快捷键2.7.2 语法2.7.3 效果展示2.8 文本加粗+斜体2.8.1 快捷键2.8.2 语法2.8.3 效果展示2.9 文本删除线2.9.1 快捷键2.9.2 语法2.9.3 效果展示2.10 下划线2.10.1 快捷键2.10.2 语法2.10.3 效果展示2.11 高亮2.11.1 语法2.11.2 效果展示2.12 文本居中2.12.1 注意事项2.12.2 代码2.12.3 效果展示2.13 段落缩进与段落空格2.13.1 语法2.13.2 注意事项2.13.3 代码2.13.4 效果展示2.14 段落换行2.14.1 语法2.14.2 效果展示3. 特殊格式3.1 标题3.1.1 快捷键3.1.2 语法3.1.3 代码3.1.4 效果展示3.2 目录3.3 分割线3.3.1 语法3.3.2 代码3.3.3 效果展示3.4 跳转语法3.4.1 外部跳转3.4.2 内部跳转3.4.3 自动链接3.5 字母上标和下标3.5.1 上标3.5.2 下标3.5.3 LaTex数学公式3.6 表格3.7 引用

0. 概述

Typora，一款轻便简洁的markdown编辑器，支持及时渲染技术
非常方便写CSDN博客

1. Typora的快捷键

无序列表：- + 空格
有序列表：1. + 空格
引用： > + 空格
标题：ctrl + 数字(1/2/3……)
表格： ctrl + t
生成目录：[TOC] + 回车
选中一整行：ctrl + l
选中单词： ctrl + d
选中相同格式的文字：ctrl + e
跳转到文章开头：ctrl + home
跳转到文章结尾：ctrl + end
搜索： ctrl + f
替换： ctrl + h
加粗： ctrl + b
倾斜： ctrl + i
下划线：ctrl + u
删除线: Alt + Shift + 5
插入图片：直接拖动到指定位置即可或者 ctrl + Shift + i
插入链接： ctrl + k

2. 文本

2.1 文本颜色设置

2.1.1 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">red</span><span style="color:#981a1a">></span><span style="color:#116644">1.</span><span style="color:#000000">我是文本</span> <span style="color:#000000">红色red</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">blue</span><span style="color:#981a1a">></span><span style="color:#116644">2.</span><span style="color:#000000">蓝色</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">pink</span><span style="color:#981a1a">></span><span style="color:#116644">3.</span><span style="color:#000000">粉色</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">purple</span><span style="color:#981a1a">></span><span style="color:#116644">4.</span><span style="color:#000000">紫色</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">#FF0000</span><span style="color:#981a1a">></span><span style="color:#116644">5.</span><span style="color:#000000">红色</span> <span style="color:#000000">#FF0000</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span>
<span style="color:#981a1a"><</span><span style="color:#000000">font</span> <span style="color:#000000">color</span> <span style="color:#981a1a">=</span> <span style="color:#000000">green</span><span style="color:#981a1a">></span><span style="color:#116644">6.</span><span style="color:#000000">绿色</span><span style="color:#981a1a"></</span><span style="color:#000000">font</span><span style="color:#981a1a">></span></span></span>

2.1.2 效果展示

1.我是文本红色 red

2.蓝色

3.粉色

4.紫色

5.红色 #FF0000

6.绿色

2.2 文本背景色

2.2.1 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">table</span><span style="color:#117700">><</span><span style="color:#117700">tr</span><span style="color:#117700">><</span><span style="color:#117700">td</span> <span style="color:#0000cc">bgcolor</span> = <span style="color:#aa1111">pink</span><span style="color:#117700">></span>1.背景颜色是粉色<span style="color:#117700"></</span><span style="color:#117700">td</span><span style="color:#117700">></</span><span style="color:#117700">tr</span><span style="color:#117700">></</span><span style="color:#117700">table</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">table</span><span style="color:#117700">><</span><span style="color:#117700">tr</span><span style="color:#117700">><</span><span style="color:#117700">td</span> <span style="color:#0000cc">bgcolor</span> = <span style="color:#aa1111">yellow</span><span style="color:#117700">></span>2.背景颜色是黄色<span style="color:#117700"></</span><span style="color:#117700">td</span><span style="color:#117700">></</span><span style="color:#117700">tr</span><span style="color:#117700">></</span><span style="color:#117700">table</span><span style="color:#117700">></span></span></span>

2.2.2 效果展示

1.背景颜色是粉色

2.背景颜色是黄色

2.3 文本字号设置

2.3.1 注意事项

说明：size用来指定尺寸大小，数值从1~6的数字，浏览器默认为3,小数也可以出现，size>6后，字号大小都一样大

2.3.2 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><font size=1>字号1</font>
<font size=2>字号2</font>
<font size=3>字号3（默认大小）</font>
<font size=4>字号4</font>
<font size=5>字号5</font>
<font size=6>字号6</font>
<font size=5.4>字号5.4</font></span></span>

2.3.3 效果展示

字号1 字号2 字号3（默认大小）字号4 字号5 字号6 字号5.4

2.4 文本字体设置

2.4.1 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><font face = "楷体">1.楷体</font>
<font face = "黑体">2.黑体</font>
<font face = "微软雅黑">3.微软雅黑</font>
<font face = "华文彩云">4.华文彩云</font>
<font face = "STCAIYUN">5.华文彩云</font>
<font face = "宋体">6.宋体</font>
<font face = "华文行楷">7.华文行楷</font>
<font face = "方正姚体">8.方正姚体</font>
<font face = "幼圆">9.幼圆</font>
<font face = "隶书">10.隶书</font></span></span>

2.4.2 效果展示

1.楷体 2.黑体 3.微软雅黑 4.华文彩云 5.华文彩云 6.宋体 7.华文行楷 8.方正姚体 9.幼圆 10.隶书

2.5 实战演练

2.5.1 语法

<span style="background-color:#f8f8f8"><span style="color:#333333"><font color= 颜色 face=字体 size= 字号大小>正文内容</font></span></span>

2.5.2 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><font color=red face="楷体" size=5>红色 楷体 5号</font></span></span>

2.5.3 效果展示

红色楷体 5号

2.6 文字斜体

2.6.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Ctrl + I</span></span>

2.6.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333">*文本*</span></span>

2.6.3 效果展示

字体斜体

2.7 文字加粗

2.7.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Ctrl + B</span></span>

2.7.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333">**文本**</span></span>

2.7.3 效果展示

粗体

2.8 文本加粗+斜体

2.8.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Ctrl + B + Ctrl + I</span></span>

2.8.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333">***1.这是斜体并加粗的文字***
___2.这是斜体并加粗的文字___</span></span>

2.8.3 效果展示

1.这是斜体并加粗的文字 2.这是斜体并加粗的文字

2.9 文本删除线

2.9.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Alt + Shift + 5</span></span>

2.9.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333">~~文本~~</span></span>

2.9.3 效果展示

删除线删除线

2.10 下划线

2.10.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Ctrl + U</span></span>

2.10.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">u</span><span style="color:#117700">></span>文字<span style="color:#117700"></</span><span style="color:#117700">u</span><span style="color:#117700">></span></span></span>

2.10.3 效果展示

下划线下划线

2.11 高亮

2.11.1 语法

<span style="background-color:#f8f8f8"><span style="color:#333333">==文本==</span></span>

2.11.2 效果展示

高亮

2.12 文本居中

2.12.1 注意事项

Typora 中并没有内容居中的选项，想要居中只能使用html 语法

2.12.2 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">center</span><span style="color:#117700">></span>居中文本<span style="color:#117700"></</span><span style="color:#117700">center</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"text-align: center; color: blue; size:6;"</span><span style="color:#117700">></span>2.这是居中的蓝色文字<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span>
<span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"text-align: center; color: blue;"</span><span style="color:#117700">></span>3.这是居中的蓝色文字<span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span></span></span>

2.12.3 效果展示

文本居中

2.这是居中的蓝色文字

3.这是居中的蓝色文字

2.13 段落缩进与段落空格

2.13.1 语法

&emsp :全角缩进，缩进1个汉字
& ensp：半角缩进，缩进1个英文标点
&nbsp：空格，缩进1个空格

2.13.2 注意事项

需要使用多个缩进需要用;隔开

2.13.3 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#221199">&emsp;&emsp;</span>1.全角缩进，相当于缩进2个汉字
<span style="color:#221199">&ensp;&ensp;</span>2.半角缩进，相当于缩进2个英文标点
<span style="color:#221199">&nbsp;&nbsp;&nbsp;&nbsp;</span>3.空格，缩进4个空格
> 下面这种方式属于html语言的缩进语法，在CSDN中不支持
<span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>  4.这种缩进是属于html语言的缩进语法<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span></span></span>

2.13.4 效果展示

1.全角缩进，相当于缩进2个汉字 2.半角缩进，相当于缩进2个英文标点 3.空格，缩进4个空格

下面这种方式属于html语言的缩进语法，在CSDN中不支持

4.这种缩进是属于html语言的缩进语法

2.14 段落换行

2.14.1 语法

<span style="background-color:#f8f8f8"><span style="color:#333333"><br> 或 </br></span></span>

2.14.2 效果展示

1 2 3

3. 特殊格式

3.1 标题

3.1.1 快捷键

<span style="background-color:#f8f8f8"><span style="color:#333333">Ctrl + 数字（最小为六级标题）</span></span>

3.1.2 语法

<span style="background-color:#f8f8f8"><span style="color:#333333"># + 空格 + 标题名（几个#就代表几级标题）</span></span>

3.1.3 代码

<span style="background-color:#f8f8f8"><span style="color:#333333"># 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题</span></span>

3.1.4 效果展示

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

3.2 目录

语法

<span style="background-color:#f8f8f8"><span style="color:#333333">[toc] 或者 [Toc] 或者 [TOC],在行首敲击可以显示目录（敲完之后敲击回车键即可）</span></span>

3.3 分割线

3.3.1 语法

三个或者三个以上的* 或者 -

3.3.2 代码

<span style="background-color:#f8f8f8"><span style="color:#333333">********
--------(建议只敲击三次后按回车键)</span></span>

3.3.3 效果展示

3.4 跳转语法

3.4.1 外部跳转

语法：[链接跳转提示]（链接网址）
代码：[]中的内容可以自己重命名

<span style="background-color:#f8f8f8"><span style="color:#333333">[交作业](https://class.kazeline.com/)</span></span>

效果展示：交作业
注意事项：按下Ctrl + 点击打开链接

3.4.2 内部跳转

语法：[跳转提示]（#要跳转的标题）
代码：[]中的内容可以自己重命名

<span style="background-color:#f8f8f8"><span style="color:#333333">[跳转语法标题](#3.4 跳转语法)</span></span>

效果展示：标题

3.4.3 自动链接

语法：<链接网址>
代码：

<span style="background-color:#f8f8f8"><span style="color:#333333"><https://www.biancheng.love/></span></span>

效果展示：编程派|CodingPi-官网

3.5 字母上标和下标

3.5.1 上标

代码：

<span style="background-color:#f8f8f8"><span style="color:#333333">19^9^
10^-2^</span></span>

效果展示：

199 10-2

3.5.2 下标

代码：

<span style="background-color:#f8f8f8"><span style="color:#333333">M~K~
H~2~O</span></span>

效果展示：

MK H2O

3.5.3 LaTex数学公式

网页推荐：simpletex,在线公式识别
语法

<span style="background-color:#f8f8f8"><span style="color:#333333">$公式$ 或 $$公式$$</span></span>

代码：

<span style="background-color:#f8f8f8"><span style="color:#333333">$\frac{1}100}$
$M^n_{kernel}$
$x^p_{ij}$</span></span>

效果展示

\frac{1}{100}

M^n_{kernel}

x^p_{ij}

3.6 表格

推荐使用右键的插入，更为方便
效果：

Name	Age
xf	17
lwx	18
ly	18

3.7 引用

语法：> + 空格 + 引用的内容
效果展示

效果