Markdown入门指南
1.The Title of Markdown
(1) Denote title using '=' or '-'
First title
===========
Second title
-----------
(2) Denote title using '#'
# First title
## Second title
### Third title
#### Fourth title
##### Fifth title
###### Sixth title
2.The paragraph of Markdown
(1) Create a paragrapha by two blankspaces and an 'Enter'
Paragraph 1
Paragraph 2
(2) Create a paragraph by two 'Enter'
Paragraph 1
Paragraph 2
3.The font of Markdown
*斜体文字*
_斜体文字_
**粗体文字**
__粗体文字__
***粗斜体文字***
___粗斜体文字___
CO<sub>2</sub>
O<sub>16</sub><sup>8</sup>
$O_{16}^{8}$
斜体文字
斜体文字
粗体文字
粗体文字
粗斜体文字
粗斜体文字
CO2
O168
\(O_{16}^{8}\)
4.The split line of Markdown
You can create an new split line by more than 3 continuous '*', even with blankspace in them. However, other symbols or figures aren't permitted among '*', '-' or '_'.
***
* * *
---
- - -
___
_ _ _
5.The Strikethrough of Markdown
~~baidu~~
baidu
6.The underline of Markdown
<u>要加下划线的文本<u> //<u>为html语言
$\underline{要加下划线的文本}$
\(\underline{要加下划线的文本}\)
7.The footnote of Markdown
使用 Markdown可以效率的书写文档, 直接转换成 HTML[1], 你可以使用 Typora[2] 编辑器进行书写。(引文见本指南文末)
使用 Markdown可以效率的书写文档, 直接转换成 HTML[^HTML], 你可以使用 Typora[^2] 编辑器进行书写。
# 脚注说明在文档末尾
[^HTML]:HyperText Markup Language 超文本标记语言
[^2]:NEW WAY TO READ & WRITE MARKDOWN
8.The list of Markdown
Markdown支持无序列表和有序列表。
(1) Unordered lists
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项
-
第一项
-
第二项
-
第一项
-
第二项
-
第一项
-
第二项
(2) Ordered lists
1. 第一项
2. 第二项
- 第一项
- 第二项
(3) The nest of lists
嵌套列表只需要在子列表之前加入4个空格。
1. 第一项
* 第一项嵌套的第一个元素
* 第一项嵌套的第一个元素嵌套的第一个元素
* 第一项嵌套的第一个元素嵌套的第二个元素
* 第一项嵌套的第二个元素
2. 第二项
* 第二项嵌套的第一个元素
* 第二项嵌套的第二个元素
- 第一项
- 第一项嵌套的第一个元素
- 第一项嵌套的第一个元素嵌套的第一个元素
- 第一项嵌套的第一个元素嵌套的第二个元素
- 第一项嵌套的第二个元素
- 第一项嵌套的第一个元素
- 第二项
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
9. The block of Markdown
(1) The cition of block(区块引用)
> 有志者，事竟成，破釜沉舟，百二秦关终属楚；
苦心人，天不负，卧薪尝胆，三千越甲可吞吴。
有志者，事竟成，破釜沉舟，百二秦关终属楚；
苦心人，天不负，卧薪尝胆，三千越甲可吞吴。
(2) The nest of block
> 最外层嵌套
> > 第一层嵌套
> > > 第二层嵌套
最外层嵌套
第一层嵌套
第二层嵌套
(3) Using lists in block
> 1. 第一项
> * 第一项嵌套的第一个元素
> * 第一项嵌套的第一个元素嵌套的第一个元素
> * 第一项嵌套的第一个元素嵌套的第二个元素
> * 第一项嵌套的第二个元素
> 2. 第二项
> * 第二项嵌套的第一个元素
> * 第二项嵌套的第二个元素
- 第一项
- 第一项嵌套的第一个元素
- 第一项嵌套的第一个元素嵌套的第一个元素
- 第一项嵌套的第一个元素嵌套的第二个元素
- 第一项嵌套的第二个元素
- 第二项
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
(4) Using block in lists
1. 第一项
> 第一个区块
2. 第二项
> 第二个区块
-
第一项
第一个区块
-
第二项
第二个区块
10.Code block in Markdown
(1) Code block in sentences
Bracket the code block using two ' ` '(反单引号)
`printf()`函数
printf()函数
(2) Code block out of sentences(You may need select language)
i Bracket the code block using ' ``` '(3个反单引号)
代码如下：
```C
printf("Hello, World!");
return 0;
```(这里空着)
效果如下：
printf("Hello, World!");
return 0;
ii Typing 'Tab' or 4 blankspaces before the code block
代码如下：
printf("Hello, World!");
return 0;
效果如下：
printf("Hello, World!");
return 0;
11.Interlink in Markdown
(1) Normal Interlink
i Method 1 插入隐式链接
[菜鸟教程](https://www.runoob.com)
ii Method 2 明文插入链接
<https://www.runoob.com>
(2) Advanced Interlink
Assign the interlink by variable.
谷歌链接用 1 作为网址链接 [Google][1]
菜鸟教程链接用 runoob 作为网址链接 [Runoob][runoob]
然后在文档的结尾为变量赋值。
[1]: https://www.google.com/
[runoob]: https://www.runoob.com/
谷歌链接用 1 作为网址链接 Google
菜鸟教程链接用 runoob 作为网址链接 Runoob
然后在文档的结尾为变量赋值。
12.Insert Pictures in Markdown
(1) Get pictures from website (依赖网络)
获取图片地址方法：在浏览器右键图片，点击复制图片地址。
原生Markdown不支持图片缩放，但是在部分编辑器（如Obsidian）的支持下可以设定，我们也可以借助html实现图片位置和大小的设定。
(2) Get pictures from local files (需要图片存储在固定位置)
 //当前文件夹
或者
 //文件夹全称
(3) Store Pictures into the picture database (图床同样依赖网络)
这里不再展示。
(4) Transform the picture into base64 code (需要Python或者其他工具)
base64编码太长，这里不再展示。
(5) Insert video into markdown file
13.Table
(1)居中对齐
| 中国省份 | 对应省会 | 典型美食 |
|:----:|:----:|:----:|
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
| 中国省份 | 对应省会 | 典型美食 |
|---|---|---|
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
| 图片1 | 还是图片1 |
|---|---|
| |
|
(2)靠左对齐
| 中国省份 | 对应省会 | 典型美食 |
|:---- |:---- |:---- |
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
| 中国省份 | 对应省会 | 典型美食 |
|---|---|---|
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
(3)靠右对齐
| 中国省份 | 对应省会 | 典型美食 |
| ----:| ----:| ----:|
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
| 中国省份 | 对应省会 | 典型美食 |
|---|---|---|
| 河南 | 郑州 | 胡辣汤 |
| 湖北 | 武汉 | 热干面 |
| 湖南 | 长沙 | 臭豆腐 |
14.Markdown support for HTML
[-^-] 试试插入这个
<iframe src="https://www.bilibili.com/" width=100% height=500px></iframe>
(1)HTML设置图片大小以及对齐方式
<div align=center>
<img
src='/i/l/?n=24&i=blog/2331888/202408/2331888-20240802141613654-87186117.jpg'
width='100px'
height='150px'
alt='加载失败时显示该内容' />
</div>
(2)HTML设置字体对齐方式
<p align = "left">月是故乡明</p>
<center>月是故乡明</center>
<p align = "right">月是故乡明</p>
月是故乡明
月是故乡明
(3)HTML设置字体、颜色、字号
<center>
<font face = "微软雅黑" color = "red" size = 5>
我是红色微软雅黑， 字号为5， 你值得拥有
</font>
</center>
<center>
<font face = "华文行楷" color = "purple" size = 20>
<b> //字体加粗
三百六十行行行出状元
</b> //字体加粗
</font>
</center>
(4)HTML特殊字体设置
| 标签 | 描述 |
|---|---|
<b></b> |
定义粗体文字 |
<i></i> |
定义斜体文字 |
<sub></sub> |
定义下标文字 |
<sup></sup> |
定义上标文字 |
<del></del> |
定义删除文字 |
15.Equation in Markdown
(1) Equationes in sentences
$\lim \limits_{i \to \infty} \Sigma \mu_{i} \cdot d_{i}$
我们说没事敲一敲像 \(\lim \limits_{i \to \infty} \Sigma \mu_{i} \cdot d_{i}\) 这样的公式可以缓和心情。
(2) Equationes between sentences
$$
\begin{cases}
\oiint_{s} \overrightarrow{D} \cdot \overrightarrow{dS} = \iiint_v \rho dV\\
\oint_{c} \overrightarrow{E} \cdot \overrightarrow{dl} = \iint_{s} (-\frac{\partial{\overrightarrow{B}}}{\partial{t}}) \cdot \overrightarrow{dS}\\
\oint_{c} \overrightarrow{H} \cdot \overrightarrow{dl} = \int_s (\overrightarrow{J}_{s} + \frac{\partial \overrightarrow{D}}{\partial t}) \cdot\overrightarrow{dS}\\
\oiint_{s} \overrightarrow{B} \cdot \overrightarrow{dS} = 0\\
\end{cases}
$$
16.Flow diagram in Markdown
(1) 横向流程图
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
```(这里空着)
(2) 竖式流程图
```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
```(这里空着)
(3) UML标准时序图
```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
participant 王五
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```(这里空着)
(4) 甘特图
示例一：
```mermaid
gantt
dateFormat YYYY-MM-DD
title 使用mermaid语言定制甘特图
section 任务1
已完成的任务 :done, des1, 2014-01-06,2014-01-08
正在进行的任务 :active, des2, 2014-01-09, 3d
待完成任务1 : des3, after des2, 5d
待完成任务2 : des4, after des3, 5d
section 关键任务
已完成的关键任务 :crit, done, 2014-01-06,24h
已完成的关键任务2 :crit, done, after des1, 2d
正在进行的关键任务 :crit, active, 3d
待完成的关键任务 :crit, 5d
待完成任务 :2d
待完成任务2 :1d
section 文档编写
描述甘特图语法 :active, a1, after des1, 3d
完成甘特图实例1 :after a1 , 20h
完成甘特图实例2 :doc1, after a1 , 48h
```(这里空着)
示例二：
```mermaid
gantt
%% 语法示例
dateFormat YYYY-MM-DD
title 软件开发甘特图
section 设计
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI设计 : des3, after des2, 5d
未来任务 : des4, after des3, 5d
section 开发
学习准备理解需求 :crit, done, 2014-01-06,24h
设计框架 :crit, done, after des2, 2d
开发 :crit, active, 3d
未来任务 :crit, 5d
耍 :2d
section 测试
功能测试 :active, a1, after des3, 3d
压力测试 :after a1 , 20h
测试报告 : 48h
```(这里空着)