一定要看的HackMD使用教學

--- title: 一定要看的HackMD使用教學 description: 不用5分鐘，讓你輕鬆上手HackMD author: Neil Ni tags: 一定要看的入門系列, BAPC --- # 一定要看的HackMD使用教學 :::warning ~~應該會比官方的還要人性化吧呵呵~~ ::: 嗨大家~ 感謝你們點進這篇教學 :pray: 相信在這邊的各位很多人都是第一次用HackMD吧先簡單介紹一下 HackMD是一個可以多人協作的筆記平台在2014年由當時還在台北科技大學資工系唸碩士的吳承翰開發剛開始這個專案（就是你現在在用的HackMD）是被用來交他的期末作業的據他本人所說他這個作業拿到了99分（阿剩下的一分勒ww 不同於其他的筆記平台 HackMD的內容是需要用 ***Markdown語法*** 輸入的欸等等等～不要因為看到程式語言就逃跑阿雖然第一次看到的人可能會有點害怕但是相信我這非常**簡單**並**容易上手**！！！接下來就讓我一步一步教你如何操作吧 :face_with_cowboy_hat: # Markdown 常用語法 Markdown 是一種輕量級標記式語言（維基百科的解釋）其實不只在HackMD這個平台就連Discord上也能看到它的存在像是比較常見的 *斜體字* **粗體字** ***斜體粗體字*** ~~刪除線~~ 等等都是用Markdown語法呈現的喔在做筆記這方面相較於一般軟體用的純文字輸入（像是Google文件）使用Markdown語法可以讓筆記內容更豐富操作上更直覺一些而且排版的速度真的快很多！！！ ## 1. 各種字體 * #### 標籤文字 (最大是h1 最小是h6) (這個是h4) :::spoiler 點我看範例 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 ::: >使用方式：`#### 字打在這 (h幾就加幾個# 像h3就是###)` * *斜體* >使用方式：`*字打在這*` * **粗體** >使用方式：`**字打在這**` * ***粗體斜體*** >使用方式：`***字打在這***` * ~~刪除線~~ >使用方式：`~~字打在這~~` * ==螢光筆標示== >使用方式：`==字打在這==` ## 2. 階層清單 aka排版神器 ### 無序階層 * 這是第一層 * 這是第一層 - 這是第二層 - 這是第三層 - 其實還可以有好多好多層程式碼： ``` * 這是第一層 * 這是第一層 - 這是第二層 - 這是第三層 - 其實還可以有好多好多層 ``` ### 有序階層 1. 這是第一層 2. 這是第一層 1. 這是第二層 1. 這是第三層 1. 一樣也可以有好多好多層程式碼： ``` 1. 這是第一層 2. 這是第一層 1. 這是第二層 1. 這是第三層 1. 一樣也可以有好多好多層 ``` :::info 無序階層要進入下一層要空兩格，有序階層則是要空三格。要結束階層的話請空一行。 ::: ## 3. 分隔線 --- 使用方式：`---` ## 4. 超連結文字 [快來點我](https://hackmd.io/@JustOnTheRise) 使用方式：`[超連結文字](網址)` ## 5. 可收合方塊 :::spoiler 點我這邊可以放圖片喔呵呵 ![](https://i.imgur.com/Y3NIbe3.png) ::: #### 使用方式： ``` :::spoiler 你想要打的東西都放這裡不管是文字圖片程式碼都行 ::: ``` ## 6. 色塊 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: ## 7. 引用區塊 > 引用的內容使用方式： ``` > 引用的內容 ``` :::danger ※注意：若要在引用的內容下方輸入一般文字，要記得空一行 :::info 範例（有空一行）： > [color=blue] 引用的內容下面要打的字程式碼： ``` > [color=blue] 引用的內容下面要打的字 ``` 範例（沒空一行）： > [color=blue] 引用的內容下面要打的字程式碼： ``` > [color=blue] 引用的內容下面要打的字 ``` 效果等同於： ``` > [color=blue] 引用的內容 > 下面要打的字 ``` ::: ### 引用中的引用範例： > 引用的內容 > > 引用的內容的子內容 > > > 引用的內容的子子內容程式碼： ``` > 引用的內容 > > 引用的內容的子內容 > > > 引用的內容的子子內容 ``` ### 加上顏色就是幫左邊那一條線加上顏色範例： > [color=pink] 引用的內容程式碼長醬： ``` > [color=pink] 引用的內容 ``` 也可以打成 ``` > [color=#FFB6C1] 引用的內容 ``` :::warning color 後面的參數可以填==顏色的英文==或是==色碼==，色碼查詢網站：https://htmlcolorcodes.com/ ::: ### 使用引用區塊留言我們有時候也會把引用區塊當作「留言功能」使用　只需要在下面加入名字就變得跟留言一模一樣呢！ > [color=pink] 就像這樣子 > [name=Neil Ni] 使用方式： ``` > 留言打這邊 > [name=打上你的名字] ``` ## 8. 表情符號 HackMD跟Discord一樣支援emoji 也都能使用代號輸入像是要打出 :joy: 就可以輸入`:joy:` 但是記得要跟前面的文字空一格 HackMD也有輸入提示系統只要打出關鍵字就能找到你要的表情符號了表情符號大全：https://github.com/ikatyang/emoji-cheat-sheet :::danger ※注意：有一些表情符號在HackMD打不出來 ::: ## 9. 插入圖片 因為我們無法把圖片儲存在HackMD（除非你有課金）所以大部分的圖片都是先上傳到Imgur再貼到這裡貼照片的語法是 `![](照片的網址)` 當然你也可以使用HackMD的工具列上的圖片功能 ![](https://i.imgur.com/XvTq8Do.png) 工具列的其他功能也可以自己用用看喔 :slightly_smiling_face: ## 10. 留言 雖然這不是Markdown的功能但我還是決定放在這邊介紹 :D 如果今天想要留言的話只需要把想提出留言的那一串字選取起來再按下旁邊的Comment按鈕就可以開始留言了！ ![](https://i.imgur.com/G9IZP4r.png) :::success :tada: 如果以上內容你都看得懂的話，那恭喜你，你已經成功入門HackMD囉！ :tada: :::

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.