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{要加下劃線的文字}$

\(\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>

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

\[\begin{cases} \oint_{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}\\ \oint_{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[橫向流程圖]
```(這裡空著)

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[豎向流程圖]
```(這裡空著)

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/>看醫生...
    李四-->>張三: 很好!
    王五->李四: 你怎麼樣?
    李四-->王五: 很好!
```(這裡空著)

%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭 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
```(這裡空著)

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
```(這裡空著)

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 ↩︎

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) 甘特圖

相關文章