---
title: 常用Markdown語法與HackMD的擴充
tags: hackmd, markdown
slideOptions:
theme: blood
transition: slide
---
<style>
code {
color: red;
background: #dddddd;
}
.reveal p code {
background-color: #dddddd;
dis-play: inline-block;
border-radius: 7px;
}
</style>

##  常用Markdown語法與HackMD的擴充
* 標題
* 清單
* 字體變化
* ...

---

## 標題

* 簡報名稱預設為最大字體的標題一
* 以`# `開頭（半形井號加一個空白）
* 次要標題可以用標題二`## `或標題三`## `
* 標題一至標題六，字體由大到小
* `###### tags: `設定筆記的標籤

----

`# 這是標題一：最大字體`
# 這是標題一：最大字體

----

`## 這是標題二：次大字體`
## 這是標題二：次大字體

`### 這是標題三`
### 這是標題三

`#### 這是標題四`
#### 這是標題四

----

`##### 這是標題五`
##### 這是標題五

`###### 這是標題六`
##### 這是標題六

---

## 清單（列表）

1. 無序清單用半形星號、加號或減號，再一個空白
2. 有序清單用數字、點（或右括號）與空白
* 如`1. `、`2. `、`3，) `
* 數字不拘，系統會自行排序
3. 待辦清單：清單後面再加中括號與空白或x(小寫)
* 如`- [ ] Todo item 1`
* 如`- [x] Todo item 2`

* 按Tab或2個空白形成第二層清單

----

### 無序清單

* 第1點
    * 第1.1點
    * 第1.2點
    * 第1.3點
* 第2點
* 第3點

* 第1點
* 第1.1點
* 第1.2點
* 第1.3點
* 第2點
* 第3點

----

### 有序清單

1. 第1點
    1. 第1.1點
    2. 第1.2點
1. 第2點    
5. 第3點

另一段：
  
16. 第16點
1. 第17點

----

1. 第1點
1. 第1.1點
2. 第1.2點
1. 第2點
5. 第3點

另一段：

16. 第16點
1. 第17點

----

### 待辦清單

- [x] 買啤酒
- [ ] 買牛奶
- [ ] 買尿布
- [X] x要用小寫

---

## 引用(Quote)

* 以大於與空白`> `表示
* `>> `第二層引用
* `>>> `第三層引用
* 以此類推

### 擴充語法
* `> [name=姓名] [time=時間] [color=顏色碼]`

----

### 引用(Quote)

Steve Jobs told: 
> 1. Stay hungry. Stay foolish.
> [name=史提夫·賈柏斯] [time=June 12, 2005] [color=red]
>> 2.「如果每個人都要去舊金山，那麼，花許多時間*爭執*走哪條**路並不是問題**。但如果有人要去舊金山，有人要去聖地牙哥，這樣的爭執就很浪費時間了。」[color=purple]

----

Steve Jobs told:
> 1. Stay hungry. Stay foolish.
> [name=史提夫·賈柏斯] [time=June 12, 2005] [color=red]
>> 2.「如果每個人都要去舊金山，那麼，花許多時間*爭執*走哪條**路並不是問題**。但如果有人要去舊金山，有人要去聖地牙哥，這樣的爭執就很浪費時間了。」[color=purple]

*[Steve Jobs]: Apple Inc. ex-CEO

---

## 字體變化

* 斜體：*一個星號或底線*
* 粗體：**兩個星號或底線**
* 刪除線：~~兩個Tilde(波浪號)~~
* 底線：++兩個加號++
* 高亮：==兩個等號==
* 上標：兩個`^`，如 `1024^16^`=1024^16^
* 下標：兩個`~`，如 `H~2~O~2~`=H~2~O~2~

----

### 字體變化

* 斜體：*一個星號或底線*
* 粗體：**兩個星號或底線**
* 刪除線：~~兩個Tilde(波浪號)~~
* 底線：++兩個加號++
* 高亮：==兩個等號==
* 上標：兩個`^`，如 `1024^16^`=1024^16^
* 下標：兩個`~`，如 `H~2~O~2~`=H~2~O~2~

---

## Emoji (繪文字，表情符號)

* 格式：用兩個冒號夾住，`:Emoji代碼:` :tada: :heart: `:tada: :heart:`
* [Emoji代碼清單](https://www.webfx.com/tools/emoji-cheat-sheet/)

---

## 程式碼

* 文字之間使用：前後用一個倒引號(`，Back-quote)夾住
* 一段獨立指令碼區塊
* 第一行與最後一行用三個倒引號開頭
* 第一行倒引號後面可以接程式語言名稱
* `程式語言名稱=`則會以語法強調格式呈現
* `程式語言名稱=開始行號`：行號1由指定行號開始

----

### 用```java=

public static void main(String[] args) throws Exception {
  System.out.println("Hello World!");
}  

### 用```java=120

public static void main(String[] args) throws Exception {
  System.out.println("Hello World!");
}  

---

## 連結與圖片

* 連結格式：`[文字](網址)`或`[文字](網址 "提示文字")`
* 圖片格式：``或``

----

`相關網址：[簡睿隨筆](http://jdev.tw/blog "技術分享的網站，歡迎參觀")`
相關網址：[簡睿隨筆](http://jdev.tw/blog "技術分享的網站，歡迎參觀")

`` ``

 

---

## 參考式連結

- 連結格式：`[文字][參考代碼]` ➡ [文字][參考代碼]
- 需要重覆使用的超連結即可使用此語法
- 縮寫：遊標顯示提示文字（前後要有空白），如：使用 Markdown 語法，語法：`*[Markdown]: `

[參考代碼]: https://jdev.tw
*[Markdown]: 一個輕量的標記語言

[參考代碼]: https://jdev.tw
*[Markdown]: 一個輕量的標記語言

---

## 註腳

* 格式：`附註[^註腳自訂代碼]` ，如:附註[^註腳自訂代碼]

`[^註腳自訂代碼]: 註腳說明`

[^註腳自訂代碼]: 註腳說明

---

## 外部資源參考

* 格式：`{%資源名稱 參考代碼 %}`
#### 資源名稱
* youtube
* vimeo
* gist
* slideshare
* speakerdeck
* pdf

* hackmd 引入HackMD的另一篇筆記
`{% hackmd S1rGsKHVS %}`

----

### YouTube影片

`{%youtube UF8uR6Z6KLc %}`
{%youtube UF8uR6Z6KLc %}

---

## 圖表功能

以下圖表功能請參考[官方教學文件][mathjax]

* MathJax
* UML循序圖
* 流程圖
* Graphviz
* 五線譜

[mathjax]: https://hackmd.io/c/tutorials-tw/%2Fs%2FMathJax-and-UML-tw

---

## 提示區塊

* 格式：
* 第一行是`:::提示種類`
* 最後一行是`:::`
* 提示種類：
* success
* info
* warning
* danger

----

`:::info ... :::`
:::info
:bell: 訊息
Stay hungry. Stay foolish.
> [name=史提夫] [time=June 12, 2005] [color=red]
:::

`:::danger ... :::`
:::danger
:warning: 警告！
系統發生錯誤！
:::

---

## 表格

* 簡單格式：用 | (pipe or bar)分隔

表頭1 | 表頭2 | 表頭3
--- | --- | ---
(1,1) | (1,2) | (1,3)
(2,1) | (2,2) | (2,3)
(3,1) | (3,2) | (3,3)

表頭1 | 表頭2 | 表頭3
--- | --- | ---
(1,1) | (1,2) | (1,3)
(2,1) | (2,2) | (2,3)
(3,1) | (3,2) | (3,3)

----

## 表格（續）
* 複雜格式 (左靠，置中，右靠)

| 表頭1 | 表頭2 | 表頭3 |
|:---|:---:|---:|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |

| 表頭1 | 表頭2 | 表頭3 |
|:---|:---:|---:|
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |

---

## 參考
* [支援的YAML選項](https://hackmd.io/s/HkJ8ZwgM)
* [數學式與圖表][mathjax]
* [Emoji清單](https://www.webfx.com/tools/emoji-cheat-sheet/)

[mathjax]: https://hackmd.io/c/tutorials-tw/%2Fs%2FMathJax-and-UML-tw