# Markdown Toturial
在接下來的課程裡，你會見到一些==看起來不太一樣的文字==，這些就是 Markdown 語法，
我們特別將其醒目標示，以免和課程正文混淆。
## 斜體及粗體（Italics and Bold）
我們將學習兩種基本的文字格式元素：斜體 及粗體。
在 Markdown 中，要將文字變成 斜體，需以底線 ==_== 或者星號 ==*== 包圍文字。
比如 ==\_要變成斜體的文字_== 就會呈現為 _要變成斜體的文字_。
> 將「easy」單字變成斜體
Writing in Markdown is easy!
---
在 Markdown 中要將文字變成粗體，要以左右各兩個底線( ==\_\_== )或者星號( ==\*\*== )包住文字。
這樣就能使重點 ==\*\*十分顯眼**==
> 將「will」這個單字變粗體
I will complete these lessons!
---
當然囉，你也可以在同一行裡 ==\_一起使用粗體及斜體_==。 它們作用的範圍可以 ==\*\*含有多個字**==。
> 將「你說得對」變成斜體，「忘了」變成粗體。
你說得對，但是原神，後面忘了。
---
一般來說，星號及底線的順序並不影響結果。
將星號放置在外側，像是這樣 ==\*\*\_文字_**==，閱讀時會更易懂<del>吧</del>。
> 將「This is unbelievable」變成粗斜體。
怎麼會有人可以連續歪8次阿，This is unbelievable
## 標題（Headers）
接著來看看另一種格式規範：標題。標題經常使用於網站、雜誌文章、重要通知，
它的作用是引起讀者對某章節的注意。正如其名，大標題及副標題都屬於這類型。
共有六種類型的標題，大小逐一遞減：
<h1>我是一號標題</h1>
<h2>我是二號標題</h2>
<h3>我是三號標題</h3>
<h4>我是四號標題</h4>
<h5>我是五號標題</h5>
<h6>我是六號標題</h6>
以 Markdown 書寫標題時，在句子前加上井字號 ( ==#== )。
標題的大小係由井字號的數量決定，比如一號標題就使用一個井字號 ( ==# Header One== )；
三號標題使用三個井字號 ( ==### Header Three== )。
> 將各個標題設為正確大小
Header one
Header two
Header three
Header four
Header five
Header six
---
你可以自由決定使用適當的標題，一般而言，一號標題及六號標題應謹慎少用。
標題無法再加粗，然而可以使用斜體字。
> 將第一行設為四號標題，並改為斜體：
有人在一個遊戲裡一直歪背後的原因是？
因為他在其他遊戲是歐皇
## 超連結（Links）
Markdown 裡有兩種連結，它們最終呈現的效果都相同。
### 第一種 行內連結
建立行內連結的方式如下：將要顯示的文字輸入在方括號 ( ==\[ ]== )內，
並將連結網址包在括號 ( ==( )== )內。
比方說，你想要建立一個前往`www.github.com`的超連結，
並讓其顯示的文字為「前往 GitHub!」在 Markdown 中會寫為：
==\[前往 GitHub!](www.github.com)==。
> 在下方的文字框，建立一個顯示為「Search for it.」並前往`www.google.com`的連結。
Search for it.()
---
你也可以讓連結文字以斜體、粗體顯示。
> 將「同性交友網站」改為粗體，並把整句連結至 `www.github.com`。
> 記得將粗體的標記包在連結文字中。
Github由於其高達95%的男性用戶佔比，也被戲稱為全球最大同性交友網站GayHub
---
雖然看起來有點怪，但其實你也可以在標題中放入連結。
> 將文字設為四號標題，並把「梗圖」連結至 `https://http.cat/`
來一點貓咪梗圖
---
### 另一種 _參照連結_
如同字面意思，這種連結實際上會參照文件中其他地方的內容。
看不懂沒關係，考慮下方這個例子：
```markdown
Here's [a link to something else][another place].
Here's [yet another link][another-link].
And now back to [the first link][another place].
[another place]: www.github.com
[another-link]: www.google.com
```
例子中的「參照」是每行的第二組方括號：==[another place]== 及 ==[another-link]==。
在 Markdown 文件的底部，這些方括號才被賦予確切網址的正式定義。
這種參照連結的方式有個好處，就是多個指向相同地方的連結，可以使用標籤代稱，之後僅需統一對其賦予定義。
比方說，我們決定將所有 ==[another place]== 連結指向其他網站，不必一一修改，僅需改變參照本身的定義就好。
參照本身的定義內容，不會被彩現。它的格式為包著標籤的方括號，接著冒號，接著網址。
> 在下方文字有一些寫到一半的參照連結，你的任務是將它們完成！
> 將第一個參照標籤寫為「a fun place」，並讓它連結到 `https://http.cat/status/414`
> 將第二個連結指向 `https://xkcd.tw/`。
Do you want to [see something fun][]?
Well, do I have [the website for you][another fun place]!
## 圖片（Images）
如果你知道如何在 Markdown 中建立連結，那你也會插入圖片，因為兩者的語法十分相似。
同連結一樣，插入圖片也有兩種類型的寫法，且最終呈現的成果亦相同。圖片及連結在語法上的差別，在於插入圖片時，須以驚嘆號 ( ==!== ) 開頭。
第一種方式稱為 行內圖片連結，要建立行內的圖片連結，首先要打驚嘆號 ( ==!== )，將替代文字（為視障者描述圖片的一段文字）輸入在方括號 ( ==[ ]== ) 裡，最後再將圖片的連結包在一對括號 ( ==( )== ) 中。
舉例而言，要插入一張位於 `https://http.cat/400` 的圖片，
其替代文字為 400 Bad Request，在 Markdown 中的寫法為：
==\!\[400 Bad Request](https://http.cat/400)==
> 請在下方的文字框內，將這段連結改以圖片呈現，
> 並在方括號填入一段替代文字「I'm a teapot」。
>
[](https://http.cat/418)
---
儘管替代文字並非 _必填_，但有了它會讓文件更容易被閱讀，包含視障者、使用螢幕閱讀器的讀者、或網路連線狀況不佳的人們。
接著我們要介紹的插入圖片的方式，就如同參照連結一般。
你會以驚嘆號開頭，並以一對方括號包住替代文字，接著兩對表示圖片標籤的方括號，
寫法如下： ==\!\[The founding father][Father]==
在 Markdown 文件的底部，才定義了每個標籤指向的位址，像是：
==[Father]: http://octodex.github.com/images/founding-father.jpg==
> 在下方有些寫到一半的圖片連結，你的任務是以參照連結的方式將它們完成，就像上面做的那樣。
> 將首個參照標籤設為「525 SSL Handshake」並讓它連結到 `https://http.cat/images/525.jpg`
> 讓第二幅圖片連結到 `https://http.cat/images/500.jpg`
[HTTP Code 525][]
[HTTP Code 500][500 Internal Server Error]
[525 SSL Handshake]
## 引用區塊（Blockquotes）
有時你需要將讀者的目光聚焦至一段引文，或是自雜誌文章上擷取某一段話，此時 Markdown 提供的 _引用區塊_ 功能就十分方便。引用區塊的作用，是特別凸顯一段句子或段落，以吸引讀者的注意。例如：
> 愛情
愛情就是死循環，一旦執行就陷進去了；
愛上一個人，就是記憶體洩漏–你永遠釋放不了；
真正愛上一個人的時候，那就是常量限定，永遠不會改變；
女朋友就是私有變量，只有我這個類別才能呼叫；
情人是指針，用的時候一定要注意，不然就會帶來巨大的災難。
插入引用區塊的方式，是在行首加入一個「大於」符號 (>)。例如：
```markdown
> "零成本抽象"是C++的一種設計原則，其主要含義有兩個方面：
不需要為沒有使用到的語言特性付出代價。
使用某種語言特性，不會帶來運行時的代價。
```
> 將下方的文字改為引用區塊
ChatGPT，全稱為聊天生成預訓練轉換器（英語：Chat Generative Pre-trained Transformer），是由OpenAI開發的人工智慧聊天機器人程式。
---
你也可以在引文的行首插入一個大於符號 (>)，這在引文有多個篇幅時特別有用。例如：
```markdown
> and I'm happy to say that it's
the exception rather than the rule and
I'm also happy to very publicly point out
that NVIDIA has been one of the worst
trouble spot we've had with hardware manufacturers
and that is really sad because that NVIDIA tries
to sell chips a lot of chips into the Android Market
and NVIDIA has been the single worst company we've ever dealt with
>
> so NVIDIA
FUCK U
>
> by Linus Torvalds
> [ Ref: https://www.youtube.com/watch?v=iYWzMvlj2RQ ]
```
注意到空行的行首也需要有大於符號 (>)，這樣才能使整段引用文字被正確辨識為同一區塊。
> 將下方的文字每行行首插入一個大於符號 (>)，將內容變成引用區塊。
markdown-rs is an open source markdown parser written in Rust.
It’s implemented as a state machine (`#![no_std]` + `alloc`) that emits concrete tokens,
so that every byte is accounted for, with positional info.
The API then exposes this information as an AST, which is easier to work with, or it compiles directly to HTML.
While most markdown parsers work towards compliancy with CommonMark (or GFM), this project goes further by following how the reference parsers (cmark, cmark-gfm) work, which is confirmed with thousands of extra tests.
Other than CommonMark and GFM, this project also supports common extensions to markdown such as MDX, math, and frontmatter.
---
引用區塊當中可以包含其他 Markdown 元素，例如斜體字、圖片、連結。
> 將下方的文字框，將整段文字變成引用區塊，再將文中的「Mozilla」其中一個加上mozlla官網的網址`https://www.mozilla.org/zh-TW/`。
Rust是由Mozilla主導開發的通用、編譯型程式語言。設計準則為「安全、並行、實用」，支援函數式、並行式、程序式以及物件導向的程式設計風格。
Rust語言原本是Mozilla員工Graydon Hoare的個人專案，而Mozilla於2009年開始贊助這個專案，並且在2010年首次公開。也在同一年，其編譯器原始碼開始由原本的OCaml語言轉移到用Rust語言，進行自我編譯工作，稱做「rustc」，並於2011年實際完成。這個可自我編譯的編譯器在架構上採用了LLVM做為它的後端。
第一個有版本號的Rust編譯器於2012年1月釋出。Rust 1.0是第一個穩定版本，於2015年5月15日釋出。
Rust在完全公開的情況下開發，並且相當歡迎社群的回饋。在1.0穩定版之前，語言設計也因為透過撰寫Servo網頁瀏覽器排版引擎和rustc編譯器本身，而有進一步的改善。它雖然由Mozilla資助，但其實是一個共有專案，有很大部分的程式碼是來自於社群的貢獻者。
## 清單（Lists）
在已知的世界裡，有兩種類型的清單：無序清單及有序清單。用白話的方式解釋，前者就是以項目符號標記的，而後者是以數字標記的清單。
要建立無序清單，你需要以星號 ( ==*== ) 或加號 ( ==+== ) 或減號 ( ==-== )做為每個項目的開頭，而且每個項目必須佔一行。比方說，要以 Markdown 書寫採買的清單，看起來會是：
```
* 牛奶
* 雞蛋
* 鮭魚
* 奶油
```
這份 Markdown 清單會以符號標記項目的方式呈現：
* 牛奶
* 雞蛋
* 鮭魚
* 奶油
> 將下方那些以逗號分隔的文字，改以清單呈現。
牛奶，土地，麵包
---
以上就是撰寫無序清單的方法，那麼接下來介紹有序清單。
有序清單的項目是以數字開頭，而非星號。我們來看看這份食譜：
1. 打三顆蛋
1. 倒一加侖的牛奶到碗裡
4. 用力地將奶油抹在鮭魚上
5. 將鮭魚放進這碗蛋液及牛奶的混和液體裡
用 Markdown 怎麼寫呢？你要這樣做：
```
1. 打三顆蛋
2. 倒一加侖的牛奶到碗裡
3. 用力地將奶油抹在鮭魚上
4. 將鮭魚放進這碗蛋液及牛奶的混和液體裡
```
很簡單對不對？十分直覺。
> 將下列的操作過程改成有序清單
打開電腦，找到原神，原神啟動
---
讚啦！
清單的項目中也可以有粗體、斜體字，甚至是連結。
>將下方文字中的學名變成斜體。
- 智人(Homo sapiens)
- 匠人(Homo ergaster)
- 澎湖原人 (Homo tsaichangensis)
---
非常好！
有時你發現需要撰寫多層次的清單，也稱作 _巢狀清單_，這種清單允許一個項目底下還有子項目。別怕，他們的 Markdown 語法都是相同的，你只需要在星號前比上層項目多加 一個空格 來縮排。
例如，為了更鉅細靡遺地描述各個人物，我們在底下的清單中使用了這樣的技巧，讓主要的項目底下還包含子清單。
```
- Mike
- 搞前端的
- 三件套寫過幾千行
- 和Vue不合
- I use Arch, btw.
- Brian
- Github 目前有8顆星
- 搞後端的
- I use Arch, btw.
```
- Mike
- 搞前端的
- 三件套寫過幾千行
- 和Vue不合
- I use Arch, btw.
- Brian
- Github 目前有8顆星
- 搞後端的
- I use Arch, btw.
> 將每位角色的特質以多層次清單表示。
- Dustin，抽卡一直歪，深淵打不滿
- Dkjtio，音遊很厲害，大歐皇，想要ネコぱら當生日禮物
---
雖然你的確可以無限延伸階層，但最多保持在三層比較好，否則看起來會一團亂。
我們還要介紹一個清單的縮排技巧，在撰寫段落的時候很好用。
假如撰寫一份清單時，想要對其內容插入一些額外的補充資訊（但不是另一階層的清單），看起來像這樣：
1. 打三顆蛋
打蛋時別弄到周圍了。
如果你 _真的_ 搞砸了，拿條抹布擦乾淨。
2. 倒一加侖的牛奶到碗裡
基本上，遵循上述的要點就對了：別灑出來，但如果發生了，就清理乾淨吧。
3. 用力地將奶油抹在鮭魚上
「用力地」是指嚴格的上下移動。 Julia Child 曾說過：
> Up and down and all around, that's how butter on salmon goes.
4. 將鮭魚放進這碗蛋液及牛奶的溶液裡
* 確保周圍無障礙物及孩童
* 兩手並用
* 隨時準備一條抹布在旁，將灑出來的液體擦乾淨
要撰寫這樣的文本，段落的內容需在項目底下，且該行的行首至少要空一格。
上例的清單，在 Markdown 的寫法如下：
```
1. 打三顆蛋
打蛋時別弄到周圍了。
如果你 _真的_ 搞砸了，拿條抹布擦乾淨。
2. 倒一加侖的牛奶到碗裡
基本上，遵循上述的要點就對了：別灑出來，但如果發生了，就清理乾淨吧。
3. 用力地將奶油抹在鮭魚上
「用力地」是指嚴格的上下移動。 Julia Child 曾說過：
> Up and down and all around, that's how butter on salmon goes.
4. 將鮭魚放進這碗蛋液及牛奶的溶液裡
* 確保周圍無障礙物及孩童
* 兩手並用
* 隨時準備一條抹布在旁，將灑出來的液體擦乾淨
```
注意到前兩個項目，它們底下的段落都各以一個空格開頭。
如果你覺得這樣看起來很怪，也可以再鍵入幾個空白字元，將其適當對齊；同後兩個項目一樣。
在這些段落中，你可以插入各種 Markdown 元素，比如引用區塊，甚至是另一份清單！
> 將各子項目改以段落呈現(自由發揮)。
你這種情況就是原神玩多了，這樣吧
- 你先退回到桌面，然後長按原神圖標，會出現“卸載”兩個字，你點一下將其卸載
- 電腦版則是打開控制面板，找到程式和功能，點進去，在裡面找到原神將其卸載
操作完之後，過幾天看看有沒有效果
## 段落（Paragraphs）
Markdown 有數種標記段落的方法。
作為範例，我們來看看幾行詩。假設你希望寫一段這樣的文字：
Do I contradict myself?
Very well then I contradict myself,
(I am large, I contain multitudes.)
你可能會想，這沒什麼難的，照每行的順序輸入就好：
```
Do I contradict myself?
Very well then I contradict myself,
(I am large, I contain multitudes.)
```
遺憾的是，事情並非如此。對 Markdown 語法而言，會將其呈現為同一行：Do I contradict myself? Very well then I contradict myself, (I am large, I contain multitudes.).
如果你硬是在他們之間插入空行，結果反而會將其分段，會變成：
```
Do I contradict myself?
Very well then I contradict myself,
(I am large, I contain multitudes.)
```
這樣的結果其實就是 _硬換行_（Hard break），然而對我們的詩而言，想要的是 _軟換行_（Soft break）。
軟換行的標記方式，是在每行**行末**多輸入兩個空格字元。
```
Do I contradict myself?··
Very well then I contradict myself,··
(I am large, I contain multitudes.)
```
此處的點 ( ==·== ) 是用來表示空格。
## 進階篇
## 程式碼
要將單字或片語表示為程式碼，請將其包裹在反引號(==\`==) 中。
例 `I use Arch, btw`
## 程式碼區塊(Code block)
Markdown 的基本語法允許你透過縮排四個空格或一個製表符來建立程式碼區塊。
如果你覺得不方便，可以試試圍籬程式碼區塊（fenced code blocks）。
根據Markdown 解析器或編輯器的不同，程式碼區塊的前後可以使用三個反引號（==\`\`\`==）來標記圍欄程式碼區塊。
這有什麼優勢嗎？ 你不必費力縮排任何行了！
## 表格(Tables)
如需新增表格，請使用三個或更多個連字符（==---==）來為每個列建立表頭，並使用管道符（ ==|== ）來分隔每個列。
為相容考慮，你還應該在行的兩側添加管道符。
```
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
```
效果如下
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
透過在標題行中的連字符（hyphens）的左側或右側或兩側添加冒號（:），
可以將對應列中的文字向左或向右或居中對齊。
```
| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
```
| Syntax | Description | Test Text |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
而如果剛好你會HTML
```html=
<table>
<caption>Sample Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Content</td>
</tr>
</tfoot>
</table>
```
<table>
<caption>Sample Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Footer Content</td>
</tr>
</tfoot>
</table>
利用HTML可以實現更複雜的表格
Sign in with Wallet
Connect another wallet