MarkDown保姆级教程之基础篇（Typora教程）

最新推荐文章于 2024-07-19 23:48:23 发布

Ryan王中王

最新推荐文章于 2024-07-19 23:48:23 发布

阅读量644

点赞数 1

分类专栏：基础工具使用文章标签：编辑器 html 前端

本文链接：https://blog.csdn.net/supreme_6/article/details/124759023

版权

基础工具使用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

MarkDown基础

标题

#标题名字（#的个数代表标题的级数）

一级标题使用一个#（或ctrl+1）

二级标题使用2个##(ctrl+2)

三级标题使用3个###

四级标题使用4个####

五级标题使用5个#####

六级标题使用6个######(ctrl+6)

#最多支持六级标题#

文字

删除线

这就是~~删除线~~(使用波浪线)

这就是 ~~删除线~~（前后各两个波浪线）

斜体

这是用来*斜体* 的文本

这是用来斜体的文本

加粗

这是用来**加粗**的文本

这是用来加粗的文本

斜体+加粗

这是用来***斜体+加粗***的文本

这是用来斜体+加粗的文本

下划线

下划线是HTML语法

这就是<u>下划线</U>（快捷键ctrl+u）

这就是下划线

高亮（需勾选扩展语法）

这是用来==高亮==的文本

这是用来高亮的文本

下标（需勾选扩展语法）

水 H~2~O
双氧水 H~2~O~2~

水 H₂O
双氧水 H₂O₂

上标（需勾选扩展语法）

面积 m^2^
体积 m^3……

面积 m²
体积 m³

表情符号

Emoji支持表情符号，你可以用系统默认的Emoji符号（Windows用户也支持了），也可以用图片的表情，输入：将会出现智能提示。

一些例子

:smile: :cry: :100: :warning:

😄 😢 💯 ⚠️

（Windows快捷键是win+.来点选表情）

表格

使用 | 来分割不同的单元格，使用 - 来分割表头和其他行

name | price
--- | ---
fired chicken | 19
cola | 5

为了使Markdown更清晰， | 和 - 两侧至少有一个空格（最左侧和最右侧的|就不需要了）

name	price
fired chicken	19
cola	5

为了美观，可以使用空格对齐不同行的单元格，并在左右两侧都使用|来标记单元格边界，在表头下方的分割线标记中加入：，即可标记下方单元格内容的对齐方式

|name          | price|
|:-----------  |:---: |
|fired chicken | 19   |
|cola          | 5    |

name	price
fired chicken	19
cola	5

win快捷键ctrl+t新建表格

引用

>"后悔创业"

“后悔创业”

>也可在引用中
>>使用嵌套的引用

也可在引用中

使用嵌套的引用

列表

无序列表–符号空格

* 可以使用 * 作为标记
+ 也可以使用 +
- 或者  -

可以使用*作为标记

也可以使用+

或者 -

有序列表–数字.空格

1. 有序列表以数字和.开始
3. 数字的序列并不会影响生成的列表的序列
4. 但仍然推荐按照自然顺序（1.2.3...）编写

有序列表以数字和.开始
数字的序列并不会影响生成的列表的序列
但仍然推荐按照自然顺序（1.2.3…）编写

可以使用：数字\.来取消显示为列表（用反斜杠进行转义）

代码

代码块

```语言名称

public static void main(String[] args) {
    
}

行内代码

也可以通过``，插入行内代码（`是`Tab`键上边的那个按键）
例如：`Markdown`

例如：Markdown

转换规则

代码块中的文本（包括MarkDown语法）都会显示为原始内容

分隔线

可以在一行中使用三个或者更多的*、- 或 _ 来添加分隔线

***
---
___

跳转

外部跳转–超链接

格式为[link text](link)

