<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>
###### tags: `CODING`
# Markdown 常用語法示例 (含Mathjax)
Markdown為簡潔現代的筆記方法，僅需為文字添加簡單的標符，即可達到相當功能性的筆記效果，在此將使用VS Code介紹一個相當方便的筆記工具。
> We believe that writing is about content, about what you want to say – not about fancy formatting. — Ulysses
>「我們相信寫作是關於內容，是專注在你的所思所想，而不是花俏的格式。」
### 一、安裝編輯工具 Visual Studio Code並配置編輯環境
1. 使用下方連結，選擇對應的作業系統安裝VS Code，安裝過程可以使用默認設置。
[VS Code 安裝連結](https://code.visualstudio.com/download)
2. 進入VS Code視窗後，在左側工具列中找到延伸模組圖標，點擊之。
3. 安裝延伸模組。在搜索欄中輸入下面關鍵字，找到對應模組並安裝
* Chinese (Traditional) Language Pack for Visual Studio Code
* Markdown All in One
* Markdown PDF
* Markdown Preview Enhanced
如果有其他程式語言編譯需求，也可以在搜索欄內輸入相關關鍵字，進行相應的安裝，在此不多做介紹。安裝完畢後，重啟VS Code以載入安裝的模組。
4. 完成延伸模組安裝後，在左測工具列中點擊檔案總管圖標，選擇預設資料夾以存放往後的工作檔案。
5. 在檔案總管區，點擊下面圖標中最左方的新增檔案鍵，建立以副檔名為`.md`的Markdown檔案，在此以`demo.md`為例。
注意，如果創建成功，檔頭圖標應為如圖所示樣，若非，則需手動將此檔案環境改為Markdown語言：在視窗右下方找到並點擊`gcc-md`鍵，此時視窗上方將出現語言選擇欄，在搜索欄中輸入`Markdown`或在下方滑動選取欄找到它並點選。
6. 現在，編寫Markdown基本環境已配置完成，你可以點選視窗右上角圖標中最左邊打開側邊預覽的按鈕，此時畫面將被分割為左右兩部分，左側為程式編輯區，右邊為結果預覽區，你可以在左側編寫的同時注意右側預覽區的預覽結果。
---
### 二、Markdown基本語法
#### 之一：為文檔建立一個顯目的標題
一個文檔必然存在顯目的標題，在Markdown筆記中更是如此，只要透過簡單的標題語法就能達到相應的效果。若想要將文字設為標題，僅需在文字前加上`#`即可，其數量會決定該文字標題的等級，在Markdown筆記中標題可分為六級，一級標題最大，僅須在標題文字前前綴`#`；六級標題最小，僅需在文字前加上`######`，其餘分級依此類推。下面所示為左側編輯區輸入的文字與右側預覽區呈現的結果：
```Markdown
# 一級標題(最大)
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題(最小)
```
> # 一級標題(最大)
> ## 二級標題
> ### 三級標題
> #### 四級標題
> ##### 五級標題
> ###### 六級標題(最小)
#### 之二：為文檔建立一般內文
文檔中最重要的還是內文，在Markdown中，對於編輯區未加上前綴與後綴的文字將判別為一般文字。此外，如果需要將部分內文標註以醒目的文字，可以使用`**`前後綴標註文字，達到**粗體效果**，或使用`*`前後綴文字以達到*斜體效果*，這兩個效果也可以疊加使用。如果想要將內文文字以刪除線標示，可以使用`~~`前後綴刪除文字，達到刪除的效果。以下為相關範例：
```Markdown
一般內文 Text
**粗體效果** 和 *斜體效果* 可 ***疊加使用***
~~刪除文字~~
```
>一般內文 Text
>**粗體效果** 和 *斜體效果* 可 ***疊加使用***
>~~刪除文字~~
此外，Markdown也提供了變更內文文字顏色的功能，只需使用下面語法就能達成，`color: red;`內的顏色可依需求進行修改：
```Markdown
<span style="color: red;"> 紅色文字 </span>
```
><span style="color: red;"> 紅色文字 </span>
#### 之三: 建立清單及勾選欄
在文檔編寫時，經常需要使用到條列式清單以方便內文的陳述，在Markdown語法中，使用前綴`* `或`- `或`+ `以達到**無序清單** 裡的行首子彈(Bullet)效果，請`*`與文字間必須以空格區隔，才會被Markdown辨識為無序清單。使用`tab`鍵後再加上前綴，即可為無序清單建立子清單。如下面範例：
```Markdown
* 無序清單1
* 無序清單2
* 無序子清單
```
>* 無序清單1
>* 無序清單2
> * 無序子清單
如果想以具有序號的方式將清單條列，我們也可以使用直觀的編號語法`1. `、`2. `...建立**有序清單**，使用方法與無序清單相同，透過`Enter`鍵換行時，也能自動生成接續序號，如下所示。
```Markdown
1. 有序清單1
2. 有序清單2
1. 有序子清單
3. 有序清單3
```
> 1. 有序清單1
> 2. 有序清單2
> 1. 有序子清單
> 3. 有序清單3
此外，應情況需求，我們也可以利用Markdown編輯文檔時，為文檔加上勾選清單，語法為`- [ ]`，注意，中括號前與其內必須各含有一個空格。如果需要核選該選項，則只需在中括號內加入`X`即可，例如：
```Markdown
- [ ] 選項1
- [X] 選項2
- [ ] 選項3
```
- [ ] 選項1
- [X] 選項2
- [ ] 選項3
#### 之四: 引入框
在部份情境下，可能有在筆記中插入引文的需求。在Maskdown的語法中，我們使用`>`字符前綴引文內容，並且具有能層層疊加的功能，如下示範：
```Markdown
> 第一層引文
>> 第二層引文
>>> 第三層引文
```
> 第一層引文
>> 第二層引文
>>> 第三層引文
#### 之五: 插入程式碼
對於部分使用者而言，文檔中時常需要插入程式碼標註，此時若使用一般筆記工具，容易出現格式錯位等問題，不易後續閱讀及處理，在這裡Markdown提供了簡單的插入方法，僅需使用反引號將程式碼前後綴，達到良好的閱讀效果。使用單反引號能將單字或單行程式碼插入，使用三個連續單反引號則可達到多行程式碼插入效果。以下為您簡單展示：
```Markdown
在一段內文中插入單字或單行`function()`程式片段，或插入多行程式碼
```
import math
n = round(math.pi)
for i in range(n):
if i == 1 :
print("Hello World")
else:
print("Goodbye World")
```
```
>在一段內文中插入單字或單行`function()`程式片段，或插入多行程式碼
> ```
> import math
> n = round(math.pi)
> for i in range(n):
> if i == 1 :
> print("Hello World")
> else:
> print("Goodbye World")
> ```
更甚至，也可以為插入的程式碼標註程式語言，Markdown支援了市面上多數的程式語言，例如：
```Markdown
```python
import math
n = round(math.pi)
for i in range(n):
if i == 1 :
print("Hello World")
else:
print("Goodbye World")
```
```
此時，預覽區便會出現如下結果：
> ```python
> import math
> n = round(math.pi)
> for i in range(n):
> if i == 1 :
> print("Hello World")
> else:
> print("Goodbye World")
> ```
#### 之六:插入更多
在一般文檔編輯過程中，經常會插入圖片或超連結，在Markdown筆記中提供了便捷的插入方法。如需插入圖片，則將圖片檔案拖曳至.md文檔所在的資料夾位置，再透過以下語法，即可將圖片插入檔案中：
```Markdown
```
或使用下面方法，並可針對圖片尺寸(像素)進行適當的調整設定
```Markdown
<img src="檔名.png" alt="smiley" height="36px" width="168px">
```
此外，我們只要指定超連結目的位置，也可以使用下面語法插入網頁的超連結，並且透過顯示中括號內的文字，來取代網址成為超連結按鍵，更利於閱讀使用。語法如下所示：
```Markdown
[Google超連結](https://www.google.com.tw/)
```
在預覽區中，只會呈現出中括號內的文字，點擊文字便可前往指定網址:
> [Google超連結](https://www.google.com.tw/)
#### 之七: 分隔
如果在筆記內文的段落間，想要插入分隔線或空行，可以分別使用`---`和` <br />`語法。
---
### 三、Markdown其他語法與輸出
#### 之一: 文字設置
在Markdown筆記中，預設文字皆會靠左，字級大小為3，若想將文字設定為置中、置右，或改變字級大小(1~6級)，可以透過以下語法實現：
```Markdown
<p align="center">
置中文字
</p>
<p align="right">
置右文字
</p>
<font size="1"> 一級字 Text </font>
<font size="2"> 二級字 Text </font>
<font size="3"> 三級字 Text </font>
<font size="4"> 四級字 Text </font>
```
><p align="center">
> 置中文字
></p>
><p align="right">
> 置右文字
></p>
> <font size="1"> 一級字 Text </font>
> <font size="2"> 二級字 Text </font>
> <font size="3"> 三級字 Text </font>
> <font size="4"> 四級字 Text </font>
如果需要對特定文字執行聚光文字效果，則可使用下面語法：
```Markdown
<mark >聚光文字</mark>
或
==聚光文字==
```
><mark >聚光文字</mark>
>或
>==聚光文字==
#### 之二: 製作簡易表格
與多數筆記工具相同，Markdown也提供了表格功能。只要使用`|`字符區隔每項元素即可，需要注意的是，在欄名的下方需添加一行每個項目都是`:----:`的欄位，以觸發Markdown辨識功能。以下3$\times$3的表格為例:
```Markdown
| 欄名一 | 欄名二 | 欄名三 |
|:----:|:----:|:----:|
| 元素一 | 元素二 | 元素三 |
| 元素四 | 元素五 | 元素六 |
```
>| 欄名一 | 欄名二 | 欄名三 |
>|:----:|:----:|:----:|
>| 元素一 | 元素二 | 元素三 |
>| 元素四 | 元素五 | 元素六 |
在此為讀者說明，Markdown筆記強調以簡約為主，故簡易表格不建議用以呈現尺寸過大或過為複雜的表格資料。
#### 之三: Callout有色區塊
Markdown擴充版中提供了Callout有色區塊的編輯效果，具有增強視覺閱讀的功能，預設版本有四，使用`:::`前後綴內文的語法，即可成功實現：
```Markdown
::: success
Success 內文
:::
::: warning
Warning內文
:::
::: info
Info 內文
:::
::: danger
Danger 內文
:::
```
::: success
Success
:::
::: warning
Warning
:::
::: info
Info
:::
::: danger
Danger
:::
如果想建立可開合之目錄，則使用相似的語法，只是需要把區塊種類設為`spoiler`即可。
```Markdown
::: spoiler 目錄
Toggle Spoiler 收起項目1
Toggle Spoiler 收起項目2
:::
```
::: spoiler 目錄
Toggle Spoiler 收起項目1
Toggle Spoiler 收起項目2
:::
請注意，VS Code不提供這部分的功能，如果需要使用，建議使用支援Markdown的線上編輯平台。
#### 之四: Markdown註解
在編輯.md文檔時，為了使開發者能夠更快速識別程式碼，我們可以使用Markdown本身的註解功能，雖然程式不會執行、顯示該行，但能讓往後閱讀程式碼時更加方便，其語法只需將註解文字天加上前後綴，語法如下:
```Markdown
<!-- 註解文字 -->
```
#### 之四: 檔案輸出
以上已完整介紹Markdown常見的語法，當文檔編輯告一段落，你可以使用快捷鍵`ctrl+S`儲存檔案，也可以使用快捷鍵`F1`或`ctrl+shift+P`或點選滑鼠右鍵選單輸出.md文檔，有多種輸出方式可依照不同使用需求選擇，輸出後會直接存入目前資料夾位置內。
---
### 四、格式化數學方程
在筆記中，可能需要使用數學方程式，如果使用非格式化輸入方法，不免對讀者閱讀文檔上造成困難，為此，Markdown提供了MathJax格式化數學方程的整合插件，在單行方程`$`前後綴或多行方程`$$`前後綴中輸入對應的語法就能輸出工整的格式化結果。
在介紹相關格式化數學方程之前，為確保能正確格式化輸出.md文檔，我們必須在文檔最前面設定格式化數學方程，語法如下，僅需完整複製到文檔最前面幾行即可:
```Markdown
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ tex2jax: {inlineMath: [['$', '$']]}, messageStyle: "none" });
</script>
```
設置完畢後，下面將開始介紹常用的格式化數學方程。請注意，Markdown僅支援一般內文格式下的格式化數學方程，在格式化內容的前後，除`$`外，**不允許**出現其他前後綴字符。
#### 之一: 單行數學方程
在使用格式化數學方程時，將格式化內容前後綴`$`適用於單行之數學方程，且通常參入內文當中使用，因此此語法適合較為簡單的數學式。例如:
```Markdown
在計算 $ x^2 $ 時，我們會將底數 $ x $ 相乘。
```
#### 之二: 多行數學方程
與單行數學方程不同，多航數學方程適用於多行、整行、獨立或冗長的數學式，我們使用前後綴`$$`的技巧格式化數學方程，以下簡單呈現常見的格式化數學方程語法：
##### 其一：基本算符
| MathJax語法 | 對應輸出 | MathJax語法 | 對應輸出 |
|:----:|:----:|:----:|:----:|
| + | $+$ | \ne | $\ne$ |
| - | $-$ | > | $>$ |
| \times | $\times$ | < | $<$ |
| \div | $\div$ | \geq | $\geq$ |
| = | $=$ | \leq | $\leq$ |
| \pm | $\pm$ | \gg | $\gg$ |
| \mp | $\mp$ | \ll | $\ll$ |
| \equiv | $\equiv$ | \cdot | $\cdot$|
| \approx | $\approx$ | \cdots | $\cdots$|
此外，常見的分數符號，使用`\frac`語法，以下為簡單範例：
```Markdown
$$
\frac{分子}{分母} = 1
$$
```
預覽結果即顯示：
$$\frac{分子}{分母} = 1$$
##### 其二：邏輯推演字符與括弧
| MathJax語法 | 對應輸出 | MathJax語法 | 對應輸出 |
|:----:|:----:|:----:|:----:|
| \forall | $\forall$ | \exists | $\exists$ |
| \because | $\because$ | \left( \right) | $\left( \right)$ |
| \therefore | $\therefore$ | \left<> \right> | $\left< \right> $ |
| \implies | $\implies$ | \left[ \right] | $\left[ \right]$ |
| \iff | $\iff$ | \\{ \\} | {} |
此外，若欲設置不對稱括號(隱藏單邊括號)，則可更改單邊的括號為`\left.`或`\right.`達成。
##### 其三：特殊字符、字母
使用斜線後加上希臘字母英語拼音即可顯示相應的希臘字母，首字母大小寫決定希臘字母的大小寫。
| MathJax語法 | 對應輸出 | MathJax語法 | 對應輸出 |
|:----:|:----:|:----:|:----:|
| \gamma | $\gamma$ | \nabla | $\nabla$ |
| \Gamma | $\Gamma$ | \circ | $\circ$ |
| \delta | $\delta$ | \prime| $\prime$ |
| \Delta | $\Delta$ | \star | $\star$ |
##### 其四：上下標與根號
使用指數或上下標時，依照下面與法即可達到相應的格式化效果。上標使用`^{}`語法，下標使用`_{}`語法。其中`{}`為上下標超過一個字符時使用，若省略之，則只有第一個字符有上下標之效果。以下簡單演示：
```Markdown
$$
x_angle \ne x_{angle}=20^{\circ}
$$$$
x^2_1,x^2_2,x^2_3, \cdots, x^2_{n-1},x^2_n
$$
```
預覽區顯示的結果：
$$
x_angle \ne x_{angle}=20^{\circ}
$$$$
x^2_1,x^2_2,x^2_3, \cdots,x^2_{n-1},x^2_n
$$
此外，使用`\sqrt{}`語法以顯示根號內容，例如：
```Markdown
$$
\sqrt{2} \approx 1.414
$$
```
$$
\sqrt{2} \approx 1.414
$$
##### 其五：矩陣與向量
在MathJax中，有專門對矩陣與向量設計的語法，其結構相對複雜，請參見以下範例：
```Markdown
矩陣：
$ \quad \begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix} $
向量:
$ \vec{r} = \left< Q,R \right> $
```
顯示結果:
矩陣：
$$ \quad \begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix} $$
向量：
$ \vec{r} = \left< Q,X \right> $
##### 其六：大型算子
大型算子大多套用上下標的語法，再搭配其專屬的開頭字串組合而成，以下將一一簡單陳列。
1. **求和級數** 語法: `sum_{}^{}`
```Markdown
$$ \sum_{i=1}^n \frac{1}{i^2} $$
```
$$\sum_{i=1}^n \frac{1}{i^2} $$
2. **極限算子** 語法: `lim_{}`
在此介紹兩個常見於極限算子中的符號：
| MathJax語法 | 對應輸出 |
|:----:|:----:|
| \to | $\to$ |
| \infty | $\infty$ |
```Markdown
$$ \lim_{n \to +\infty} \frac{1}{n(n+1)} $$
```
$$ \lim_{n \to +\infty} \frac{1}{n(n+1)} $$
3. **微分算子**
微分語法類似分數，偏微分語法為分數與`\partial`的結合
```Markdown
$$
\left. \frac{dy}{dx} \right| _{x=0} = f^\prime(0)
$$$$
\frac{\partial x}{\partial y}
$$
```
$$
\left. \frac{dy}{dx} \right| _{x=0} = f^\prime(0)
$$$$
\frac{\partial x}{\partial y}
$$
4. **積分算子** 語法`int_{}^{}`或重積分`iint`、`iiint`等
```Markdown
:::danger
**定積分**
$$
\int_1^\infty {\log(p)} dp
$$
:::
```
:::danger
**定積分**
$$
\int_1^\infty {\log(p)} dp
$$
:::
### 五、Mermaid繪圖工具
Mermaid是Markdown筆記中常用來進行簡易繪製的插件工具，在這個套件中，我們使用```前後綴繪圖程式碼，並且使用`graph `標註繪製方向。
| Mermaid方向縮語 | 對應方向 |
|:----:|:----:|
| T | 上方 |
| B 或 D | 下方 |
| L | 左方 |
| R | 右方 |
#### 繪製樹狀圖
此處以由上至下為例，依照指定繪製方向、宣告所有元素、指定箭號指向之順序，繪製含有五個元素的樹狀圖。
```Markdown
```mermaid
graph TB
A[A矩形]
B((B圓形))
C(C圓角矩形)
D{D菱形}
E((E圓形))
A-->B
A-->C
B-->D
B-->E
```
```
預覽區樹狀圖結果顯示：
```mermaid
graph TB
A[A矩形]
B((B圓形))
C(C圓角矩形)
D{D菱形}
E((E圓形))
A-->B
A-->C
B-->D
B-->E
```
此外，Mermaid亦提供流程圖繪製，以及其它多樣細節設置功能，在此不多加贅述。
### 六、其他編輯器
除了VS Code編輯器外，市面上有許多免費且支援Markdown的編輯器，以下列舉常見的編輯器，上述部分插件功能的支援上有所不同，各有優劣差異，故以下一同納入比較，以供使用者視自身需求選擇：
| 編輯器種類 | Callout區塊 |Mermaid繪圖 | MathJax格式 | MathJax輸出 |
|:--------:|:--------:|:--------:|:--------:|:--------:|
| VS Code | 不支援 | 支援 | 支援 | 支援 |
| Obsidian | 支援 | 支援 | 不支援 | 不支援 |
| HackMD | 支援 | 支援 | 部分支援 | 部分支援 |
Sign in with Wallet
Connect another wallet