typora使用教程
一、markdown的简介
markdown是一种轻量级的标记语言,理念是致力于使创作或者阅读文档更加方便和容易,面对于大众,面对用户
HTML简介
hyper **text markup language (HTML)**超文本标记语言,注重于样式,面向专业人员
例如:
新建一个TXT文件
![]()
重命名 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标签进行包裹
代码:
*斜体* **粗体** <u>下划线</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+单击[自定义] 进行跳转
效果:
自动链接
使用<URL或者邮箱地址会自动转换为超链接
八、图片插入
代码:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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
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
实例
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.实例