[帮助文档](https://support.typora.io/Links/#faq)

帮助文档

内部跳转–本文件内跳转（Typora支持）

格式为[link text](#要去的目的地--标题)

[我想跳转](#饼图(pie))

我想跳转

自动链接

使用<>包括的URL或邮箱地址会被自动转换为超链接

<https://www.baidu.com>
<123@email.com>

https://www.baidu.com
123@email.com

图片

:[自己起的图片名字](图片地址或者图片本地存储的路径)

网上的图片

:[firedChicken](图片网址)

本地图片

![firedChicken](firedChicken.jpg)
在同一个文件夹里（用相对路径）
或者直接拷贝

利用Markdown画图（需勾选扩展语法）

markdown是轻文本编辑器，并不像word那么强大，所以画图也是轻量级的，功能并不全。

Mermaid是一个用于画流程图、状态图、时序图、甘特图的库，使用JS进行本地渲染，广泛集成于许多Markdown编辑器中。Mermaid作为一个使用JS渲染的库。生成的不是一个“图片”。二十一段HTML代码

流程图（graph）

概述

graph 方向描述
	图表中的其他语句...

关键字graph表示一个流程图的开始，同时需要指定改图的方向。

其中“方向描述”为：

用词	含义
TB	从上到下
BT	从下到上
RL	从右到左
RT	从走到右

T = TOP , B = BOTTOM, L = LEFT, R = RIGHT, D = DOWN

最常用的布局方向是TB、LR

graph TB;
  A-->B
  B-->C
  C-->A

/流程图常用符号和含义

节点形状

表述	说明	含义
id[ 文字]	矩形节点	表示过程，也就是一个流程中的一个环节
id(文字)	圆角矩形节点	表示开始和结束
id((文字))	圆形节点	表示连接，为避免流程过长或有交叉，可将流程切开，成对
id{文字}	菱形节点	表示判断、决策
id>文字]	右向旗帜状节点

单项箭头线段：表示流程进行方向

id即为节点的唯一标识，A-F是当前节点的名字，类似于变量名，画图时便于引用

括号内是节点中要显示的文字，默认节点的名字和显示的文字都为A

graph TB
  A
  B(圆角矩形节点)
  C[矩形节点]
  D((圆形节点))
  E{菱形节点}
  F>右向旗帜状节点]

graph TB
   begin(出门)--> buy[买炸鸡]
   buy --> IsRemaining("还有没有炸鸡？")
   InRemaining --> |有|happy[买完炸鸡开心]--> goBack[回家]
   IsRemaining -->没有--> sad["伤心"]--> goBack

连线

子图表

使用以下语法添加子图表

subgraph 子图表名称
	子图表中的描述语句...
end

graph TB
	subgraph 买炸鸡前
		begin(出门)--> buy[出门买炸鸡]
	end
	buy --> IsRemaining{"还有没有炸鸡？"}
	IsRemaining -->没有-->sad["伤心"]--> goBack{回家}
	IsRemaining -->有-->happy[买完炸鸡开心]--> goBack

序列图（sequence diagram）

概述

sequenceDiagram
	{参与者1}{消息线}{参与者2}：消息体
		...

sequenceDiagram为每幅时序图固定开头

sequenceDiagram
	Title: 买炸鸡
	救救->>炸鸡店小哥: 还有炸鸡吗？
	炸鸡店小哥-->>救救: 没有，要现炸

参与者（participant）

传统时序图概念中参与者有角色和类对象之分，但是这里我们不做此区分，用参与者表示一切参与交互的事务，可以是人、类对象、系统等形式，中间竖直的线段从上至下表示时间的流逝

sequenceDiagram
	participant 参与者1
	participant 参与者2
	...
	participant 简称 as 参与者 3 #该语法可以在接下来的描述中使用简称来代替参与者3

participant <参与者名称>声明参与者，语句次序即为参与者横向排列次序

消息线

类型	描述
->	无箭头的实线
–>	无箭头的虚线
->>	有箭头的实线（主动发出消息）
–>>	有箭头的虚线（响应）
-x	末端为叉的实线（表示异步）
–x	末端为叉的虚线（表示异步）