Markdown基础

Markdown基础

大自然的搬运工 275 2022-07-13

目录树

[toc]

标题

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

一级标题使用1个#

二级标题使用2个#

三级标题使用3个#

四级标题使用4个#

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

####### 最多支持六级标题

文字

删除线

这就是~~删除线~~（使用波浪号）

这就是删除线（使用波浪号）

斜体

这是用来 *斜体* 的 _文本_

这是用来 斜体 的 文本

加粗

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

这是用来 加粗 的 文本

斜体+加粗

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

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

下划线

下划线是HTML语法
下划线下划线(快捷键Ctrl+U)

高亮（需勾选扩展语法）

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

这是用来 高亮 的文本

下标（需勾选扩展语法）

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

水 H2O
双氧水 H2O2

上标（需勾选扩展语法）

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

面积 m2
体积 m3

表情符号

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

一些表情例子

:smile:	:laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary: :+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:

😄 😆 😵 😭 😰 😅 😢 😤 😍 ☺️ 😎 😩 👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕ 🌀 🙇 💋 🙏 💦 💩 ❗ 💢
{control+command+space点选}

表格

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

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

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

name price
fried chicken 19
cola 5

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

| name          | price |
| :------------ | :---: |
| fried chicken | 19    |
| cola          | 32    |
name price
fried chicken 19
cola 32

使用快捷键Ctrl+T 更方便

引用

>"后悔创业"

“后悔创业”

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

也可以在引用中

使用嵌套的引用

列表

无序列表–符号 空格

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

有序列表–数字.空格

1. 有序列表以数字和`.`开始；
3. 数字的序列并不会影响生成的列表序列；
4. 但任然推荐按照自然顺序（1,2,3...）编写。
  1. 有序列表以数字和.开始；
  2. 数字的序列并不会影响生成的列表序列；
  3. 但任然推荐按照自然顺序（1,2,3…）编写。
可以使用: 数字\. 来取消显示为列表（用反斜杠进行转义）

代码

代码块

```语言名称

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

行内代码

也可以通过``, 插入行内代码 (`是`Tab`键上边、数字`1`键左侧的那个按键):
列如`Markdown`

Markdown

转换规则

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

分隔线

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

***
-----
___

跳转

外部跳转–超链接

格式为 [link text](link)

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

帮助文档

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

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

Open Links in Typora

You can use command+click(macOS), or ctrl+click(Linux/windows) on links in Typora to jump to target headings, or open them in Typora, or open in related apps.

我想跳转

自动链接

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

<https://www.baidu.com>

https://www.baidu.com

图片

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

网上图片

![躺平](https://img0.baidu.com/it/u=807380662,1933253725&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=715)

躺平

本地图片

![LOVE](/upload/2022/07/love.jpg)

LOVE

画图

Flow流程图(flow)

示例

代码块语言为：flow

// 代码块语言为flow
st=>start: Start
e=>end: End
op1=>operation: Operation
sub1=>subroutine: Subroutine
cond=>condition: yes or no ?
io=>inputoutput: proceess something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

st=>start: Start
e=>end: End
op1=>operation: Operation
sub1=>subroutine: Subroutine
cond=>condition: yes or no ?
io=>inputoutput: proceess something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

语法

定义元素的语法格式为tag=>type: content:>url

  • tag为流程图中的标签，用于连接元素时用。
  • type为类型，包括：start(开始)、end(结束)、operation(操作、执行)、subroutine(子分支)、condition(条件)、inputoutput(输入、输出)。
  • content为流程图中文本框需要描述的文字，注意type后面的冒号与content之间有个空格。
  • url表示一个链接，与框中的文本相绑定，:>后面就是对应的 url 链接，点击文本时可以通过链接跳转到 url 指定页面。
  • 用->来连接两个元素。
  • 对于condition类型，有yes和no两个分支，如示例中的cond(yes)和cond(no)。
  • 每个元素可以设置分支走向，默认向下（bottom），也可以用left指向左边或者用right指向右边，如示例中sub1(right)。

Graph图表(mermaid)

关于图表的语法说明，此处有更详细的说明。
代码块语言为：mermaid

开头

代码以graph 布局方向[TB/BT/LR/RL] 开头，T(Top)、B(Bottom)、L(Left)、R(Right)。

节点

包含四种节点 ：(圆角)、[矩形]、{菱形}、((圆形))、>非对称]。

圆角矩形菱形圆形非对称

线段

  1. 箭头连接 A1-->B1
  2. 开放连接 A2---B2
  3. 标签连接A3--text---B3或者 A3---|text|B3
  4. 箭头标签连接 A4--text-->B4 或者 A4-->|text|B4
  5. 虚线开放连接 A5.-B5 或者 A5-.-B5 或者 A5...-B5
  6. 虚线箭头连接 A6.->B6 或者 A6-.->B6
  7. 标签虚线连接 A7-.text.-B7
  8. 标签虚线箭头连接 A8-.text.->B8
  9. 粗线开放连接 A9===B9
  10. 粗线箭头连接 A10==>B10
  11. 标签粗线开放连接 A11==text===B11
  12. 标签粗线箭头连接A12==text==>B12
texttexttexttexttexttexttexttextA1B1A2B2A3B3A4B4A5B5A6B6A7B7A8B8A9B9A10B10A11B11A12B12

fontawesome支持

如果想加入来自frontawesome的图表字体,需要像frontawesome网站上那样引用。详情请点击：fontawesome
语法为：fa:fa-#icon-class-name#

// 代码块语言为mermaid
graph TD
	B["fa:fa-twitter for peace"]
	B-->C[fa:fa-ban forbidden]
	B-->D(fa:fa-spinner)
	B-->E(A fa:fa-camera-retro perhaps?)
fa:fa-twitter for peacefa:fa-ban forbiddenfa:fa-spinnerA fa:fa-camera-retro perhaps?

渲染

graph LR
	id1(id1)-->id2(id2)
	style id1 fill:#f9f,stroke:#333,stroke-width:4px;
	style id2 fill:#f00,stroke:#000,stroke-width:2px,stroke-dasharray:5,5;
	
	nodeId1(nodeId1)-->nodeId2(nodeId2)
	classDef className fill:#f9f,stroke:#333,stroke-width:4px;  //可设置宏定义一样的格式
	class nodeId className;		  //对结点nodeId使用样式类
	class nodeId1,nodeId2 className; //对多个结点nodeId使用样式类
StartStopnodeId1nodeId2

fill:#f9f：表示框框中填充的颜色，由RGB表示，但只有0~F，如#f00表示填充红色
stroke:#000：表示外框的颜色，也是由RGB表示
stroke-width:2px：表示外框短线的宽度为2个像素，
stroke-dasharray:5,5：表示外框短线的长度，等于方框的边长除以5

示例

graph TB
	Start(开始) --> Open[打开冰箱门]
	Open --> Put[把大象放进去]
	Put[把大象放进去] --> IsFit{"冰箱小不小？"}
	IsFit -->|不小| Close[把冰箱门关上]
	Close --> End(结束)
	IsFit -->|小| Change[换个大冰箱]
	Change --> Open
	
	style Start fill:orange
	style IsFit fill:green
	style End fill:black
	classDef someclass fill:#f96;
	class Open,Put,Change,Close someclass
不小小开始打开冰箱门把大象放进去冰箱小不小？把冰箱门关上结束换个大冰箱