# Markdown CheatSheet
此文為本人在練習MD語法而做，想說既然都做了，那就分享給大家。有哪邊做的不好或是建議還請多指教！！！
<!--數學算式語法-->
<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>
<!-- -->
::: success
以下內容會以 Markdown 語法的各種功能為主題，只秀出其表示語法以及結果，基本上不會有解釋。
::: info
Example\:
```markdown=
## example of representation
<font color="red">Hakuna Matata</font>
:)
```
> ## example of representation
> <font color="red">Hakuna Matata</font>
> :)
>
> [color=orange]
:::
**沒寫的內容**：
- 大多數\<HTML\>語法(因為不是這文的重點，寫了反而會變成HTML的教學)
- Code(單純我懶，而且還沒想到該怎麼呈現 :P)
- 畫圖。
<br>
## **Markdown 的各種功能**
### 換行
- 注意換行要在結束句輸入「兩」個空格，才換行。不然就要按兩次enter鍵。
- 打一個空格就真的只是單純的空格而已，「兩」個空格才會有新的意義，比如換行或內縮（在列點時用）。
:::warning
⚠ **注意**
如果你使用的 Markdown 編輯器是 HackMD，可以忽略這用法，因為就算不做這個然後直接按 Enter ，HackMD 其實是認帳的，但建議還是照這個規則走，這樣換別的編輯平台時，可以直接打包帶走，不然到時會很麻煩。
有趣的是，在 HackMD 中每個文件的「筆記設定」裡，有個選項叫「Enter 換行顯示為硬換行」，把這個選項開起來後， HackMD就會照著本段介紹的格式去 run 囉，~~但還是很龜毛就是了~~。
:::
```=
(兩個空格後按Enter)
```
> @ 這要怎麼秀結果❓❓ 反正你知道就好。
>
> [color=orange]
<br>
---
### 標題
```markdown=
# 一級標題(最大)
## 二級標題
### 三級標題
#### 四級標題
##### 五級標題
###### 六級標題(最小)
```
> # 一級標題(最大)
> ## 二級標題
> ### 三級標題
> #### 四級標題
> ##### 五級標題
> ###### 六級標題(最小)
> [color=orange]
<br>
---
### 內文效果
```markdown=
一般內文 Text
<font size=4>文字大小 -> 4</font>
<font color=red>紅色文字</font>
<font color=#0000ff>藍色文字</font>
↑ ↑ ↑
<!-- ; R G B ; 16進位(0~f)-->
**粗體效果** 和 *斜體效果* 可 ***疊加使用***
++底線文字++
~~刪除文字~~
==聚光文字==
<small> 小型文字 </small>
^上底^文字 <sup>上底</sup>文字
~下底~文字 <sub>下底</sub>文字
```
> 一般內文 Text
> <font size=4>文字大小 -> 4</font>
> <font color=red>紅色文字</font>
> <font color=#0000ff>藍色文字</font>
> **粗體效果** 和 *斜體效果* 可 ***疊加使用***
> ++底線文字++
> ~~刪除文字~~
> ==聚光文字==
> <small>小型文字 (我也不知道為啥前面會出現"----")</small>
> ^上底^文字 <sup>上底</sup>文字
> ~下底~文字 <sub>下底</sub>文字
> [color=orange]
:::info
🔍 **更多有關文字大小與顏色的補充**[^first]
:::
<br>
---
### 跳脫字元
```=
\*literal asterisks\*
\- DASH ------ \--\--\-- \-\-\-\-\-\-
\\\\
```
> \*literal asterisks\*
> \- DASH ------ \--\--\-- \-\-\-\-\-\-
> \\\\
> [color=orange]
::: success
Markdown支援在下面這些符號前面加上反斜線來幫助插入普通的符號：
> ```
> \ 反斜線
> ` 反引號
> * 星號
> _ 底線
> {} 大括號
> [] 方括號
> () 括號
> # 井字號
> + 加號
> - 減號
> . 英文句點
> ! 驚嘆號
> ```
:::
<br>
---
### 無序清單
```markdown=
* 無序清單1
* 無序清單2
* 無序子清單
* 無序子子清單
```
> * 無序清單1
> * 無序清單2
> * 無序子清單
> * 無序子子清單
>
> [color=orange]
<br>
---
### 有序清單
```markdown=
1. 有序清單1
2. 有序清單2
1. 有序子清單
3. 有序清單3
```
> 1. 有序清單1
> 2. 有序清單2
> 1. 有序子清單
> 3. 有序清單3
> [color=orange]
<br>
---
### 引文
```=
> 第一層引文
>> 第二層引文
>>> 第三層引文
>>>> 第四層引文
> 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別
> [name=HaoKai Peng] [time=Mon, Mar 11, 2024 11:52 PM] [color=#907bf7]
>> 也支援巢狀引用區塊喔！
>> [name=HaoKai Peng] [time=Mon, Mar 11, 2024 11:52 PM] [color=red]
```
> > 第一層引文
> >> 第二層引文
> >>> 第三層引文
> >>>> 第四層引文
>
> > 您可以使用以下語法，表明自己的 **姓名、時間與顏色** 並與其他的引用區塊做區別
> > [name=HaoKai Peng] [time=Mon, Mar 11, 2024 11:52 PM] [color=#907bf7]
> >> 也支援巢狀引用區塊喔！
> >> [name=HaoKai Peng] [time=Mon, Mar 11, 2024 11:52 PM] [color=red]
>
> [color=orange]
<br>
---
### 註解
```markdown=
<!-- 註解文字 -->
<!-- 註解文字
註解文字 -->
```
<!-- 註解文字 -->
<!-- 註解文字
註解文字 -->
::: warning
:warning: 因為是註解，本來在檢視模式時就不會看到任何東西
:::
<br>
---
### Callout有色區塊
```markdown=
::: success
Success 內文
:::
::: warning
Warning內文
:::
::: info
Info 內文
:::
::: danger
Danger 內文
:::
```
> ::: success
> Success 內文
> :::
>
> ::: warning
> Warning內文
> :::
>
> ::: info
> Info 內文
> :::
>
> ::: danger
> Danger 內文
> :::
>
> [color=orange]
::: warning
:warning: 注意： 正規的 markdown 編輯器並不支援 Callout 功能，使用時應當注意，避免出錯
:::
<br>
---
### Toggle
```markdown=
::: spoiler 目錄
Toggle Spoiler 收起項目1
Toggle Spoiler 收起項目2
:::
## 或著也可以使用HTML來寫
<details>
<summary>目錄</summary>
Toggle Spoiler 收起項目1
Toggle Spoiler 收起項目2
</details>
```
> <details>
> <summary>目錄</summary>
>
> Toggle Spoiler 收起項目1
> Toggle Spoiler 收起項目2
>
> </details>
>
> [color=orange]
::: warning
:warning: 注意： 因 VSCode 或某些 markdown 編輯器並不支援 Callout 功能，使用時應當注意，並改以HTML格式來寫
:::
<br>
---
### 勾選選項
```markdown=
哪件事最痛苦？
- [X] 架環境
- [ ] 腦內沒想法
- [ ] 過年時的親戚
```
> 哪件事最痛苦？
> - [X] 架環境
> - [ ] 腦內沒想法
> - [ ] 過年時的親戚
>
> [color=orange]
<br>
---
### 相片or超連結
#### 相片
```markdown=
![shark](https://hackmd.io/_uploads/SkHZJOh6a.jpg "shhhhark" =200x200)
## 或著你也可以用HTML格式表達，應該可以做得更客製化
<img src=https://hackmd.io/_uploads/SkHZJOh6a.jpg alt="shark" title="shhhhark" height="200px" width="200px">
```
> <img src="https://hackmd.io/_uploads/SkHZJOh6a.jpg" alt="shark" title="shhhhark" height="200px" width="200px"> ![shark](https://hackmd.io/_uploads/SkHZJOh6a.jpg "shhhhark" =200x200)
>
> [color=orange]
#### 超連結
```markdown=
[超連結標題(喔對了，記得開聲音^^)](https://www.instagram.com/reel/C0Nr1NSs-jO/?utm_source=ig_web_copy_link "是meme啦不用擔心")
```
> [超連結標題(喔對了，記得開聲音^^)](https://www.instagram.com/reel/C0Nr1NSs-jO/?utm_source=ig_web_copy_link "是meme啦不用擔心")
>
> [color=orange]
<br>
---
### 分隔
```markdown=
以下為分隔線
---
分隔線結束
```
> <p>以下為分隔線</p>
>
> ---
> 分隔線結束
>
> [color=orange]
<br>
---
### 數學運算符
```=
在檢視矩陣 $A$ 時，是以 $A^{m}_{n}$ 表示，還是以 $a_{m, n}$ 表示，還是以 $a^{m, n}$ 表示？
```
> 在檢視矩陣 $A$ 時，是以 $a^{m}_{n}$ 表示，還是以 $a_{m, n}$ 表示，還是以 $a^{m, n}$ 表示？
>
> [color=orange]
::: success
##### 基本運算符
| MathJax語法 | 對應輸出 | | MathJax語法 | 對應輸出 |
|:----------:|:-------:|:-:|:--------:|:-------:|
| \times | $\times$ | | \div$ | $\div$ |
| = | $=$ | | \equiv | $\equiv$ |
| \ne | $\ne$ | | \approx | $\approx$ |
| \\sqrt[3]{2} | $\sqrt[3]{2}$ | | \frac{1}{x} | $\frac{1}{x}$ |
| \gt | $\gt$ | | \lt | $\lt$ |
| \ge | $\ge$ | | \le | $\le$ |
| \gg | $\gg$ | | \ll | $\ll$ |
| \pm | $\pm$ | | \mp | $\mp$ |
| \cdot | $\cdot$ | | \cdots | $\cdots$ |
##### 進階運算符
| MathJax語法 | 對應輸出 | | MathJax語法 | 對應輸出 |
|:----------:|:-------:|:-:|:--------:|:-------:|
|\sum_{n=0}^{\infty}| $\sum_{n=0}^{\infty}$ | | \lim_{x\to\infty} | $\lim_{x\to\infty}$ ||
| \int_1^\infty | $\int_1^\infty$ | | \iint | $\iint$|
| \vert x \vert | $\vert x \vert$ | | \Vert x \Vert | $\Vert x \Vert$ |
| \lfloor x \rfloor | $\lfloor x \rfloor$ | | \lceil x \rceil | $\lceil x \rceil$ |
##### 邏輯推演：
| MathJax語法 | 對應輸出 | | MathJax語法 | 對應輸出 |
|:----------:|:-------:|:-:|:--------:|:-------:|
| \forall | $\forall$ | | \exists | $\exists$ |
| \because | $\because$ | | therefore | $\therefore$ |
| \implies | $\implies$ | | iff | $\iff$ |
| \left( \right) | $\left(🤔\right)$ | | \left[ \right] | $\left[🤔\right]$ |
| <font color=red>**\left< \right>** | $\left<🤔 \right>$ | | <font color=red>**\\\{\\\}**</font> | $\{🤔\}$ |
##### 特殊字符、字母
| MathJax語法 | 對應輸出 | | MathJax語法 | 對應輸出 |
|:----------:|:-------:|:-:|:--------:|:-------:|
| \gamma | $\gamma$ | | \Gamma | $\Gamma$ |
| \delta | $\delta$ | | \Delta | $\Delta$ |
| \prime <font color="orange">or</font> ' | $\prime$ | | \backslash | $\backslash$ |
| \dot{x} | $\dot{x}$ | | \ddot{x} | $\ddot{x}$ |
| \bar{x} | $\bar{x}$ | | \overline{xyz} | $\overline{xyz}$ |
| \vec{x} | $\vec{x}$ | | \overrightarrow{xyz} | $\overrightarrow{xyz}$ |
|\hat {i} | $\hat {i}$ | | \widehat{xyz} | $\widehat{xyz}$
| \nabla | $\nabla$ | | \circ | $\circ$ |
##### 其他：
```=
$$
\lim_{x\to\infty} \frac{1}{x} = 0 $$$$
\left. \frac{dy}{dx} \right| _{x=0} = f^\prime(0) $$$$
\frac{\partial x}{\partial y}
$$
矩陣：
$$ \quad \begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix} $$
向量:
$$ \vec{r} = \left< Q,R \right> $$
```
> $$
> \lim_{x\to\infty} \frac{1}{x} = 0 $$$$
> \left. \frac{dy}{dx} \right| _{x=0} = f^\prime(0)
> $$$$
> \frac{\partial x}{\partial y}
> $$
>
> 矩陣：
> $$ \quad \begin{vmatrix} 1 & 2 \\ 3 & 4 \\ \end{vmatrix} $$
> 向量:
> $$ \vec{r} = \left< Q,R \right> $$
>
> [color=orange]
:::
:::info
🔍 [**L<sup>a</sup>T<sub>e</sub>X 與 MathML 的轉換計算機 <i class="fa fa-external-link"></i>**](https://demo.wiris.com/mathtype/en/developers.php#mathml-latex)
🔍 **更多有關L<sup>a</sup>T<sub>e</sub>X語法的補充**[^second]
:::
<br>
---
### 嵌入影片
原影片網址： **[https://www.youtube.com/watch?v=<font color="red">c46_iL2QqOE</font>](https://www.youtube.com/watch?v=c46_iL2QqOE)**
```=
{%youtube c46_iL2QqOE %}
```
{%youtube c46_iL2QqOE %} <!--ERROR-->
>
> [color=orange]
<br>
---
### Emoji
```=
:+1: , :100: , :eyes:
:fire: , :anger: , :ok_hand:
```
> :+1: , :100: , :eyes:
> :fire: , :anger: , :ok_hand:
>
> [color=orange]
::: info
🔍 **更多其他 Emoji 的代號**[^third]
:::
<br>
---
### 製作表格
```markdow=
| 欄名一(至左) | 欄名二(至中) | 欄名三(至右) |
|:------|:-----:|------:|
| 元素一 | 元素二 | 元素三 |
| 元素四 | 元素五 | 元素六 |
|:100: 測試單框格|
|---------------|
```
> | 欄名一(至左) | 欄名二(至中) | 欄名三(至右) |
> |:------|:-----:|------:|
> | 元素一 | 元素二 | 元素三 |
> | 元素四 | 元素五 | 元素六 |
>
>
> |:100: 測試單框格|
> |--------|
>
> [color=orange]
<br>
---
### 註腳
```=
註腳是一種用來提供補充資訊[^first]、解釋[^second]、引用[^third]或相關資料的方式。
[^first]: https://www.youtube.com/watch?v=mBw3qzf4s18
[^second]: https://pointerpointer.com/
[^third]: https://www.isjackwild.com/
[^forth]: https://www.instagram.com/p/C2FGj9jS2Os/
```
:::danger
🛑 因註腳的範例會與本頁面的參考網頁的列表衝突，故不會實現。
:::
<br>
## **Reference**
### 全域
1. [Markdown 常用語法示例 (含Mathjax) - HackMD](https://hackmd.io/@Victor-Zhou/Md%E7%A4%BA%E4%BE%8B)
2. [常用MARKDOWN語法與HACKMD的擴充 - HackMD](https://hackmd.io/@emisjerry/ByMQ0rWIB#/)
3. [HackMD 使用教學 - HackMD](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw)
4. [Markdown Extention - VSCode](https://code.visualstudio.com/api/extension-guides/markdown-extension)
<br>
### 註腳
[^first]: [---- HackMD 文字格式 - HackMD](https://hackmd.io/@NDR/HackMD_text_format?type=view)
[^second]: [---- MathJax basic tutorial and quick reference](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)
[---- LaTeX/Fonts & Font families](https://hackmd.io/@Markdown-It/BJxDGda9Q?type=view)
[---- Spacing in math mode - Overleaf](https://www.overleaf.com/learn/latex/Spacing_in_math_mode)
[---- LaTeX cheatsheet - QuickRef.ME](https://quickref.me/latex.html)
[---- What commands are there for horizontal spacing? - Stack Exchange](https://tex.stackexchange.com/questions/74353/what-commands-are-there-for-horizontal-spacing)
[^third]: [---- gistfile1.md - gitlist](https://gist.github.com/rxaviers/7360908)
Sign in with Wallet
Connect another wallet