markdown语法教学

markdown语法在许多软件或是网站的语法大差不差，除了个别会有多个插入方式，我在下面都会介绍二者

用CSDN会简单很多，因为它不需要自己输入图片和超链接的格式，会自主生成，而且也不需要手动通过图床生成一个新的图片链接，并且目录栏有语法说明，可以不会时直接打开看

用vscode比CSDN复杂些许

基本语法介绍

1. 文章前面的目录生成

@[TOC](目录)
注意：@[]()这些都是英文输入的，()里的可以自己编写，剩下的一定按格式写
具体呈现看我这篇文章的最上面，也就是下图

2. 标题

   #[空格]一级标题
   ##[空格]二级标题
   ###[空格]三级标题
   ......
   注意[空格]是直接按空格键就可以了，只是怕不清楚文字说明一下

例如：

---

3. 字体

以下出现的center是居中的意思

3.1、字体的斜体/粗体/…

斜体：*斜体*
粗体：**粗体**
粗斜体：***粗斜体***

• 展示：
  斜体 ； 粗体 ； 粗斜体

---

3.2、字体的颜色

<font color='red'>红色</font>
居中的：<center><font color='red'>红色</font></center>
//color后面的单引号单词可以自行修改

• 展示：
  红色

红色

---

3.3、字体的格式

<font face="楷体">楷体</font>
居中的：<center><font face="楷体">楷体</font></center>
//face后面的双引号词可以自行修改

• 展示：
  楷体

楷体

---

3.4、字体的大小

<font size=6>6号</font>
居中的：<center><font size=6>6号</font></font></center>
//size后面的数字可以自行修改

• 展示：
  6号

6号

---

3.5、文本注音

<ruby>饕餮<rt>tao tie</rt></ruby>
分着打：<ruby>饕<rt>tao</rt></ruby><ruby>餮<rt>tie </rt></ruby>

• 展示：
  饕餮tao tie
  饕tao餮tie

---

3.6、文本高亮显示

<mark>高亮</mark>
居中的：<center><mark>高亮</mark></center>
//高亮二字可以自行修改

• 展示：
  高亮

高亮

---

3.7、添加背景颜色

<table><tr><td bgcolor='orange'><font size=8 color='yellow' face="楷体">背景颜色</font></td></tr></table>

• 展示：

楷体

---

附1：颜色+格式+大小+高亮+注音合体

<mark><font color='red' face="楷体" size=6><ruby>饕<rt>tao</rt></ruby><ruby>餮<rt>tie </rt></ruby></font></mark>
居中的：<center><mark><font color='red' face="楷体" size=6><ruby>饕<rt>tao</rt></ruby><ruby>餮<rt>tie </rt></ruby></font></mark></center>

• 展示：

饕tao餮tie

饕tao餮tie

---

附2：颜色+格式+大小+背景颜色+注音合体

<table><tr><td bgcolor='orange'><font color='yellow' face="楷体" size=8 ><ruby>饕<rt>tao</rt></ruby><ruby>餮<rt>tie </rt></ruby></font></td></tr></table>

• 展示：

饕tao餮tie

---

4. 引用

>一级引用
>>二级
>>>三级
//二级及以上都是属于引用的嵌套

• 展示：

一级

二级

三级

---

5. 分割线

***

• 展示： 下面第一条是展示

---

---

6. 删除线

~~删除~~

• 展示：
  删除

---

7. 下划线

<u>下划线</u>

• 展示：
  下划线

---

8. 代码块

代码块：
	```c
	#include
	int main()
	{
		printf("hello\n");
		return 0;
	}
	```
片段代码块：
	`include`

• 展示：

	#include
	int main()
	{
		printf("hello\n");
		return 0;
	}

dfs

---

9. 公式块

$y=x^2+1$
居中的：$$y=x^2+1$$

• 展示：
  $y=x^2+1$
  $$y=x^2+1$$

---

10.列表

10.1、有序列表

1.[空格]
2.[空格]
[跳格]1.[空格]//嵌套上一级
[跳格][跳格]1.[空格]//嵌套上一级
...

• 展示：

1. 一级
2. 一级
   1. 二级
   2. 二级
      1. 三级

---

10.2、无序列表

*[空格]
*[空格]
[跳格]*[空格]//嵌套上一级
[跳格][跳格]*[空格]//嵌套上一级
...

• 展示：
• 一级
• 一级
  • 二级
  • 二级
    • 三级

---

11. 待办事项

-[空格][[空格]][空格]待办事项
-[空格][x][空格]已办事项
//有[空格]这完整的一套都是空格键的意思，其他的要保留

• 展示：

• 待办事项
• 已办事项

