---
# System prepended metadata

title: 一定要看的HackMD使用教學

---

---
title: 一定要看的HackMD使用教學
description: 這個應該會比官方的還要讚吧
author: Neil Ni
---
<style>
    @keyframes updown {
        0% {
            transform: translateY(1px);
        }
        50% {
            transform: translateY(-20px);
        }
        100% {
            transform: translateY(1px);
        }
    }
    .updown {
        animation: updown 2s infinite;
        position: absolute;
        margin-left: 4px;
    }
    .footer {
        text-align: center;
    }
    
</style>

# 一定要看的HackMD使用教學
:::warning
~~應該會比官方的還要人性化吧呵呵~~
:::

嗨大家~歡迎來到 做個<font color="f000">**問題**</font>兒童<span class="updown">:tada:</span>

相信在這邊的各位 很多人都是第一次用HackMD吧

先簡單介紹一下 HackMD是一個筆記平台

在2014年由當時還在台北科技大學資工系唸碩士的吳承翰開發

剛開始這個專案（就是你現在在用的HackMD）是被用來交他的期末作業的

據他本人所說 他這個作業拿到了99分（阿剩下的一分勒ww

不同於其他的筆記平台 HackMD的內容是需要用 ***Markdown語法*** 輸入的

欸等等等～不要因為看到程式語言就逃跑阿

雖然第一次看到的人可能會有點害怕 但是相信我 這非常**簡單**並**容易上手**！！！

接下來就讓我一步一步教你如何操作吧 :face_with_cowboy_hat: 

# Markdown 常用語法
Markdown 是一種輕量級標記式語言（維基百科的解釋）

其實不只在HackMD這個平台 就連Discord上也能看到它的存在

像是比較常見的 *斜體字* **粗體字** ***斜體粗體字*** ~~刪除線~~ 等等 

都是用Markdown語法呈現的喔

在做筆記這方面 相較於一般軟體用的純文字輸入（像是Google文件）

使用Markdown語法可以讓筆記內容更豐富 操作上更直覺一些 

而且排版的速度真的快很多！！！

## <font color=#050223>各種字體</font>

* #### 標籤文字(最大是h1 最小是h6) 
  :::spoiler 點我看範例
    # h1
    ## h2
    ### h3
    #### h4
    ##### h5
    ###### h6
   :::
  >使用方式：`#### 字打在這 (h幾就加幾個# 像h3就是三個#)`


* *斜體* 
  >使用方式：`*字打在這*`

* **粗體** 
  >使用方式：`**字打在這**`

* ***粗體斜體*** 
  >使用方式：`***字打在這***`

* ~~刪除線~~ 
  >使用方式：`~~字打在這~~`

* ==螢光筆標示== 
  >使用方式：`==字打在這==`
## <font color=#050223>階層清單 aka排版神器</font>
### 無序階層
 * 這是第一層
 * 這是第一層
   - 這是第二層
     - 這是第三層
       - 其實還可以有好多好多層

程式碼：
```
 * 這是第一層
 * 這是第一層
   - 這是第二層
     - 這是第三層
       - 其實還可以有好多好多層
```
### 有序階層
1. 這是第一層
2. 這是第一層
   1. 這是第二層
      1. 這是第三層
         1. 一樣也可以有好多好多層

程式碼：
```
1. 這是第一層
2. 這是第一層
   1. 這是第二層
      1. 這是第三層
         1. 一樣也可以有好多好多層
```
:::info
無序階層要進入下一層要空兩格，有序階層則是要空三格。要結束階層的話請空一行。
:::

## <font color=#050223>分隔線</font>
--- 
使用方式：`---`

## <font color=#050223>超連結文字</font>
[快來點我](https://hackmd.io/@JustOnTheRise)

使用方式：`[超連結文字](網址)`


## <font color=#050223>可收合方塊</font>
:::spoiler 點我
這邊可以放圖片喔呵呵
![](https://i.imgur.com/Y3NIbe3.png)

:::
#### 使用方式：

```
:::spoiler
你想要打的東西都放這裡
不管是文字 圖片 程式碼都行
:::
```

## <font color=#050223>色塊</font>
1. success
:::success
Type your text here
:::
2. warning
:::warning
Type your text here
:::
3. info
:::info
Type your text here
:::
4. danger
:::danger
Type your text here
:::
使用方式（用success舉例）：
```
:::success 
你的文字內容
:::
```
其他的以此類推 :+1: 

## <font color=#050223>引用區塊</font>

> 引用的內容
 
使用方式：
```
> 引用的內容
```
:::danger
※注意：若要在引用的內容下方輸入一般文字，要記得空一行

:::info
範例（有空一行）：
> [color=blue] 引用的內容

下面要打的字

程式碼：
```
> [color=blue] 引用的內容

下面要打的字
```

範例（沒空一行）：
> [color=blue] 引用的內容
下面要打的字

程式碼：
```
> [color=blue] 引用的內容
下面要打的字
```
效果等同於：
```
> [color=blue] 引用的內容
> 下面要打的字
```
:::
  
* ### 引用中的引用
> 引用的內容
> > 引用的內容的子內容
> > > 引用的內容的子子內容

程式碼：
```
> 引用的內容
> > 引用的內容的子內容
> > > 引用的內容的子子內容
```

* ### 加上顏色
就是幫左邊那一條線加上顏色
範例：
> [color=pink] 引用的內容

程式碼長醬：
```
> [color=pink] 引用的內容
```
* ### 使用引用區塊留言
我們有時候也會把引用區塊當作「留言功能」使用　
只需要在下面加入名字 就變得跟留言一模一樣呢！

> [color=pink] 就像這樣子
> [name=Neil Ni]

使用方式：
```
> 留言打這邊
> [name=打上你的名字]
```


## <font color=#050223>表情符號</font>
HackMD跟Discord一樣支援emoji 也都能使用代號輸入
像是要打出 :joy: 就可以輸入`:joy:` 但是記得要跟前面的文字空一格
HackMD也有輸入提示系統 只要打出關鍵字就能找到你要的表情符號了

表情符號大全：https://github.com/ikatyang/emoji-cheat-sheet
:::danger
※注意：有一些表情符號在HackMD打不出來
:::


## <font color=#050223>插入圖片</font>
因為我們無法把圖片儲存在HackMD（除非你有課金）
所以大部分的圖片都是先上傳到Imgur再貼到這裡
上傳照片的語法是 `![](照片的網址)`
當然你也可以使用HackMD的工具列上的圖片功能
![](https://i.imgur.com/XvTq8Do.png)

工具列的其他功能也可以自己用用看喔 :slightly_smiling_face: 


## <font color=#050223>留言</font>
雖然這不是Markdown的功能 但我還是決定放在這邊介紹 :D
如果今天想要留言的話 只要把想要提出留言的那一串字選取起來
再按下旁邊的Comment按鈕 就可以開始留言了！

![](https://i.imgur.com/G9IZP4r.png)


:::success
:tada: 如果以上內容你都看得懂的話，那恭喜你，你已經成功入門HackMD囉！ :tada: 
:::

