---
# System prepended metadata

title: 30208邱泓諭_HackMD練習

---

# 30208邱泓諭_HackMD練習

:::success
* 完成項目
* [x] 基本內容80%
* [x] 增加文字顏色 3%
* [x] 心智圖 3%
* [x] 圓餅圖 3%
* [x] 表格製作 3%
    * [x]  (功課表 2%)
* [x] 內容善用[顏色區塊][文字格式/繪文字][分隔線]編排整理 6%
:::

:::warning
目錄
[TOC]
:::
## 1.標題
筆記名稱預設為最大字體的標題一#
次要標題可以用標題二## 或標題三###
標題一至標題六,字體由大到小
#符號多少決定字體大小
標題一 h1(#)
標題二 h2(##)
標題三 h3(###)
標題四 h4(####)
標題五 h5(#####)
標題六 h6(######)
## 2.清單
### (1)無序清單
無序清單用半形星號*、加號+或減號-,再一個空白
例:全台六都
* 新北市
* 台北市
* 桃園市
+ 台中市
+ 台南市
- 高雄市
 
### (2)有序清單
有序清單用數字、點(或右括號)與空白
例:12生肖
1. 鼠
2. 牛
3. 虎
4. 兔
5) 龍
6) 蛇
7) 馬

### (3)待辦清單
待辦清單:清單後面再加中括號與空白或x(小寫)
例:中秋節採購
* [x] 月餅
* [ ] 玉米
* [x] 黑輪
* [ ] 米血
* [x] 木炭
* [ ] 蝦子
* [x] 文旦
* [ ] 烤肉片

### (4)第二層清單
按Tab或2個空白形成第二層清單
例:學測準備科目
* 國文
  * 作文
* 英文
* 數學
* 自然
  * 物理
    * 公視背誦
  * 化學
    * 化學週期表
  * 生物
  * 地科
* 社會

## 3.字體變化
* 斜體:一個星號*或底線_ → *斜體* _斜體_
* 粗體:兩個星號**或底線__ → **粗體** __粗體__
* 刪除線:兩個Tilde(波浪號~) → ~~刪除線~~
* 底線:兩個加號++ → ++底線++
* 高亮:兩個等號== → ==高亮==
* 上標:兩個^^,如 1024^16^=102416 → ^上標^
* 下標:兩個~~ ,如 H~2~O~2~= 2 → ~下標~
* 進階功能: 如何更換文字顏色:
* <font color="#96999A">灰色</font>
<font color="#AC19C9">紫色</font>
<font color="#1936C9">藍色</font>

## 4.繪文字Emoji
* 格式:用兩個冒號夾住,:Emoji代碼:
  例::tada: :heart:
  練習題:找3個喜愛的食物/水果/動物
  1.檸檬 :lemon: 
  2.酪梨 :avocado:
  3.猴子 :monkey: 
* [Emoji代碼清單](https://www.webfx.com/tools/emoji-cheat-sheet/)
## 5.程式碼
* 文字之間使用:前後用一個倒引號==[與~同一鍵]== 夾住
* 一段獨立指令碼區塊
   * 第一行與最後一行用==三個倒引號==開頭
   * 第一行倒引號後面可以接==程式語言==名稱
   * 程式語言名稱=則會以語法強調格式呈現 →```python=``` 或 ```cpp=```
  * 程式語言名稱==開始行號==:行號1由指定行號開始
 例:高一C++上機考題目
 ```cpp=
#include <bits/stdc++.h>
//#include <iostream>     
using namespace std; 
int main()
{ int x;
    for (int i=0;i<5;i++)
    {
        cin>>x;    
        if (x>=200) 
            cout<<x<<"天:白金會員\n";
        else 
            if (x>=180) 
                cout<<x<<"天:金牌會員\n";
            else 
                if (x>=160) 
                    cout<<x<<"天:銀牌會員\n";
                else 
                    if (x>=140) 
                        cout<<x<<"天:銅牌會員\n";
                    else 
                        cout<<x<<"天:基本會員\n";
    }
    
    return 0;
}
```
## 6.連結
連結格式:
1.`[文字](網址)`
2.`[文字](網址"題是文字")`
例:
1.[國立北門高中](https://www.bmsh.tn.edu.tw)
2.[我的高中母校](https://www.bmsh.tn.edu.tw "北中")
3.[我的最愛網站](https://www.roblox.com/home)
## 7.圖片
圖片格式:
1. `![文字](網址)`
2. `![文字](網址=寬x高)`
3. `![文字](網址 =50%x)`

例:野獸前輩
原圖
![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.jpg)
原圖變形
![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.png =100x200)
原圖縮小一半
![野獸前輩](https://pbs.twimg.com/media/Fn4CdztaYAASuzm.png =50%x)
上傳自己的圖
![71-230GG04H4-50](https://hackmd.io/_uploads/SkTfLDCTR.jpg)
## 8.外部資源
格式:{%資源名稱 參考代碼 %}
資源名稱
* youtube
* vimeo
* gist
* slideshare
* speakerdeck
* pdf

例:
1.北中沙克男孩
{%youtube djgGNhyecI0%}
2.我最愛的影片(Rick roll)
{%youtube dQw4w9WgXcQ%}

### 8-1.外部資源example
1. Youtube
{%youtube 1G4isv_Fylg %}
2. Vimeo
{%vimeo 124148255 %}
3.Gist(程式碼)
{%gist schacon/4277 %}
4.SlideShare(簡報)
{%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %}
5.Speakerdeck(簡報)
{%speakerdeck sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity %}
6.PDF
{%pdf https://www.tqc.org.tw/user/Example/B973D99B-4C85-44B2-9133-BD34827395B4.pdf %}
## 9.圖表功能
以下圖表功能請參考官方教學文件
### 數學式MathJax
您可以使用 **MathJax** 語法 來產生 *LaTeX* 數學表達式，如同 [math.stackexchange.com](http://math.stackexchange.com/)，但是開始的 `$` 後面以及結尾的 `$` 前面不能有空白：

The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

使用區塊層級的數學式時，請在您的數學式之前與之後給予 `$$` 以及換行：

$$
x = {-b \pm \sqrt{b^2-4ac} \over 2a}.
$$

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

[更多關於 **LaTeX** 數學表達式 <i class="fa fa-external-link"></i>](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference)

### 循序圖sequence
```sequence
艾莉絲->包柏: 哈摟，你好嗎？
Note right of 包柏: 包柏思考中
包柏-->艾莉絲: 我很好，謝謝！
Note left of 艾莉絲: 艾莉絲回應
艾莉絲->包柏: 最近過得怎樣？
```
[更多關於 **循序圖** 語法 <i class="fa fa-external-link"></i>](http://bramp.github.io/js-sequence-diagrams/)
&nbsp;
&nbsp;

### 流程圖flow
您可以像是以下使用流程圖：
```flow
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
op2=>operation: 啦啦啦
cond=>condition: 是或否？

st->op->op2->cond
cond(yes)->e
cond(no)->op2
```


[更多關於 **流程圖** 語法 <i class="fa fa-external-link"></i>](http://adrai.github.io/flowchart.js/)

&nbsp;
&nbsp;

### 樹狀圖Graphviz
```graphviz
digraph hierarchy {

                nodesep=1.0 // increases the separation between nodes
                
                node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
                edge [color=Blue, style=dashed] //All the lines look like this

                Headteacher->{Deputy1 Deputy2 BusinessManager}
                Deputy1->{Teacher1 Teacher2}
                BusinessManager->ITManager
                {rank=same;ITManager Teacher1 Teacher2}  // Put them on the same level
}
```
[更多關於 **graphviz** 語法 <i class="fa fa-external-link"></i>](http://www.tonyballantyne.com/graphs.html)
&nbsp;
&nbsp;
### 五線譜abc
```abc
X:1
T:Speed the Plough
M:4/4
C:Trad.
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
```
[更多關於 **abc** 語法 <i class="fa fa-external-link"></i>](http://abcnotation.com/learn)
&nbsp;
&nbsp;
### 圓餅圖pie
title 代表圓餅圖的名稱
每個項目的數值請以百分比寫出來
小數點不需要非常準確，但數值總和必須約等於100哦～
```mermaid
pie

title 你最常喝什麼酒？

"啤酒" : 52.8
"紅、白葡萄酒" : 24.8
"威士忌" : 8.6
"高粱" :  4.0
"花式調酒": 8.9
```
### 心智圖markmap
```markmap
## 1.標題
## 2.清單
### (1)無序清單
### (2)有序清單
### (3)待辦清單
### (4)第二層清單
## 3.字體變化
## 4.Emoji繪文字
## 5.程式碼
## 6.連結
## 7.圖片
## 8.外部資源
### example示例
## 9.圖表功能
### MathJax 數學公式
### UML循序圖
### 流程圖
### Graphviz樹狀圖
### 五線譜
### 圓餅圖(進階)
### 心智圖(進階)
## 10.提示區塊
## 11.區塊引用
## 12.表格
## 13.參考資料
```
## 10.提示區塊
*格式:
 * 第一行是:::提示種類
 * 最後一行是:::
* 提示種類:
 * success
 * info
 * warning
 * danger
* 註: 分隔線:三個或以上的星號、減號、底線

例:4色區塊
:::success
綠色區塊
:::
:::info
藍色區塊
:::
:::warning
黃色區塊
:::
:::danger
紅色區塊
:::
:::success
12345
:::info
混色區塊
:::

:::spoiler 不要亂點
蔡雲林是蘿莉控
:::success
:::
3條分隔線
***
___
___
## 11.區塊引用
* 區塊引用:>
* 提示種類:
* Note: 註
* Tip: 小提醒
* Important: 很重要
* Warning: 超急
* Caution: 危險勿動
* 例:座右銘
>座右銘
>>助人為快樂之本
>>>摘錄自名人語錄
* 引用警示:格式:>[!]
* 例:引用警示
 * >[!Note] 註
  *  >[!Tip] 小提醒
  * >[!Important] 很重要
 * >[!Warning] 超急
* >[!Caution] 危險勿動
## 12.表格
1.我們用 |和 -來繪製 Markdown 表格
2.第一列為標題列，Markdown 表格用標題列的欄數決定這個表格的欄數
3.第二列的欄位需要包含-，並用| 分隔
4.用 |分隔每欄
5.用換行來建立新的一列
範例
| 名稱  | 數量 |
| ----- | -------- |
| 蘋果 | 3        |
| 雞蛋 | 12       |

功課表
| 星期一 | 星期二 | 星期三 | 星期四 | 星期五  |
|-|-|-|-|-|
| 物理 | 化學 | 英文 | 生物 | 選修  |
| 英文 | 生物 | 數學 | 國文 | 選修  |
| 選修 | 物理 | 物理 | 國文 | 體育  |
| 選修 | 國文 | 物理 | 物理 | 體育  |
| 數學 | 數學 | 數學 | 化學 | 團體活動  |
| 物理 | 藝術 | 自主 | 音樂 | 團體活動  |
| 英文 | 藝術 | 自主 | 音樂 | 數學  |
| 數學 | 物理 | 化學 | 化學 | 國文  |

* 步驟一(啟用智慧貼上)
![image](https://hackmd.io/_uploads/Hksyspgkyl.png)
* 步驟二(複製Excel已經打好的課表)
![image](https://hackmd.io/_uploads/H1lqsq6e1yx.png)

## 13.參考資料
[HackMD 使用教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw)