--- title: HackMD 快速入門教學 description: 五分鐘,Markdown 無痛上手,HackMD 強大功能一網打盡。 --- HackMD 快速入門教學 === {%hackmd zfoEnYvRQZqKUpGoVsyDJw %} 嗨!你好,歡迎使用 HackMD :smiley_cat: **HackMD 是讓你快速撰寫筆記,流暢管理知識,支援多種衍生功能的生產力工具** 這篇文章,將讓你快速上手 :100: --- [TOC] 1.基本邏輯 === HackMD 採用 ==Markdown== 語法,它是**僅僅使用文字與符號,就能快速排版**的寫作方法。 以純文字儲存,在視覺上,也能約略看出文章脈絡,已廣泛地運用在各式網路平台。 :baby_chick: 使用 Markdown 書寫的時候,**你可以直接將想法輸入到編輯器中**: - 先不對文字進行視覺上的調整 (例如:變成粗體、標題、分項目),專注把想法表達出來。 - 當內容比較完整的時候,再來使用語法排版。 :baby_chick: 也可以充分運用 HackMD 的雙欄模式,**你在編輯器寫作,同時檢視「被呈現」的模樣**: - 先寫出結構,大標題、次標題、文件資訊的醒目提示 - 有個排版的基本想法,再來填充文字內容。 2.開始寫作 === 來到編輯頁面,可以看到上方的功能列,有個 <i class="fa fa-columns"></i> 按鈕,按下後就可以切換到**雙欄模式**。雙欄模式中,左欄是編輯區域,請在此輸入文字與編輯語法;右欄是檢視區域,請在此預覽算繪後的結果。 ![](https://i.imgur.com/DBRXsw9.png) 由於 HackMD 高度重視編輯器協作體驗,你可以比較各家筆記軟體的打字流暢度。中文使用者,不會像其他軟體常遇到[中文打字裂掉](https://blog.hackmd.io/zh/blog/2021/07/19/Composition_Event_zh)的問題,適合重視寫作體驗的你 :pencil2: 3.簡易語法 === 千萬不要被各式各樣的語法嚇到了!:sweat_drops: 這些語法,是輔助原本的文字可以表達得更清楚。因此,就算是沒有這些語法與標記,文章還是可以閱讀的。在此說明一些基本常用的語法:標題、清單、引用區塊、粗斜體、圖片、影片。 :::info :bulb: 小提示:您隨時都可以使用編輯區塊上方的工具列來快速插入語法 ![](https://i.imgur.com/Cnle9f9.png) ::: 🕹 3-1.設定標題 --- 當你想要將一段文字標示為標題的時候,請使用這個語法。 在行首輸入 `#` 符號,並在後面加上一個空白後,再輸入標題文字。 標題有分成 6 個層級,`#` 的數量愈多,層級越低。 你可以按照範例輸入看看: ``` # 第一層級標題 ## 第一層級標題 ### 第一層級標題 #### 第一層級標題 ##### 第一層級標題 ###### 第一層級標題 ``` :point_down: 以上範例結果為: ![](https://hackmd.io/_uploads/HkuchRCpO.png) :::info :bulb: 小提示:覺得語法容易忘記嗎?沒關係! HackMD 提供貼心的自動完成功能,例如:您在行首輸入 `#`,就會出現自動完成選單,提示您可用的標題語法! ![](https://i.imgur.com/fyFgCez.png =300x) ::: 🕹 3-2.階層清單 --- 當你想要列舉一些項目的時候,請使用此語法。 加上項目編號,將項目縮排即可作為子清單。 清單分為**有序清單**與**無序清單**兩種。 有序清單,是項目符號會使用數字編號;無序清單,是項目符號會使用同樣的層級的符號。 你可以按照範例輸入看看: ``` - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 1. 有序清單 2. 有序清單 1. 有序清單子清單 1. 有序清單子子清單 ``` :point_down: 以上範例結果為: - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 1. 有序清單 2. 有序清單 1. 有序清單子清單 1. 有序清單子子清單 🕹 3-3.引用區塊 --- 當你需要將一段文字標示為引用的時候,請使用此語法。 請在行首輸入 `>` 符號,並在後面加上一個空白後,再輸入引用文字,即可形成引用區塊。 如在引用區塊前多次輸入 `>` 符號,即是子引用區塊。 你可以按照範例輸入看看: ``` > 引用區塊 >> 子引用區塊 >>> 子子引用區塊 ``` :point_down: 以上範例結果為: > 引用區塊 >> 子引用區塊 >>> 子子引用區塊 🕹 3-4.粗體、斜體 --- 當你需要將一段文字以粗體或是斜體表現的時候,請用此語法。 請在文字兩端加上 `*` 符號,即可將文字變成粗體或是斜體 使用一個 `*` 為斜體;使用兩個 `*` 為粗體。 您可以按照範例輸入看看: ``` *斜體* **粗體** ``` :point_down: 以上範例結果為: *斜體* **粗體** :::info :bulb: 小提示:使用編輯區塊上方的工具列,快速對選取中的文字加上格式 ![](https://i.imgur.com/Cnle9f9.png) ::: 🕹 3-5.插入圖片 --- 當你需要在筆記中加入圖片的時候,你可以將圖片直接拖曳到編輯器、複製圖片後直接在編輯器貼上,都會直接將圖片上傳到 HackMD 後自動插入圖片語法。 :::warning 想上傳超過 1 MB 的圖片嗎?現在就升級 [HackMD Prime 個人方案](/xUnxzfIlTU2BV0oHmh9NuA),傳高清美照也沒問題。 ::: 或是使用此語法:請先輸入 `![]()` 這些文字,然後在後面的 `()` 中間插入圖片的網址,即可加入圖片。 你可以按照範例輸入看看: ``` ![](https://hackmd.io/favicon.png) ``` :point_down: 以上範例結果為: ![](https://hackmd.io/favicon.png) :::info :bulb: 小提示:在空白之後輸入 `!` 會有自動完成,提示您可用的圖片語法 ![](https://i.imgur.com/sZJf6AJ.png =400x) ::: 🕹 3-6.嵌入影片 --- 當你需要加入影片的時候,請使用此語法。 請先輸入 `{}` 這些文字,這時候會有自動完成: ![](https://i.imgur.com/e2dWOvX.png =300x) 接下來請按下列步驟: 1. 在自動完成中選擇您的影片來源,可能是 youtube 或是 vimeo 2. 假設你選擇 youtube,你的文字會變成 `{%youtube youtubeid %}` 3. 假設你的影片連結是:`https://www.youtube.com/watch?v=PJuNmlE74BQ` 4. 請你將文字 `{%youtube youtubeid %}` 中的 `youtubeid` 替換成你影片連結的 id,也就是 `PJuNmlE74BQ` 5. 你的文字最後會是:`{%youtube PJuNmlE74BQ %}` :point_down: 以上範例結果為: {%youtube PJuNmlE74BQ %} # :tada: 恭喜,你已完成快速入門! :tada: 你剛完成了 <i class="fa fa-file-text"></i> HackMD 的快速入門! 還有非常多功能等待你探索唷 :mag_right: {%hackmd bf-bw9GcTj-PEOvmoHSYQQ %} ## FAQ #### 點擊展開問題 :point_down: :::spoiler 單獨將標點符號套用粗體效果/句中的標點符號無法套用粗體 在Markdown語言規範中,標點符號前後不可以直接標語法,除非該符號在句尾。 若有需要,你可以在文字後面多加一個空格。 例如 ``` 我想要**標注:** 粗體文字 我想要**標注?** 粗體文字 我想要**標注粗體。** ``` 呈現效果如下 我想要**標注:** 粗體文字 我想要**標注?** 粗體文字 我想要**標注粗體。** ::: &nbsp; :::spoiler 我的筆記分享/匯出後有些圖片無法讀取,可以怎麼解決? 圖片的閱讀權限和你上傳圖片的原始筆記權限一致(當圖片網址為`https://hackmd.io/`) 如果想在多個筆記使用同一張圖片,記得將原始筆記調整為**所有人**可閱讀哦! 例如 我在A筆記上傳(圖一),A筆記設定只有 **擁有者** 可閱讀 則當我將(圖一)超連結插入B筆記,並且分享給其他人,圖片將顯示無法存取。 :::