---

12. 特殊符号

\：这个是显示符号本身 (其实我感觉没啥用)

**粗体**
\*\*粗体\*\*

• 展示：
  粗体
  **粗体**

---

13. 流程图

13.1、横向流程图

13.1.1、从左到右

	```mermaid
	graph LR
	F[横向流程图]
	A[第一]-->B(第二)
	B-->C{条件a}
	C-->|a=1|D[结果1]
	C-->|a!=1|E(结果2)
	```
注意：[]是方形的；()是圆角的；{}是菱形的；||是判断条件

• 展示：

a=1

a!=1

横向流程图

第一

第二

条件a

结果1

结果2

---

13.1.2、从右到左

	```mermaid
	graph RL
	F[横向流程图]
	A[第一]-->B(第二)
	B-->C{条件a}
	C-->|a=1|D[结果1]
	C-->|a!=1|E(结果2)
	```
注意：[]是方形的；()是圆角的；{}是菱形的；||是判断条件

• 展示：

a=1

a!=1

横向流程图

第一

第二

条件a

结果1

结果2

---

13.2、纵向流程图（从上到下）

	```mermaid
		graph TD
	F[纵向流程图]
	A[第一]-->B(第二)
	B-->C{条件a}
	C-->|a=1|D[结果1]
	C-->|a!=1|E(结果2)
	```
注意：[]是方形的；()是圆角的；{}是菱形的；||是判断条件

• 展示：

a=1

a!=1

纵向流程图

第一

第二

条件a

结果1

结果2

---

14. 链接

[我的博客链接](https://blog.csdn.net/2402_89218457?)
链接：<https://blog.csdn.net/2402_89218457?>

• 展示：
  我的博客链接
  链接：https://blog.csdn.net/2402_89218457?

---

15.表格

|商品|单价|数量|
|:---:|---:|:---|
|苹果|2元/千克|3千克|
|辣条|1元/包|4包|

//说明
:---:是居中的意思；:---是左对齐的意思；---:是右对齐的意思

商品	单价	数量
苹果	2元/千克	3千克
辣条	1元/包	4包

---

16. 表情包

16.1、直接复制粘贴

在网上搜表情包后直接复制粘贴就可以了

---

16.2、GitHub 风格的 emoji(个别的，语法大致如下，要完整的可以通过下面的链接进行查看)

GitHub 风格的 emoji（表情符号）是在 Markdown 中通过 :名称: 的语法来调用的表情符号，官方称为 “GitHub Emoji”

GitHub风格表情包大全(https://github.com/ikatyang/emoji-cheat-sheet)

emoji代码	emoji	emoji代码	emoji
:pushpin:		:point_right:
:smile:		:point_left:
:blush:		:pray:
:star:	⭐️	:bell:
:dizzy:		:bulb:
:boom:		:high_brightness:
:exclamation:	❗️	:black_nib:	✒️
:question:	❓	:dart:
:+1:		:pencil:
:-1:		:one:	1️⃣
:point_down:		:keycap_ten:
:zero:	0️⃣	:x:	❌
:link:		:rose:

---

17. 图片

17.1、CSDN上直接上传本地图片

---

17.2、自己输入图片链接

标准语法：
	![图片描述，自己选择描述，可写可不写但中括号一定要有](图片链接)
可修改图片位置和大小：
	![图片描述，自己选择描述，可写可不写但中括号一定要有](图片链接#pic_center[空格]=长x宽)
//center是中间的意思；可以替换成left或者right
//x一定是英文字母的，不要替换成*
//上面这个调整图片位置和大小的方式在vscode中行不通

* 例如：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7b1ba4da50844e4cbc8fde93b7f767dc.png)
可修改图片位置和大小：![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7b1ba4da50844e4cbc8fde93b7f767dc.png#pic_center =500x300)

Markdown 标准语法不能设置宽高，但支持嵌入HTML标签，你可以这样插入图片并调整大小
	<img src="图片链接" alt="图片描述，可写可不写" width="800" height="300" />
//这个csdn和vscode都可以使用

* 例如：

附：如何获取图片的链接

1️⃣通过CSDN的插入图片后下面的链接来获取图片的链接

这个下面的图片链接可以使用（最简单的方法）

2️⃣通过图床获得图片链接（复杂，但用处很大）

picgo教学+GitHub图床教学(https://blog.csdn.net/2402_89218457/article/details/149030549?spm=1011.2415.3001.5331)

---

作者小结：
以上教了部分的markdown语法，上面是作者认为重要且常用的方法
如果上面的内容有错误或者不完整的地方，欢迎大家在评论区指出
谢谢大家的观看