Markdown入门指南

HelyaHsiung 2021.9.27 SRE IN UESTC

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}$

斜体文字
斜体文字
粗体文字
粗体文字
粗斜体文字
粗斜体文字
CO₂
O₁₆⁸
$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{要加下划线的文本}$

$\underset{―}{要加下划线的文本}$

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>

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 (依赖网络)

获取图片地址方法：在浏览器右键图片，点击复制图片地址。

![图片说明(可选)|200](https://img2024.cnblogs.com/blog/2331888/202408/2331888-20240802141613654-87186117.jpg "标题(可选)")

原生Markdown不支持图片缩放，但是在部分编辑器（如Obsidian）的支持下可以设定，我们也可以借助html实现图片位置和大小的设定。

(2) Get pictures from local files (需要图片存储在固定位置)

![图片|400x300](./sources/IMG_20210724_102851.jpg "本地图片")               //当前文件夹

或者

![图片|400x300](D:/AppData/MarkDown/IMG_20210724_102851.jpg "本地图片") //文件夹全称

(3) Store Pictures into the picture database (图床同样依赖网络)

这里不再展示。

(4) Transform the picture into base64 code (需要Python或者其他工具)

base64编码太长，这里不再展示。

(5) Insert video into markdown file

![Video](./sources/2023-08-16-16-38-49.mkv)

Video

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='https://img2024.cnblogs.com/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>

我是红色微软雅黑，字号为5，你值得拥有

<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_{i \to \infty} Σ μ_{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}
$$

{\begin{cases} \oint_{s} \vec{D} \cdot \vec{d S} = ∭_{v} ρ d V \\ \oint_{c} \vec{E} \cdot \vec{d l} = \iint_{s} (- \frac{\partial \vec{B}}{\partial t}) \cdot \vec{d S} \\ \oint_{c} \vec{H} \cdot \vec{d l} = \int_{s} ({\vec{J}}_{s} + \frac{\partial \vec{D}}{\partial t}) \cdot \vec{d S} \\ \oint_{s} \vec{B} \cdot \vec{d S} = 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
```(这里空着)

HyperText Markup Language 超文本标记语言 ↩︎
NEW WAY TO READ & WRITE MARKDOWN ↩︎

posted @ 2024-08-02 14:18 北极洲的小卖部阅读(14) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 第十届全国大学生GIS应用技能大赛试题及参考解题过程(A下午)

· 等高线自动追踪的Python可视化

· Markdown的基本语法

· MARKDOWN笔记

· Markdown学习

公告

昵称：北极洲的小卖部
园龄： 3年11个月
粉丝： 5
关注： 6

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 第十届全国大学生 GIS 应用技能大赛试题及参考解题过程(A上午)(2)

Markdown入门指南

Markdown入门指南

1.The Title of Markdown

(1) Denote title using '=' or '-'

(2) Denote title using '#'

2.The paragraph of Markdown

(1) Create a paragrapha by two blankspaces and an 'Enter'

(2) Create a paragraph by two 'Enter'

3.The font of Markdown

4.The split line of Markdown

5.The Strikethrough of Markdown

6.The underline of Markdown

7.The footnote of Markdown

8.The list of Markdown

(1) Unordered lists

(2) Ordered lists

(3) The nest of lists

9. The block of Markdown

(1) The cition of block(区块引用)

(2) The nest of block

(3) Using lists in block

(4) Using block in lists

10.Code block in Markdown

(1) Code block in sentences

(2) Code block out of sentences(You may need select language)

i Bracket the code block using ' ``` '(3个反单引号)

ii Typing 'Tab' or 4 blankspaces before the code block

11.Interlink in Markdown

(1) Normal Interlink

i Method 1 插入隐式链接

ii Method 2 明文插入链接

(2) Advanced Interlink

12.Insert Pictures in Markdown

(1) Get pictures from website (依赖网络)

(2) Get pictures from local files (需要图片存储在固定位置)

(3) Store Pictures into the picture database (图床同样依赖网络)

(4) Transform the picture into base64 code (需要Python或者其他工具)

(5) Insert video into markdown file

13.Table

(1)居中对齐

(2)靠左对齐

(3)靠右对齐

14.Markdown support for HTML

(1)HTML设置图片大小以及对齐方式

(2)HTML设置字体对齐方式

(3)HTML设置字体、颜色、字号

(4)HTML特殊字体设置

15.Equation in Markdown

(1) Equationes in sentences

(2) Equationes between sentences

16.Flow diagram in Markdown

(1) 横向流程图

(2) 竖式流程图

(3) UML标准时序图

(4) 甘特图

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论