# Hackmd語法介紹

**[點此切換雙欄模式](https://hackmd.io/ABpcr42wRG20AbkACiqLXA?both)**

<!--
這邊可以查看原始碼，右邊是實際會顯示的頁面，可以左右對照，看文字效果是使用什麼語法達成的 -->

Markdown的語法中，要空多行時必須使用`<br>`或`<BR>`，直接按Enter會被吃掉。

<br><br><BR>

要使用一些文字效果的語法，可以直接按hackmd編輯器有內建好的功能，如果很熟悉了也可以直接手打。

內建如下：（編輯器最上方可以看到）


<br>

## 第一區：復原/重做

第一區兩個方向的箭頭分別是復原/重做
快捷鍵可以按ctrl+Z跟ctrl+shift+Z

<br>

## 第二區：粗體、斜體、刪除線


第二區分別是：**粗體**、*斜體*、~~刪除線~~。H是標題化，也就是可以設定層級做成目錄

語法：
`**粗體**`
`*斜體*` （也可以 `_斜體_`）
`~~刪除線~~`

<BR>

## 第三區：程式碼

第三區

程式碼用於「想要向讀者直接展示出程式碼、不想要程式碼發揮作用時」
所以在括起來的內容中，任何程式碼都是不會有實際效果的，都會以純文字呈現

</>的效果如下：

嗨！

<BR>

## 第三區：引用

引用的效果：
> 嗨！

> 換行可以直接Enter換，也可以用`<br>`換行，<br>像這樣

<BR>

## 第三區：無序清單（列點）

列點（無序清單）：

* 列點
* 列點二
- 也可以用減號，不過使用不同的符號系統就會辨識成不一樣的清單
- 所以和上面的清單會分開

<br>

## 第三區：有序清單（列點）

有編號的列點（有序清單）：

1. 有編號的列點
2. 有編號的列點二

注意，如果點和字之間沒空格的話就不會自動形成清單了

1.沒空格
1. 有空格

<br>

## 第三區：待辦事項

- [ ] 這是待辦事項
- [X] 這是打勾的事項

有時在瀏覽頁面打勾，筆記不一定會儲存變更，也就是說可能重整後就會恢復，記得確認！

<BR>

## 第四區：超連結


第四區分別是插入超連結、圖片、表格、分隔線、留言。留言沒有要介紹所以沒有一起框起來。

[按這個會連回我發的噗](https://www.plurk.com/p/3ghm6fuu8k)
[如果沒有打連結，會連結到現在的這個頁面]()

語法：`[連結文字](連結網址)`

`[按這個會連回我發的噗](https://www.plurk.com/p/3ghm6fuu8k)`
`[如果沒有打連結，會連結到現在的這個頁面]()`

<br>

## 第四區：圖片

圖片的語法比超連結前面多了一個驚嘆號

語法：``

``

<BR>

調整圖片顯示大小語法： ``

``

記得加空格！忘記會變成死圖
%數是調整寬度（橫向的長度），可以自己改1~100之間的數字
最後的是小寫字母x，用成大寫會出錯

<BR><BR>

另外hackmd也可以當圖床，不過要注意幾點：
1. 檔案大小限制5MB
2. 圖片的閱覽權限會跟隨著你上傳該圖片的那篇筆記的權限

如果在別篇「只有我可閱覽」的筆記上傳圖片後複製到這裡：

**→沒有權限的人看起來就會長這樣**

**→而這是我這邊看到的**

因為自己一定會有所有筆記的權限，所以有時不容易發現，可以發出前切無痕檢查一下

<br><br>

## 第四區：表格

再來是表格，點擊後就會幫你直接生出表格：

| Column 1 | Column 2 | Column 3 |
| -------- | -------- | -------- |
| Text | Text | Text |

直接改裡面的字就可以了。
另外這邊也推薦讓表格文字置中的語法：

| Column 1 | Column 2 | Column 3（沒置中） |
| :------: | :------: | -------- |
| Text | Text | Text |

在線的前後加上冒號就可以了，同一直排會一起置中。在同張表格內也可以混合置中跟置左。

<br><br>

## 第四區：水平線（分隔線）

分隔線要注意如果跟字黏在一起會判定成目錄之一（第二層級）

---

<br><br>

最後插入留言的功能不是很重要就跳過了，以上，hackmd準備好的一些常用快捷介紹完畢！

不在上面的markdown語法當然大多也是能用的，不過就要自己稍微摸一下。

官方文件裡提供的語法供參：

## 文字：HighLight（黃底黃字）

==highlight==
`==highlight==`

<br>

## 文字：次方化（右上角小字化）

21^th^ Centuary
`21^th^ Centuary`

用^中文^也可以
`用^中文^也可以`

<br>

## 文字：右下角小字化

H~2~O
`H~2~O`

用~中文~也可以
`用~中文~也可以`

<br>

## 文字：底線

<u>加底線的語法</u>
`<u>加底線的語法</u>`

<br>

## 文字：改顏色

另外markdown裡沒有字體換色的語法，不過也有支援HTML語法！

<font color=#FF00000>這是紅色</font>
`<font color=#FF00000>這是紅色</font>`

<br>

## 文字：加底色
<font style="background-color:#FFFF00">加黃色底色</font>
`<font style="background-color:#FFFF00">加黃色底色</font>`

順便看看跟highlight的差異

==這是hightlight==
<font color=#F59E0B><font style="background-color:#FDF7DC">這是用font語法</font></font>

<br>

## 文字：調整大小

<font size=6>可以把字變大</font>
對比一下原本的字大小（預設font size=3）
<font size=2>也可以縮小</font>

`<font size=6>可以把字變大</font>`
`<font size=2>也可以縮小</font>`

<br><br>

## 醒目提醒／底色區塊

打出三個冒號會跑出這個建議選單


**前四個是顏色區塊**，最後一個是下收。

一一展示這幾種的效果：

:::success
綠色 success
:::

:::info
藍色 info
:::

:::warning
黃色 warning
:::

:::danger
紅色 danger
:::

<BR><BR>

## 下收

打出三個冒號會跑出這個建議選單


前四個是顏色區塊，**最後一個是下收**。

:::spoiler

這就是下收了！

:::

<br>

:::spoiler 這邊可以打字，沒打字就會預設顯示「詳細資料」
<br>
下收裡也是用br換行，不過要注意有些語法在這裡面可能會失效。
:::

<br>

:::spoiler {state=open}下收還可以調整預設為打開狀態

如果沒有設定的話，預設會是收起來的

:::

<br>

---

<br>

<font size=5>**[原完整介紹文](https://hackmd.io/@TmRUKjeQRjat2KyjM-XOWQ/r1OcZcub1g)**</font>

<br>