typora使用教程
typora使用教程
文章目录
- typora使用教程
- 一、markdown的简介
-
- HTML简介
- 二、标题
- 一级标题
-
- 二级标题
- 三、段落
- 四、列表
- 五、区块显示
- 六、代码块显示
- 七、链接
- 八、图片插入
- 九、表格
- 十、快捷键
-
- 1.标题优先级
- 2.字体常用
- 3.数学表达式
- 4.目录
- 5.表情
- 十一、图
-
- 1.简介
- 2、流程图--graph
-
- 2.1.语法
- 2.2.代码
- 2.3.常用符号及含义
- 2.4.列表补充
- 2.5.连线
- 2.6.子图表
- 3、时序图--sequenceDiagram
-
- 3.1.语法
- 3.2.实例
- 4、状态图--stateDiagram
-
- 4.1.语法
- 4.2.实例
- 5、类图--classDiagram
-
- 5.1.语法
- 5.2.实例
- 6、甘特图--gantt
-
- 6.1.语法
- 6.2.实例
- 7、饼图--pie
-
- 7.1.语法
- 7.2.实例
- 6.2.实例
- 7、饼图--pie
-
- 7.1.语法
- 7.2.实例
一、markdown的简介
markdown是一种轻量级的标记语言，理念是致力于使创作或者阅读文档更加方便和容易，面对于大众，面对用户
HTML简介
hyper **text markup language (HTML)**超文本标记语言，注重于样式，面向专业人员
例如：
新建一个TXT文件
![image-20220123162629634]()
重命名 txt更改为html
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lk5ZkHV1-1644851203303)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220123162210661.png)]
浏览器就会根据设定的格式进行相应的解释
二、标题
-
markdown的标题
语法：
#+空格（一级标题）##（二级标题）……# 一级标题 ## 二级标题效果：
一级标题
二级标题
快捷键
ctrl+数字（1---5）将选择的文字进行相应的标题级别设置ctrl++标题升级ctrl+-标题降级双击回车键，跳出左边的**“灰色竖线”**
ctrl+]增加1缩进 也可以使用tab键ctrl+[减少缩进
三、段落
-
段落
语法：直接进行文字编辑，换行等操作与word一样，双击回车跳出最左边的灰色竖线
这是一个段落 > + 回车效果：
这是一个段落
-
字体
语法：
- 粗体：一对·双星号包裹
- 删除线；用一对双飘号进行包裹（英文输入法下，ESC键下面哪个）
- 用一对U标签进行包裹
代码：
*斜体* **粗体** 下划线 ~~删除线~~效果：
这是一个删除线这是一个下划线
这是一个斜体
这是一个粗体
快捷键
ctrl+b加粗ctrl+u下划线ctrl+I（字母i） 斜体alt+shift+5删除线 -
分割线
语法：三个减号
代码：
---回车效果：
-
脚注
语法：
脚注是对文本进行补充解释说明的，相当于·超链接
代码：
[^spring boot] [^spring boot]: 这是一个非常方便的框架效果：这是一个技术^spring boot
四、列表
-
无序列表
代码：
*+空格 敲回车，取消无序列表符号 ctrl+shift+[ 有序列表 ctrl +shift+] 无序列表效果：
1、 只有同一级别
- 苹果
- 香蕉
- 橘子
2、子级别
-
二级
-
- 三级
-
有序列表
代码：
数字.+空格效果：
- test1
- test4
五、区块显示
代码：
>+回车
效果：
外层区块
内层区块
六、代码块显示
代码：
```text/java/js
效果：
public class Test{ public static void main(String[] args) { // TODO 自动生成的方法存根 System.out.println("请输入参与活动的总人数："); Scanner sc=new Scanner(System.in); //创建键入对象 int a=sc.nextInt(); int b=Math.abs(a); int d=(int) (Math.random()*b); System.out.println("本轮活动的幸运儿是："+(d+1)+"号"); } }
七、链接
代码：
www.baidu.com [百度](https://www.baidu.com)本文档内进行链接 [自定义](# 加上对应的标题优先级) ctrl+单击[自定义] 进行跳转
简介
效果：
百度
B站Typora教程
自动链接
使用https://www.baidu.com
八、图片插入
代码：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atJaCWcP-1644851203308)(图片的路径)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-THQwyhTf-1644851203309)(D:/图片/截屏/捕获.PNG)]偏好设置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TuzDOezP-1644851203310)(typora的使用教程.assets/image-20220209203107706.png)]
效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtKpX2iV-1644851203311)(D:/图片/截屏/捕获.PNG)]
九、表格
代码：
|姓名|学号|语文|数学|英语|理综| 回车 自动生成表格 操作：ctrl+回车=添加表格的行数
效果：
姓名 学号 语文 数学 英语 理综 钟XX 360123456 100 125 95 205
快捷键：
crtl+t=添加表格
ctrl+enter=在表格中添加行
ctrl+shift+enter=删除行
- 两个飘号，之间的内容会自动添加格子
十、快捷键
1.标题优先级
ctrl + 数字=对应标题优先级，数字范围1~6
ctrl + 0=回归正文
ctrl + 加号/减号=标题优先级进行升级和降级
2.字体常用
` 内容 ` = 自动为 “内容” 添加格子
ESC下面的按键，俗称“飘号”
ctrl+shift+飘号
ctrl + /=进入源代码模式，全文以源代码显示，再次 按，退出源代码模式
ctrl+i=倾斜
ctrl+b=加粗
ctrl+u=下划线
ctrl+l=选中行
ctrl+d=选中词
ctrl+e=选中相同格式的文字
ctrl+shift+5=删除线
ctrl+home=返回顶部
ctrl+end=返回底部
ctrl+t=创建表格
ctrl+k=创建超链接
ctrl+shift+q=引用方块（>）
ctrl+shift+i=插入图片
shift+alt+l=显示大纲/文件
ctrl+p=打开最近文档
***或者---
创建分割线
-空格 = 无序列表（可以多次累计）
-空格[空格] = 任务列表
ctrl+shift+[=创建有序列表
ctrl+shift+]=创建无序列表
ctrl+[=加列表缩进
ctrl+]=减列表缩进
行内代码
```代码部分```
```程序语言 = 进入某种语言的代码块
```text = 纯文本书写
3.数学表达式
ctrl+shift+m=引入数学公式书写格式
行内公式： $公式$
块间公式 $$公式$$
4.目录
[toc]+回车=根据标题的优先级进行自动生成目录
5.表情
:+smile
:+100
| :smile | :blue_heart | :notes |
|---|---|---|
| :relaxed | :heart | :musical_notes |
| :heart_eyes | :star | :+1 :-1 |
| :mask | :question | :ok_hand |
| :walk | :runner | :couple |
| :raising_hand | :woman | :man |
| :eyes | :speech_balloon | :love_letter |
| :snowman | :dog | :nouse |
| :money | :rouse | :tv |
| :phone | :iphone | :sound |
| :watch | :alarm_clock | :date |
| :headphones | :warning | :one |
| :tow…… | :large_blue_diamond | :white_square_button |
使用：在单词后面再加入一个英文输入法的冒号
十一、图
1.简介
- Markdown画图是轻量级、功能并不全
- Markdown用于画流程图、状态图、时序图、甘特图、使用JS进行本地渲染，广泛集成于Markdown编辑器
- 本质：生成的并不是一个图片而是一段HTML的代码
2、流程图–graph
2.1.语法
| 语法 | 含义 |
|---|---|
| TB | 上下 |
| BT | 下上 |
| LR | 左右 |
| RL | 右左 |
| TOP BOTTOM | RIGHT LEFT |
2.2.代码
代码：
```Mermaid graph TB; 内容1-->内容2内容1内容2
2.3.常用符号及含义
-
节点形状
语法 说明 含义 id[文字] 矩形节点 表示过程，流程的一个环节 id（文字） 圆角矩形节点 开始和结束 id((文字)) 圆形节点 表示连接，为避免流程过长或者交叉，可将流程切开成对 id{文字} 菱形节点 判断或者决策 id>文字] 右向旗帜节点 无特殊含义 单向箭头:表示流程2进行的方向
2.4.列表补充
- id为节点唯一标识符，A----F是当前节点名字，类似于变量名，便于使用时引用
- id后面的文字是要显示的文字
- 未设置文字则默认显示节点名字
代码：
graph TB;
A
B(圆角矩形节点)
C[矩形节点]
D((圆形节点))
E{菱形节点}
F>右向旗帜形状节点]
代码：
graph TB;
begin(出门)-->buy[买炸鸡];
buy-->IsRemaining{"还有没有炸鸡？"};
判断内容用 ""
判断框的输出有以下两种方式
IsRemaining-->|有|happy[鸡开心]-->goback(回家);
IsRemaining--没有-->sad[伤心]-->goback;
2.5.连线
graph TB;
A1-->B1
A2---B1
A3--text-->B3
A4--text---B4
A5-.-B5
A6-.->B6
A7-.text.->B7
A8-.text.-B8
实例
texttexttexttextA1B1A2B2A3B3A4B4A5B5A6B6A7B7A8B8
2.6.子图表
subgraph 买炸鸡
买炸鸡 是子表图名字
begin(出门)-->buy[买炸鸡]; 子表图的范围
end 结束位置
3、时序图–sequenceDiagram
3.1.语法
```mermaid + enter
sequenceDiagram
A->>B:who is B? 实线
B-->>A:It's me. 虚线
3.2.实例
4、状态图–stateDiagram
4.1.语法
```mermaid
stateDiagram
[*]-->s1
s1-->[*]
// [*]表示开始或者结束，在箭头左边为开始，在箭头右边为 结束
4.2.实例
5、类图–classDiagram
5.1.语法
```mermaid
classDiagram
解析：
<|--表示继承
+表示blic
-表示private
Animal<|--Duck //继承父类
Animal<|--Fish
Animal<|--Zebra
--------------
父类的元素
Animal:+int age
Animal:+String gender
Animal:+isMamal()//后面得1有括号：与上面的不是同一类
Animal:+mate()
-------------------
class Duck{
+String beakColor
+swim()
+quack()
//同为有括号的一类
}
class Fish{
+int sizeInFeet
+canEat()
//子类元素有两类
}
class Zebra{
+bool is_wild
+run
}
5.2.实例
6、甘特图–gantt
6.1.语法
```mermaid
gantt
title 自定义//标题
dateFormat YYY-MM-DD //时间格式2022-02-14
section java //项目
//项目的细分 java入门:al,2022-01-01,30d
//项目的细分java提高:after al,20d
section sql //与java并列关系
sql:2022-03-01,10d
my sql:10d
6.2.实例
7、饼图–pie
7.1.语法
```mermaid
pie
title 成功
"汗水"：99
"天赋":1
7.2.实例
}
class Fish{
+int sizeInFeet
+canEat()
}
class Zebra{
+bool is_wild
+run
}
## 6、甘特图--gantt
### 6.1.语法
```text
```mermaid
gantt
title 自定义//标题
dateFormat YYY-MM-DD //时间格式2022-02-14
section java //项目
//项目的细分 java入门:al,2022-01-01,30d
//项目的细分java提高:after al,20d
section sql //与java并列关系
sql:2022-03-01,10d
my sql:10d
6.2.实例
7、饼图–pie
7.1.语法
```mermaid
pie
title 成功
"汗水"：99
"天赋":1
7.2.实例