markdown常用語法總結

2022 年 10 月 20 日
筆記
學習筆記

markdown常用語法總結

Markdown 簡明語法手冊

1. 斜體和粗體

使用 * 和 ** 表示斜體和粗體。

示例：

這是斜體，這是粗體。

2. 分級標題

使用 === 表示一級標題，使用 — 表示二級標題。

示例：

這是一個一級標題
============================

這是一個二級標題
--------------------------------------------------

### 這是一個三級標題

你也可以選擇在行首加井號表示不同級別的標題 (H1-H6)，例如：# H1, ## H2, ### H3，#### H4。

3. 外鏈接

使用 [描述](鏈接地址) 為文字增加外鏈接。

示例：

這是去往本人github 的鏈接。

4. 無序列表

使用 *，+，- 表示無序列表。

示例：

無序列表項一
無序列表項二
無序列表項三

5. 有序列表

使用數字和點表示有序列表。

示例：

有序列表項一
有序列表項二
有序列表項三

6. 文字引用

使用 > 表示文字引用。

示例：

野火燒不盡，春風吹又生。

7. 行內程式碼塊

使用 `程式碼` 表示行內程式碼塊。

示例：

讓我們聊聊 html。

8. 程式碼塊

使用四個縮進空格表示程式碼塊。

示例：

這是一個程式碼塊，此行左側有四個不可見的空格。

也可以使用
“`
程式碼塊
“`

程式碼塊

9. 插入影像

使用 ![描述](圖片鏈接地址) 插入影像。

示例：

Markdown 高階語法手冊

1. 內容目錄

在段落中填寫 [TOC] 以顯示全文內容的目錄結構。一般放在文章開頭。

2. 標籤分類

在編輯區任意行的列首位置輸入以下程式碼給文稿標籤，方便後續查找分類：

標籤：數學英語 Markdown

或者

Tags：數學英語 Markdown

3. 刪除線

使用 ~~ 表示刪除線。

~~這是一段錯誤的文本。~~

4. 註腳

使用 [^keyword] 表示註腳。

這是一個註腳^[1]的樣例。

這是第二個註腳^[2]的樣例。

5. LaTeX 公式

起止符

行內公式（不會換行）使用$作為起止符：

 $E=mc^2$

$E=mc^2$

塊級公式（單獨一行）使用$$作為起止符：

$$a+b+c+d+e$$

\[a+b+c+d+e
\]

角標

上標使用^表示，上標長度大於一時，使用{}包圍：

$$a^2$$
$$a^{1+1}$$

\[a^2
\]

\[a^{1+1}
\]

下標使用_表示，下標長度大於一時，使用{}包圍：

$$a_2$$
$$a_{1+1}$$

\[a_2
\]

\[a_{1+1}
\]

上下標可以同時使用，相互嵌套,先下後上或者先上後下都可以：

$$a_2^2$$
$$a^2_2$$
$$a^{b^2}$$

\[a_2^2
\]

\[a^2_2
\]

\[a^{b^2}
\]

符號

符號一般由\和英文縮寫組成

根式使用\sqrt[指數]{表達式}表示：

$$\sqrt[2]{a+b}$$

\[\sqrt[2]{a+b}
\]

分式使用\frac{分子}{分母}表示：

$$\frac{dy}{dx}$$

\[\frac{dy}{dx}
\]

求和使用\sum_{下限}^{上限}表示：

$$\sum_{i=1}^{i=10}a_i$$

\[\sum_{i=1}^{i=10}a_i
\]

負無窮使用-\infty表示，正無窮使用+\infty表示：

$$\sum_{i=-\infty}^{i=+\infty}a_i$$

\[\sum_{i=-\infty}^{i=+\infty}a_i
\]

積分使用\int_{下限}^{上限}表示：

$$\int_{-\infty}^0\frac{1}{x}dx$$

\[\int_{-\infty}^0\frac{1}{x}dx
\]

矩陣

矩陣使用\begin{matrix}和\end{matrix}作為起止符，使用&表示空格，使用\\表示換行：

$$
\begin{matrix}
   1 & 0 & 0 \\
   0 & 1 & 0 \\
   0 & 0 & 1
\end{matrix}
$$

