---
author: Willis Chen
image: https://hackmd.io/_uploads/B1-u_uJZs.png
GA: G-CH7FZ71WRC
---
# Day 05 : HackMD 與 MarkDown

[](https://hackmd.io/U4CzpF4FT1i9CoWSVFkCKg)

[](https://www.youtube.com/watch?v=R72kNVUZdpg)

今日簡報[Day 05 : HackMD 與 MarkDown-簡報](https://hackmd.io/@wiimax/intro-hackmd-05)

## MarkDown前世今生
||
|:-:|:-:
- John Gruber 在 2004 年創造了 Markdown ，用以簡潔文字方案有效的轉為 HTML/XHTML

### MarkDown 為了簡化 HTML 而生
|MarkDown|HTML
|:-:|:-:
|# h1 | `<h1></h1>`
|- list | `<ul><li>Coffee</li></ul>`
|`` | `<img src="圖片網址">`
|`[](連結網址)` | `<a href="連結網址"></a>`

- [Markdown 語法說明](https://markdown.tw/)
- [Markdown -wiki](https://zh.wikipedia.org/wiki/Markdown)

### MarkDown語法無所不在
- HackMD也是以此語法為編輯基底，常用到的地方包含：
- 編寫GitHub的`Readme.md`檔
- 編寫Jupyter Notebook的文字描述
- 技術部落格[Medium](https://medium.com/)
- 筆記軟體Evernote等
- Line的訊息也可以
- iTHome鐵人賽!!!

### Markdown常用指令

# 標題H1 `#`
## 標題H2 `##`
### 標題H3 `###`
#### 標題H4 `####`

### 引用 `>`
> 在非洲，每過一分鐘，就有六十秒過去。[name=willismax]

### 清單 `-`、`1`
- 無序清單：`*`、`+`、`-`
- 有序清單：`1.`～`5.`
- 不用在意數字的正確性，但最好從`1.`開始

### CheckBox

- [ ] 要做的事

`- [ ] 要做的事`

#### 縮排用4個空白或是1個`TAB`
- 第一排
- 4個空白或1個tab縮排。
第二行推齊可對齊。

#### 小數點
- `.`跟清單`1.`避免誤用，可以使用反斜線`\.`。
- 如: `3.14`改為`3\.14

### 程式碼 - 單行
- 用一個鍵盤左方(Esc下方)的頓點符號包住

`print(Hello World)`

### 程式碼 - 多行
- 多行程式用三個鍵盤左方(Esc下方)的頓點符號包住
- 可以選不同程式語言的高亮排版

print("hi")

print("hi")


### HTML
`< >`可以產生HTML的效果

<div class="footer"> &copy; 2022 </div>  

<div class="footer"> &copy; 2022 </div>

### 換行分隔線：
一行3個以上的下列符號皆可分隔
- `***`、`* * *`
- `---`、``---``
- `___`、`_ _ _`

### 超連結
- 使用`[連結名稱](網址)`，如`[markdown.tw](https://markdown.tw/)`，顯示結果為[我是超連結](https://markdown.tw/)

### 有alt說明的超連結
- 要游標移至超連結的說明，如`[markdown.tw](https://markdown.tw/ ' MarkDown中文教學')`
- 顯示結果為[滑我身上看看](https://markdown.tw/ ' MarkDown中文教學')

### 參考的連結
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

[google]: http://google.com/ "Google"
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

### 強調：以`*`或`_`包圍的文字


- 單個變斜體，如*斜體*、_斜體_
- 兩個變粗體，如**強調**、__強調__

## 圖片
- 以下在HackMD可以正常顯示
- 主要語法: ``
- 一般使用``即可使用
- 在HackMD「貼上圖片」，HackMD會上傳至雲端圖床(免費版為imgure，付費版為AWS S3)，HackMD會自動生成圖片連結並顯示

``

- 調整圖片尺寸，可以在連結後後方加上像素，以下示範限制圖片大小為450像素
``

### 表格
- 預設靠左
|編號|標題|說明|
|-|-|-
|1
- 表格-置中
|編號|標題|說明|
|:-:|:-:|:-:|
|100|100|100

    |編號|標題|說明|
    |:-:|:-:|:-:|
    |100|100|100

- 表格-靠右
|編號|標題|說明|
|-:|-:|-:|
|100|100|100

    |編號|標題|說明|
    |-:|-:|-:|
    |100|100|100

### MathJax
- 使用 **MathJax** 語法 來產生 *LaTeX* 數學表達式
- 符號表參見[此筆記](https://hackmd.io/@CynthiaChuang/Basic-LaTeX-Commands)[target=_blank]
$\sum_{i=1}^{n}(w_ix_i+b)$

## 更多參考教學
- [HackMD官方功能介紹](https://hackmd.io/features-tw?both)
- [官方進階功能](/c/tutorials-tw/%2Fs%2Ffeatures-tw)

## 小結
- 許多文書服務都有支援 MarkDown
- 饒過你排版的心思，專注在書寫上
- HackMD 共筆的重要功能，你得到他了!

> 提供[今日簡報](https://hackmd.io/@wiimax/intro-hackmd-05)，以及至今已公開的[所有簡報](https://hackmd.io/@wiimax/intro-hackmd-slides)，供您一次瀏覽!

以上會因為各種服務更新而有不同，為個人感受供參考。
如有口誤及用詞不當得罪之處還請海涵