--- # System prepended metadata title: 一定要看的HackMD使用教學 tags: [' BAPC', 一定要看的入門系列] --- --- 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: :::