從純文字到精美文件|10分鐘帶你看完Markdown全語法 - IHCT Blog - 遨遊星辰Among The Stars

前言

甚麼是MarkDown?

Markdown是一種輕量級標記語言，目標很簡單，就是實現「易讀易寫」。並在不需要特殊複雜排版的情況下就能輕鬆地將內容轉換為HTML或其他格式。

為甚麼你該學Markdown?

Markdown文本在原始形式下很容易閱讀，就像一般的記事本一樣，頂多就是多了一些明顯的符號(例如星號**用於標記強調文字)。

最重要的是許多平台都已經可以使用Markdown語法來撰寫留言、文件了，例如Github、Stack Overflow、甚至是Discord、Youtube、Line等等通訊、娛樂軟體都或多或少的支援Markdown。

簡單的說，Markdown已經是我們在大數位時代中的一個不可或缺的知識。

基礎寫法

標題

最多從h1~h6。

Code

# h1
## h2
### h3
#### h4

h1
===
h2
---

Showcase

分隔線

Code

* * *
***
*****
- - -
---------------------------------------

Showcase

---

---

---

---

---

換行

Code

直接按enter是不管用的！  
換行是
兩個空格 + enter

Showcase

直接按enter是不管用的！
換行是 兩個空格 + enter

列表

無序列表

Code

- 項目1
    + 子項目1
    - 子項目2
+ 項目2
* 項目3

Showcase

• 項目1
  • 子項目1
  • 子項目2

• 項目2

• 項目3

有序列表

Code

3. 列表的數字只會照著第一個數下去
    1. 第一個子項目
    3. 第二個子項目
2. 第二個項目
1. 第三個項目

Showcase

3. 列表的數字只會照著第一個數下去
   1. 第一個子項目
   2. 第二個子項目
4. 第二個項目
5. 第三個項目

勾選

Code

- [ ] 去買蛋餅
- [x] 刷一題code

Showcase

• 去買蛋餅
• 刷一題code

引用/註解

Code

> 你好，我是註解
>> 你好，我是註解中的註解

Showcase

你好，我是註解

你好，我是註解中的註解

斜體(Italic type)與強調(Bold)

Code

*一個星號*  
_一個底線_  
**兩個星號**  
__兩個底線__  
***三個星號***  
___三個底線___  

Showcase

一個星號
一個底線
兩個星號
兩個底線
三個星號
三個底線

超連結

[顯示文字](連結)

Code

[點我會到google喔(ﾉ>ω<)ﾉ](http://google.com)  
[點我會到google喔(ﾉ>ω<)ﾉ](http://google.com "欸呦這可以到Google欸")  
滑鼠放在上面會看到註解

Showcase

點我會到google喔(ﾉ>ω<)ﾉ
點我會到google喔(ﾉ>ω<)ﾉ
滑鼠放在上面會看到註解

那如果常常要用同一個超連結怎麼辦？我們可以使用超連結標籤。
在任意地方定義 [id]:連結 “備註” 這段代碼。
(就像變數的概念，有點像 id = http://google.com ，並重複使用id變數的感覺。)

Code

[123]: http://google.com  "這是GOOGLE網址" 
[123]

[Y]: http://youtube.com  
[Y]

Showcase

123

Y

程式碼

文字中程式碼

Code

用個單個`code`引號就好

Showcase

用個單個code引號就好

如果不希望引號內變成程式碼呢？或是程式碼內有單引號呢？
可以用兩個單引號包起來，或是在單引號前加上\，當然，用html寫也可以。

Code

``一堆`單`引`號`。``  

<p>一堆`單`引`號`。<p>

一堆\`單\`引\`號\`。

Showcase

一堆`單`引`號`。

一堆`單`引`號`。

一堆`單`引`號`。

圖片


或是

[](超連結)

Code

![烏龜](https://cdn3.emoji.gg/emojis/8947-turtle4k.png)
[![能點的烏龜](https://cdn3.emoji.gg/emojis/8947-turtle4k.png)](https://emoji.gg/emoji/8947-turtle4k)

Showcase

有沒有覺得烏龜太大隻？
如果想調整圖片大小，就只能用html或css來處理：

Code

<img src="https://cdn3.emoji.gg/emojis/8947-turtle4k.png" with="200px" alt="第三隻烏龜">  

![第四隻烏龜](https://cdn3.emoji.gg/emojis/8947-turtle4k.png)  

<style>img[alt=第四隻烏龜] { width: 40%; }</style> 

Showcase

表格

Code

| 你好嗎 | 我很好阿 | 真的還假的 | 
| ----- | ----- | ----- | 
| ABC | DEF | GHI | 
| JKL | MNO | PQR |

| 左對齊 | 右對齊 | 居中對齊 | 
| :-----| ----: | :----: | 
| ABC | DEF | GHI | 
| JKL | MNO | PQR |

Showcase

你好嗎	我很好阿	真的還假的
ABC	DEF	GHI
JKL	MNO	PQR

左對齊	右對齊	居中對齊
ABC	DEF	GHI
JKL	MNO	PQR

進階寫法

🚧🚧🚧🚧🚧
仍在努力製作中><