\[\begin{matrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{matrix}
\]

使用\left符號和\right符號作為起止符，包圍矩陣，可以為矩陣添加括弧：

$$
\left[
\begin{matrix}
   1 & 0 & 0 \\
   0 & 1 & 0 \\
   0 & 0 & 1
\end{matrix}
\right]
$$

\[\left[
\begin{matrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{matrix}
\right]
\]

需要注意的是，如果想使用{}括弧，需要在其前面添加反斜杠：

$$
\left\{
\begin{matrix}
   1 & 0 & 0 \\
   0 & 1 & 0 \\
   0 & 0 & 1
\end{matrix}
\right\}
$$

\[\left\{
\begin{matrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{matrix}
\right\}
\]

公式號

我們可能需要給塊級公式末尾添加公式號，只需要使用\tag{編號}即可：

$$
\left\{
\begin{matrix}
   1 & 0 & 0 \\
   0 & 1 & 0 \\
   0 & 0 & 1
\end{matrix}
\right\} \tag{1}
$$

\[\left\{
\begin{matrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{matrix}
\right\} \tag{1}
\]

6. 加強的程式碼塊

支援四十一種程式語言的語法高亮的顯示，行號顯示。

非程式碼示例：
“`
$ sudo apt-get install vim-gnome
“`

$ sudo apt-get install vim-gnome

Python 示例：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

JavaScript 示例：

/**
* nth element in the fibonacci series.
* @param n >= 0
* @return the nth element, >= 0.
*/
function fib(n) {
  var a = 1, b = 1;
  var tmp;
  while (--n >= 0) {
    tmp = a;
    a += b;
    b = tmp;
  }
  return a;
}

document.write(fib(10));

7. 餅圖

源碼：

```mermaid
pie
    title 為什麼總是宅在家裡？
    "喜歡宅" : 45
    "天氣太熱" : 70
    "窮" : 500
	"關你屁事" : 95
```

渲染：

pie
title 為什麼總是宅在家裡？
“喜歡宅” : 45
“天氣太熱” : 70
“窮” : 500
“關你屁事” : 95

8 類圖

源碼：

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }
    class Fish{
      -int sizeInFeet
      -canEat()
    }
    class Zebra{
      +bool is_wild
      +run()
    }
```

渲染：

classDiagram
Animal <|– Duck
Animal <|– Fish
Animal <|– Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}

9. 甘特圖

甘特圖內在思想簡單。基本是一條線條圖，橫軸表示時間，縱軸表示活動（項目），線條表示在整個期間上計劃和實際的活動完成情況。它直觀地表明任務計劃在什麼時候進行，及實際進展與計劃要求的對比。

源碼：

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
```

渲染：

gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2014-01-12 , 12d
another task : 24d

更多語法參考：甘特圖語法參考

10. Mermaid 流程圖

```mermaid
graph TB
	%% s=start  e=end  f=fork  n=normal
	
	s([開始])-->f1{{if條件}};

	%% 分支點2
	f1--true-->n1[if語句塊]-->e([結束]);
	f1--false-->f2{{else if條件}};

	%% 分支點1
	f2--true-->n2[else if語句塊]-->e;
	f2--false-->n3[else語句塊]-->e;
```

graph TB
%% s=start e=end f=fork n=normal

s([開始])–>f1{{if條件}};

%% 分支點1
f1–true–>n1[if語句塊]–>e([結束]);
f1–false–>f2{{else if條件}};

%% 分支點2
f2–true–>n2[else if語句塊]–>e;
f2–false–>n3[else語句塊]–>e;

更多語法參考：Mermaid 流程圖語法參考

11. Mermaid 序列圖

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop every minute
        John-->>Alice: Great!
    end
```

sequenceDiagram
Alice->>John: Hello John, how are you?
loop every minute
John–>>Alice: Great!
end

源碼：

```mermaid
sequenceDiagram
	%% 自動編號
	autonumber
	%% 定義參與者並取別名，aliases：別名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便簽說明
        Note left of A: 只複習了一部分
        Note right of B: 沒複習
        Note over A,B: are contacting
        
        A->>B: 明天是要考試嗎？
        B-->>A: 好像是的！
        
        %% 顯示並行發生的動作，parallel：平行
        %% par [action1]
        rect rgb(0, 25, 155)
            par askA
                C -->> A:你複習好了嗎？
            and askB
                C -->> B:你複習好了嗎？
            and self
                C ->>C:我還沒準備複習......
            end
        end
        
        %% 背景高亮，提供一個有顏色的背景矩形
        rect rgb(25, 55, 0)
            loop 自問/Every min
            %% <br/>可以換行
            C ->> C:我什麼時候<br/>開始複習呢？
            end
        end
        
        %% 可選擇路徑
        rect rgb(153, 83, 60)
            alt is good
                A ->> C:複習了一點
            else is common
                B ->> C:我也是
            end
            %% 沒有else時可以提供默認的opt
            opt Extra response
                C ->> C:你們怎麼不回答我
            end
        endsequenceDiagram
	%% 自動編號
	autonumber
	%% 定義參與者並取別名，aliases：別名
        participant A as Aly
        participant B as Bob
        participant C as CofCai
        %% 便簽說明
        Note left of A: 只複習了一部分
        Note right of B: 沒複習
        Note over A,B: are contacting
        
        A->>B: 明天是要考試嗎？
        B-->>A: 好像是的！
        
        %% 顯示並行發生的動作，parallel：平行
        %% par [action1]
        rect rgb(0, 25, 155)
            par askA
                C -->> A:你複習好了嗎？
            and askB
                C -->> B:你複習好了嗎？
            and self
                C ->>C:我還沒準備複習......
            end
        end
        
        %% 背景高亮，提供一個有顏色的背景矩形
        rect rgb(25, 55, 0)
            loop 自問/Every min
            %% <br/>可以換行
            C ->> C:我什麼時候<br/>開始複習呢？
            end
        end
        
        %% 可選擇路徑
        rect rgb(153, 83, 60)
            alt is good
                A ->> C:複習了一點
            else is common
                B ->> C:我也是
            end
            %% 沒有else時可以提供默認的opt
            opt Extra response
                C ->> C:你們怎麼不回答我
            end
        end
```

渲染：

sequenceDiagram
%% 自動編號
autonumber
%% 定義參與者並取別名，aliases：別名
participant A as Aly
participant B as Bob
participant C as CofCai
%% 便簽說明
Note left of A: 只複習了一部分
Note right of B: 沒複習
Note over A,B: are contacting

A->>B: 明天是要考試嗎？
B–>>A: 好像是的！

%% 顯示並行發生的動作，parallel：平行
%% par [action1]
rect rgb(0, 25, 155)
par askA
C –>> A:你複習好了嗎？
and askB
C –>> B:你複習好了嗎？
and self
C ->>C:我還沒準備複習……
end
end

%% 背景高亮，提供一個有顏色的背景矩形
rect rgb(25, 55, 0)
loop 自問/Every min
%% <br/>可以換行
C ->> C:我什麼時候<br/>開始複習呢？
end
end

%% 可選擇路徑
rect rgb(153, 83, 60)
alt is good
A ->> C:複習了一點
else is common
B ->> C:我也是
end
%% 沒有else時可以提供默認的opt
opt Extra response
C ->> C:你們怎麼不回答我
end
end

更多語法參考：Mermaid 序列圖語法參考

12. 表格支援


 項目| 價格   |  數量  |
| --------   | -----:  | :----:  |
| 電腦     | $1600 |   5     |
| 手機        |   $12   |   12   |
| 管線        |    $1    |  234  |

項目	價格	數量
電腦	$1600	5
手機	$12	12
管線	$1	234

13. 定義型列表

名詞 1

定義 1（左側有一個可見的冒號和四個不可見的空格）

程式碼塊 2

這是程式碼塊的定義（左側有一個可見的冒號和四個不可見的空格）

  程式碼塊（左側有八個不可見的空格）

14. 待辦事宜 Todo 列表

使用帶有 [ ] 或 [x] （未完成或已完成）項的列表語法撰寫一個待辦事宜列表，並且支援子列表嵌套以及混用Markdown語法，例如：

- [ ] **代做列表**
    - [ ] 改進 Cmd 渲染演算法，使用局部渲染技術提高渲染效率
    - [ ] 支援以 PDF 格式導出文稿
    - [x] 新增Todo列表功能 [語法參考](//github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments)
    - [x] 改進 LaTex 功能
        - [x] 修復 LaTex 公式渲染問題
        - [x] 新增 LaTex 公式編號功能 [語法參考](//docs.mathjax.org/en/latest/tex.html#tex-eq-numbers)
- [ ] **七月旅行準備**
    - [ ] 準備郵輪上需要攜帶的物品
    - [ ] 瀏覽日本免稅店的物品
    - [x] 購買藍寶石公主號七月一日的船票

對應顯示如下待辦事宜 Todo 列表：

15. 註腳

16 嵌入

嵌入都是依賴 HTML標籤 實現的，嵌入的都是在線鏈接格式
- 如果是本地的，Obsidian 中音頻是有自帶的可錄製的錄音機插件的，其他的 音頻、影片 直接複製黏貼就可以了，也可以直接拖拽到OB的筆記介面
  - 其他的媒體文件在 Obsidian 也和圖片一樣，以雙鏈的格式引用在目標筆記中，使用 ! 使它可見

15.1 嵌入音頻

格式：
- <audio controls="controls" preload="none" src="音頻鏈接地址"></audio>
示例：

<audio controls="controls" preload="none" src="//www.ldoceonline.com/media/english/exaProns/p008-001803372.mp3?version=1.2.37"></audio>

效果：

15.2 嵌入影片

格式：

<video width="600" height="420" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">  
</video>

說明：
- width ( 寬度 ) height ( 高度 ) ，可以自己設置，直接輸入數字即可，單位默認是 px(像素)
  也可以使用 百分比
  width=100% 代表水平撐滿整個窗口
  height=50% 代表垂直撐滿半個窗口
- Video標籤 支援的影片格式：MP4 ogg webm

15.3 嵌入頁面

格式： <iframe width=600 height=400 src="頁面鏈接地址" scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe width=600 height=400 src="//www.runoob.com/html/html-tutorial.html" scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

效果：

iframe標籤 除了嵌入頁面，也可以嵌入在線影片，主流的影片網站都會提供嵌入程式碼
- 具體可以看這個 iframe影片嵌入教程
- B站的影片，得在 // 前面補充 http:
- 不是所有的編輯器和筆記軟體都支援這個
示例：

<iframe width=600 height=400 src="//player.bilibili.com/player.html?aid=20190823&bvid=BV1yW411s7og&cid=32964980&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

寬高設置和前面的 video 一樣

效果：

這是一個註腳的文本。 ↩︎
這是另一個註腳的文本。 ↩︎

Tags: 學習筆記